Add Author's Profile Picture and Name in Multi Author Blog

In this tutorial, we will see how to add the author's profile picture and name on a Blogger blog just below the post title. Not only tha...

In this tutorial, we will see how to add the author's profile picture and name on a Blogger blog just below the post title. Not only that this can give your blog that personal touch but attaching an image to your blog posts in Blogger can help visitors identify, and perhaps have a level of trust with you. Also, this could be a great addition to blogs with multiple authors, since the info for each publisher will be shown below the titles of their respective posts and this way, they will get the proper credit for their work.
multi-author blog, blogger tricks

Related: How to Add or Invite Multiple Authors in Blogger

Adding the Author's Profile Picture / Avatar and Name in Blogger

Step 1. From the Blogger Dashboard, go to "Template" and click the "Edit HTML" button.


Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Paste the following code inside the search box, then hit Enter to find it:
<span class='post-author vcard'>
Just below this line is the rest of code, which should look something like this:
              <span class='post-author vcard'>
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <span itemprop='name'><data:post.author/></span>
                    </span>
                  </b:if>
                </b:if> 
</span>
Note: If you are using a custom template, it could look something like this:
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/>
</span>
</b:if>
</span>
Step 3. Now that you found the code, delete it. Please note that it should start and end with the tags marked in yellow. This code is repeated two times in the template's code and you will need to remove both occurrences.

Step 4. Next, search for this line (you'll find it twice but stop on the second one):
<div class='post-header-line-1'/>
Step 5. Just below the line, paste the following code:
<span class='post-author vcard'>
<b:if cond='data:post.author == &quot;AuthorName&quot;'>
<span class='author'><a href='Author-Profile-URL'><img src='Author-Image-URL'/></a></span>
</b:if>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span>
Replace the AuthorName text with the EXACT name that appears on the Blogger profile, i.e. the one that appears in the posts or comments. If it is added in a different way, Blogger will not recognize the username, nor the image and the code will not work.

To display the author's pic, add the URL of the author's Blogger profile and the image URL by replacing the text in blue. It is recommended to use an image with a maximum height of 40px and 40px wide. Once done, the photo of the author will appear next to the "posted by" text just below the post title.

Now for those who maintain a blog with more than one author, you will need to add the following code just above <b:if cond='data:top.showAuthor'>
<b:if cond='data:post.author == &quot;AuthorName2&quot;'>
<span class='author'><a href='Author2-Profile-URL'><img src='Author2-Image-URL'/></a></span>
</b:if>
If you have more than two authors, repeat this block of code for each author that you want to add.

Now, let's go one step further and add the CSS styles.

Step 6. Search using CTRL + F for this tag:
]]></b:skin>
Just above the ]]></b:skin> tag, paste the following CSS code:
.post-header {
width: 100%;
padding: 2px 5px;
margin: 5px;
clear: both;
float: left;
}
.author img{
float: left;
margin: 0px 5px 10px 0px;
max-width:100%;
height:45px;
border-radius: 10px;
}
.post-author{
color:#777;
font-size: 13px;
font-style: italic;
}
.post-author a {
color:#777; }
Note: to change the size of avatar, modify the 45px> value.

Step 7. Click on the "Save template" button and that's it. You should see now the profile picture and name of the Blogger author below the title of each post.

COMMENTS

HawkHost Sale 25% Ending Soon

SaibABC's Contact Form:

Name

adsense,10,adsense optimization,4,adsense tips,5,Amp,3,backlinks,2,Beautiful,26,Beautifully,3,Beauty,15,beginner's guide,12,Blog Design,57,Blogger,22,blogger pages,4,blogger posts,11,blogging tips,3,Bolero Hot,13,click bombing,1,Comedies,10,Comedy,8,Comments,9,css,27,Cuisine,32,Cuisines,39,custom domain,2,Dab Neeg,6,DabNeeg,36,Facebook,4,Fashion,27,Fighting,12,firebug,1,font awesome,1,GoodTrick,58,google analytics,1,google plus,4,Grid Style,17,HealthLife,57,Hmong Health,11,Hmong Music,6,homepage,1,how to,54,Hunting,55,Image Effects,13,Information,17,instagram,2,Instrument,5,invalid clicks,1,javascript,10,jQuery,16,KabTxuj,28,Karaoke,19,Karaoke Hit,12,labels,2,Liste Style,6,make money online,8,menus,7,Movie Hot,37,Movies,18,Music Hot,41,Musical,100,Navigation,5,navigation menu,5,Other Clips,6,popular posts,5,posts,11,recent comments,1,recent posts,3,related posts,3,robots,1,Sad Songs,17,SEO,16,sitemap,1,slideshows,3,social media,8,social media plugins,4,statcounter,1,static pages,2,Technology,17,Template,12,Templates,7,threaded comments,3,tools,1,Travels,1,Video Fight,7,Video Hot,22,Video Hunt,30,Widgets,47,Xov Xwm,2,
ltr
item
SaibABC - News, HealthLife, Beauty, Tips: Add Author's Profile Picture and Name in Multi Author Blog
Add Author's Profile Picture and Name in Multi Author Blog
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzyI589gbpyhenBg3PY0epUuNXrWLvqtD6jMyn9Ub_6Aj4tEyKrDCdMb944xrEGPL1nQE2_EXiPf_11hdUkEUf7bPsW0HTXB9Af5gWtycPgooRiaRoCdaZLtXmmcta1bmQC957-9MloQt_/s1600/display-author-profile-picture-and-name-below-blogger-posts.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzyI589gbpyhenBg3PY0epUuNXrWLvqtD6jMyn9Ub_6Aj4tEyKrDCdMb944xrEGPL1nQE2_EXiPf_11hdUkEUf7bPsW0HTXB9Af5gWtycPgooRiaRoCdaZLtXmmcta1bmQC957-9MloQt_/s72-c/display-author-profile-picture-and-name-below-blogger-posts.png
SaibABC - News, HealthLife, Beauty, Tips
https://saibabc.blogspot.com/2021/02/add-author-profile-picture-and-name-in.html
https://saibabc.blogspot.com/
https://saibabc.blogspot.com/
https://saibabc.blogspot.com/2021/02/add-author-profile-picture-and-name-in.html
true
7959548849429202663
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy