random
1

How To Add Author Avatar Image Beside The Post Title In Blogger Blog

Did you know how you can add author image avatar beside the title of every blogger blog post of your blogger blog.The blogger blog widget is fully automated and whenever you change your profile picture or image then the change should be take place. This blogger blog widget helps you to create difference between the authors of the post.Here is how!

How To Add Author Avatar Image Beside The Post Title In Blogger Blog

  1. First Off, Go To Your Blogger Dashboard.
  2. Select "Template" Tab From Blogger Dashboard.
  3. Now Press "Customize" Button.
    How To Add Author Avatar Image Beside The Post Title In Blogger Blog
    How To Add Author Avatar Image Beside The Post Title In Blogger Blog
  4. Select "Advanced" Tab At The End Of The Menu.
  5. Select "Add CSS".
  6. Now Copy The Below CSS Code And Paste It In To It And Hit The "Apply To Blog" Button.

    .avatar-author{float:left;margin-right:10px;border:0;border-radius:50%;padding:0;width:30px;height:30px}

  7. Now Come Back To Main Blogger Dashboard And Select "Template".
  8. Jump To "Edit HTML".
  9. And Find That Tag In Your Template Coding Area.   <head>  
  10. When You Will Find That Tag, Just Copy The Below Code And Paste It Just Below The  <head>  Tag.

    <script>
    //<![CDATA[
    function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
    //]]>
    </script>

  11. Now Again, Find This Piece Of Code.  <b:if cond='data:post.title'>
  12. When You Will Find That Code, just Copy The Below Code And Paste It Just Above Piece Of Code.

    <script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>

  13. Now Save Your Template.
  14. Go To Your Blogger Blog Live And See The Result.
How To Add Author Avatar Image Beside The Post Title In Blogger Blog Reviewed by Ghulam Haider on 06:07:00 Rating: 5

No comments:

All Rights Reserved by Shouted Blog © 2014 - 2015
Designed by Ghulam Haider

Contact Form

Name

Email *

Message *

Powered by Blogger.