Search Blog








Add Round Author Avatar Before Post Title In Blogger

Today topic about blog designing and we will learn how you can add author avatar image beside the title of every post in blogger blog.It can make your blog more attractive and professional.It show author avatar along post title but make sure you have added admin image,If you have not added go to google plus and add your image.This image is also used as blogger author.I made this hack for passionate bloggers.

how to add author image in post


Few things to know

In above image you can see sample of author avatar before post title.This trick show author image on all post even when you visit home page, it show avatar besides post title.To change the avatar you to have to change the profile image in google plus.After making changes, your blog start showing new updated image in all post of your blog.It do not matters if post title is long or short because it show avatar before post title

How to add admin image besides every post title


1 Login to blogger account

2 Go to template edit HTML press Ctrl + F and search below code
]]></b:skin>

3 Add the below  code just above ]]></b:skin>

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

4 Find this code 
</head>

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

6 search 

<b:if cond='data:post.title'>

Note:You may found  two <b:if cond='data:post.title'>

7 Add the below code above second <b:if cond='data:post.title'>

After saving template visit your blog if it not work put below code above first <b:if cond='data:post.title'>


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

your process finish.visit your blog and enjoy author image before post title.

Customization to increase size of avatar


If you want to change size of avatar then look at step 3 you can see 30px this for widget of image 30px for height., increase it according to your requirement.

save the template.If you face problem you can ask me.


1 comment:

  1. Are you looking for free Facebook Followers & Likes?
    Did you know that you can get them AUTOMATICALLY AND TOTALLY FOR FREE by getting an account on Add Me Fast?

    ReplyDelete

IconIconIconFollow Me on Pinterest
Blog Widget by LinkWithin