HOW TO DISPLAY AUTHOR IMAGE TO THE TOP OF EACH BLOGGER POSTS AUTOMATICALLY?

This works for newest blogger templates such as: Contempo, Soho, and Emporio. The profile image will automatically be displayed under the blog post title. No matter wheather the blog has multiple constributors, it will displayed. When a contributor join your blog and he has picture on his blogger account, his picture will be displayed on his content or his posting on your blog, top the posting, below the post title.

Among the 4 newest blogger templates, notable has an exception no need apply this tricks into it because it has the feature itself. You just need to change CSS setting to customize the appearance.

Also read:

1. Download emporio redesain
2. Two ways to add cool navbar in Notable
3. Four re-desaigned templates

And how to apply the feature into another three newest templates? Here we go.

1. CSS style:

• Just use newest blogger templates for your expriments (Contempo, Soho, Emporio)
• Go to blogger setting/Dasbor
• Chose Theme
• Choose Edit HTML

Search for enclosure tag: </head> (for help you: push CTRL+F and type </head>into the appear blank on left top HTML editor page) and just put the following CSS code above it:

<style> .post-author-profile-pic{
vertical-align: middle;
width: 35px;
height: 35px;
border-radius: 50%;
}</style>

Save Theme 

2. HTML:

Still in Editor HTML page, just look the code: <data:post.body/> and put the following code on top of it:

<b:if cond='data:view.isSingleItem and data:widgets.Blog.first.allBylineItems.author and data:post.author.authorPhoto.image and data:widget.type != &quot;PopularPosts&quot;'>
<div class='post-author-profile-pic-container'><font color='grey'>By:</font>
<b:include data='{ image: data:post.author.authorPhoto.image, imageRatio: &quot;1:1&quot;, imageSizes: [84, 168], sourceSizes: &quot;84px&quot;, imageClass: &quot;post-author-profile-pic&quot; }' name='responsiveImage'/><span><font color='grey'><data:post.author.name/></font></span>

</div>
</b:if> </div> 
<div class='post-header-container container'>

Save Template 

3. ADDITIONAL SETTINGS

Go to setting/blogger dasbor

Choose layout

Choose Page Body and by clicking on it pencil icon

There will appear the Page Body setting as following:

DEMO

Below the Post Title must be emptied. When you mark the columns 'as check all' then you must drug all into below side columns available. Just make sure all are in below. Or, you may change the rule with 'unchecked a certain columns' example just 'unchecked Anisa Auliasari columns'.

This content is property of editblogtema.com

Follow tricks, tutorial, and others in editblogtema.com