Add Image Next to posted by and Counter Comments for Blogger


Posted by: Unknown on Sunday, October 6, 2013













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 != &quot;item&quot;'>
            <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