Add Image Next to posted by and Counter Comments for Blogger
How to add:
1. First of all go to blogger and login your account
2. Now go to template section and backup your template
3. Now click on Edit HTML and search for <div class='post-header-line-1'/>
4. Paste below code under/after: <div class='post-header-line-1'/>
--------------------------------------------------------------------------
<div class='MBT-CSS3'>
<br><img align='absbottom' border='0' height='20' src='http://4.bp.blogspot.com/-HKZJEparc2g/Uk2L9hz_TdI/AAAAAAAAAvo/LGXne_5zbtk/s1600/dark-evil-.JPG' width='20'/><font style='font-size:12px; font-family:Arial; word-spacing:1px; color:#555555;'><b> Posted by: <a href='https://plus.google.com/101144324548653235589/posts' rel='nofollow'><data:post.author/> </a> on <data:post.date/></b></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(http://4.bp.blogspot.com/-_m8R-FWYpwo/Uj0GQ25kqDI/AAAAAAAAAhE/RT7r5xsFLOA/s15/comment_bubble.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></br>
</div>
--------------------------------------------------------------------------
Note: Replace blue texts with your URL image.
5. Search for ]]></b:skin> and paste code below before ]]></b:skin>
--------------------------------------------------------------------------
.MBT-CSS3 img{
padding:2px;
border: 1px solid #ddd;
-moz-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
border-radius: 2px; 2px; 1px; 1px;
}
.MBT-CSS3 img:hover{
opacity: 0.5;
-moz-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
}
--------------------------------------------------------------------------
6. Click on Save Template.
No comments:
Post a Comment