In this post, i will show you how to add default
Author Name, Post Date, Labels and Comments with some little icons to
the left of each other. You can see under each of my post title, some
details like author name, time when posts have been published, labels
and the comment count links. When there are no comments posted the link
says 'Be the First to comment!' and when there is just one comment it
says '1 comment so far'. This is a nice hack that will make your blog
look beautiful and professional.
Let's start adding the codes.
Step 1. Go to Blogger Dashboard > Edit HTML (for safety, backup your template)
Step 2. Check the "Expand widgets templates" box
Step 3. Search for this code:
If you can't find it, look for this one:
Step 4. Paste the following code below/after the code above:
Details that can be customized:
Replace the code in:
... with the URL address of your image.
Step 5. Save template... and you're done!
Let's start adding the codes.
Step 1. Go to Blogger Dashboard > Edit HTML (for safety, backup your template)
Step 2. Check the "Expand widgets templates" box
Step 3. Search for this code:
<div class='post-header-line-1'>
If you can't find it, look for this one:
<div class='post-header'>
Step 4. Paste the following code below/after the code above:
<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVT3zXrvANq1rjG2B5bYlmkoBFRZh-nqoW8ydcqJf1ALSa0cDSxmSq7OOgA3ZAP0Zg62gx7Xsw1mUPnVr2GK3c-n33CQKLblV7eWSjygRv8Jxd5L5JLt_N36z_DMW80c-ahjFlPMKvltsq/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZhPqFSIN51A7pN1qJ1xXMAxJGoNo2PBYdwMuzF2CZtEGijpZpjnJrYOMunDN7qaPun4hqXzita0tKp1QszwJMErohnKE-vA3pHcesdi688JQBNDC8o7IHoSvKNtxGnO4FECl1SaxmDivu/s1600/clock_icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimwXrzJ1XEOtamAcVICPRxhmDMV5h4s-W2C3x3ddt3WDml21YbvQRqe820A5DideUoNnw-aTctzrEKFygjws4KL8_a-rXZicEf2vD0w0lu2VaQhDVuYWuRuu2OxMGbpIp9qQFg5tn66_AB/s1600/tag+icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?max-results=8"' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>|</b:if>
</b:loop>
</b:if></font>
<span class='post-comment-link' style='Float:right;'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhmjQt4cKjOpg_FGMI01ZH-yhE3z2K9grfgLh9Zw6XY2gE8e60GRBoVs8rWn1S6yR9_ffyRZTh-M64k59sX9RVgkwlVZEoyej2Ved_EgnF_JiQKlUVmk5WbGZvnlZ9_3ftjkVjz6cyxhT1/s1600/comment-icon.png) no-repeat;Padding-left:20px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
</b:if>
</b:if>
</span>
Details that can be customized:
Replace the code in:
Red (Author)
Green (Date)
Blue (Labels)
Violet (Comment bubble)
... with the URL address of your image.
Step 5. Save template... and you're done!
0 comments:
Post a Comment