Add icons to Post footer elements

February 22, 2009

We're going to spice up our Blogger Post Footer a bit. We'll do this by rearranging post footer elements (Labels, Posted by, Email this posts, Comment Link..) and adding an web icon to each.

Few notes:
► the example is made in default Blogger Minima template, and the tutorial is quite easy if you're using this template
► if you're using some other default Blogger template, this tutorial will also work, but you'll have to adjust some things (maybe)
► if you are using a third-party customized template, this will work ONLY if you understand how this is done (basically, you'll have to identify your element's ID, and add some CSS style for each)

REARRANGING ELEMENTS
Blogger Post Footer is divided in 3 rows. Go to:
LAYOUT ► PAGE ELEMENTS ► click on Edit in BLOG POSTS box.
There, you can see your Post options. On the bottom, you can see 3 rows in Post Footer and elements in them.

For this example, I've activated:
► Links to this Post and
► Show Email Post links
You do the same, and if you decide not to use those, you will deactivate them later.

You can easily rearrange elements (separate them), just by "dragging" the element in desired row.

Ok. When the post elements are rearranged, the next step is: adding icons. Wheeee!

***

ADDING (PLACING) ICONS TO ELEMENTS
Before doing anything, back up your template (1 minute). When you did, we're ready to go.

1. find the icons you'd like to use (small ones, like 16x16 px)
2. upload the icons on a free web host (like Photobucket.com, Tinypic.com...) to get the Direct link (URL address)
3. increase the line-height of the post footer lines (to make some space between them)
4. code tweaking (basically, copy-paste)

1. Here's the list of some web resources where you can find free web icons:
:: www.webiconsets.com
:: www.freeiconsweb.com
:: www.freeiconsweb.com

2. You have to upload your pics (icons) somewhere in order to get the Direct Link (URL address) for your Layout (template). You can use Photobucket.com, Tinypic.com, or any other service you prefer..

3. Next is to increase the line-height of our Post footer. Go to LAYOUT ► EDIT HTML ► and find the:

.post-footer {

...and in my example (for default Minima template), the complete Post-footer style looks like this:

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

...in pink, you can see the line-height. You have to increase the value so your pictures don't get cropped:
► change the 1.4em into 2em (works fine for 16x16 px icons)
► if you have bigger (larger) icons, you will increase this value some more...

Anyway, remember that you can control this, and try a few heights to see what's the best fit.

4. Go to LAYOUT ► EDIT HTML ► and locate this part in the code:

.comment-link {
margin-$startSide:.6em;
}

...we will DELETE this part, and replace it with this one:

.post-author {
background: url(URL ADDRESS OF THE ICON) left no-repeat;
padding: 2px 0px 2px 20px;
}
.post-labels {
background: url(URL ADDRESS OF THE ICON) left no-repeat;
padding: 2px 0px 2px 20px;
}

.comment-link1 {
background: url(URL ADDRESS OF THE ICON) left no-repeat;
padding: 2px 0px 2px 20px;
margin-right: 5px;
}

.comment-link2 {
background: url(URL ADDRESS OF THE ICON) left no-repeat;
padding: 2px 0px 2px 23px;
margin-right: 5px;
}

.post-icons {
margin-right: 5px;
}

...in orange, you'll place the pic that will appear beside Posted by
...in pink, you'll place the pic that will appear beside Labels
...in green, you'll place the pic that will appear beside Comment Link
...in blue, you'll place the pic that will appear beside Links to this post

Save template.
With padding you can control the distance between certain icon and it's text.
With margin, you can control the distance between different elements.

Next, in LAYOUT ► EDIT HTML ► click on Expand Widget templates in the upper right corner. Use CTRL + F (or Edit ► Find from your browser) and locate the code regarding comment link:
HINT: search for the post-comment-link

<span class="post-comment-link">
<b:if cond="data:blog.pageType != &quot;item&quot;">
<b:if cond="data:post.allowComments">
<a class="comment-link1" href="data:post.addCommentUrl" onclick="data:post.addCommentOnclick"><b:if cond="data:post.numComments == 1">1 <data:top.commentlabel><b:else><data:post.numcomments> <data:top.commentlabelplural></data:top.commentlabelplural></data:post.numcomments></b:else></data:top.commentlabel></b:if></a>
</b:if>
</b:if>
</span>

...you have to place number 1 (in red) in exactly like it's shown above.

Then, find the code for Links to this Post:
HINT: search for post-backlinks

<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link2' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>

...and place the number 2 (in red) like it's shown above. Save.

CUSTOMIZING THE EMAIL THIS POST LINK
When you've placed your icons, you'll notice that the Email this Post link has no text beside it. You can customize it:
► by adding some text (like Email this post to a friend)
► you can change the default icon to whatever suits you
Go to LAYOUT ► EDIT HTML ► click on Expand widget templates, and locate this code:
HINT: search for email post links

<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>Email this post
</a>
</span>
</b:if>

....in orange, you can see where to place your text
...if you'd like to change the default icon, replace the URL in green with your own
...if you do that, make sure you input the correct height and width of your new picture (in pink)

That's about it. If you'll have some doubts, questions, scream! I'll help...