Add Author Avatar Beside Post Title in Blogger

Posted On // 11 comments
-->

Today I will show you how you can add author image beside the title of every post of your blogger blog. This design hack looks really cool when there are more than one author in a blog. It helps you to distinguish between the authors of the post.

The widget is fully automated so if you change your profile pic then the changes you want will take place. A demo of this plugin can be seen by clicking on the below button.



To add this plugin to your blogger blog. Follow the below steps -

Step 1 : Adding CSS


First go to Blog Title → Template → Edit HTML. Press Ctrl + F. Expand <b:skin>...</b:skin> if it is not expanded. Type ]]></b:skin> in search box and press enter key. [As per the new HTML editor]
Add the below given code just above ]]></b:skin>

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

Step 2 : Adding Script


Find </head> and add the below code just above </head>

<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>


Step 3 : Final Configuration


Finally search for <b:if cond='data:post.title'> and add the below code just above it.
Note : There may be more than 1 <b:if cond='data:post.title'> data card so be sure to add the below code above the correct data card.

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


After adding this code save the template. You are done now. Now you can see rounded author avatar beside every post title in your Blogger blog.

[via]

11 comments

Parallel Blog Author
26 April 2013 at 23:09

Nice

Reply
Mark Lin Author
29 April 2013 at 03:41

You copied this code from my blog please give the credits or will report to dmca.

Regards

Mark Lin

Reply
29 April 2013 at 09:35

@Mark Lin Can you please see the date on which I posted this post and the date you posted :/

Reply
Mark Lin Author
30 April 2013 at 03:54

Everyone knows how to change the date of blogger posts Dhiraj Barnawal.

Reply
30 April 2013 at 05:51

Well I have no time for arguing. This post was posted long before you have posted in your blog so you should be liable to remove it. You should be thankful to me that I am not filing DMCA Complain. Nothing more to say don't expect any more reply from me.
Keep Blogging :D

Reply
DD Author
13 September 2013 at 16:03

Hi, I cant seem to get this to work. What am I potentially missing here?

Reply
Anonymous Author
28 October 2013 at 03:25

This works good ,but i like to have the author name on mouse hover on that image like in your demo blog .
like this : https://www.dropbox.com/s/jkjvmx6zjms2pr5/Untitled.png

Reply
Sourav Sudhi Author
28 February 2014 at 03:38
This comment has been removed by the author.
4 May 2014 at 07:48

nice tweak bro!

Regards

Bloggingtipsandtrix.blogspot.com

Reply
niko Author
25 May 2014 at 18:28

awesome thx

Reply
Anonymous Author
8 June 2016 at 12:03

Thanks, it works well!

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Add Author Avatar Beside Post Title in Blogger |