Menu

Lovely Cute
  • More Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Dream Fun Product

    Drop Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Home
  • About
  • Contact
  • Sitemap
  • Others
    • Gambar Lucu
    • Infografis
    • Inspirasi
    • Motivasi
    • Photoshop
    • Teka-teki
    • Tips
    • Ucapan

Quicker BD

  • Menu
  • Home
  • Blogger
    • SEO
      • SEO 1
      • SEO 2
    • CSS
      • CSS 1
      • CSS 2
      • CSS 3
      • CSS 4
      • CSS 5
    • Jquery
      • Jquery 1
      • Jquery 2
  • Music
    • Product 1
      • Sub Item
      • Sub Item
    • Product 2
      • Sub Item
      • Sub Item
  • Flat UI
  • Features
Home » Blogger Tutorial » How-to » How to Add Author's Profile Picture and Name In Multi Author Blog

How to Add Author's Profile Picture and Name In Multi Author Blog

Are you running a multi author blog? If yes, then in this tutorial we have something for you. Today we are going to discuss about adding an author's profile picture and name in multi author blog. Which will be displayed right after the title of the post. it would be a great addition to your multi author blog, as it shows info for each of the publisher and this way, they will get a proper credit for their work.

Adding author's profile picture and name in blogger

Go to blogger dashboard> Template> HTML Editor
Press CTRL+F to enable search box, and then search for the following code:

<span class='post-author vcard'>

Just below it you will see a 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>

OR if you are using a custom template, it could be look 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>

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 and you will need to remove both occurrences.

Next, search for this line (you'll find it twice and you should stop at the second one):

<div class='post-header-line-1'/>

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. I recommend you 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.

Also see: How to Divide/Break Blogger post into different Pages

Now Adding CSS styles...

Search (CTRL + F) this tag:

]]></b:skin>

Just above the ]]></b:skin> tag, paste the following 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, increase/decrease the 45px value.

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.
Add Comment
Blogger Tutorial How-to

Share

Like

G+

Tweet

Tweet
Related Posts

Show Conversion CodesHide Conversion Codes
Show EmoticonHide Emoticon
Newer Older Home
Powered by Blogger.

Weekly Posts

  • How to Add A Transparent Notification Bar To Blogger
    How to Add A Transparent Notification Bar To Blogger
  • Xmas "Flying Santa Claus" Widget for Blogger
    Xmas "Flying Santa Claus" Widget for Blogger
  • Supreme V2 ( Version 2) Responsive Blogger Template Download for free
    Supreme V2 ( Version 2) Responsive Blogger Template Download for free
  • How to Add Animated Flying Android Man Widget to Blogger
    How to Add Animated Flying Android Man Widget to Blogger
  • Create a Free Blog with Blogspot.com
    Create a Free Blog with Blogspot.com
  • How to Embed YouTube Videos In Blogger Posts
    How to Embed YouTube Videos In Blogger Posts
  • Use A Drop Cap Large First Letter In Posts On Blogger
    Use A Drop Cap Large First Letter In Posts On Blogger
  • Download Best and SEO Friendly Blogger Templates for your Blog
    Download Best and SEO Friendly Blogger Templates for your Blog
  • Flash SWF file Embed Code Generator
    Flash SWF file Embed Code Generator
  • Simple Recent Posts Widget for Blogger / Blogspot
    Simple Recent Posts Widget for Blogger / Blogspot

Blog Archive

  • ►  2017 (2)
    • ►  October (1)
    • ►  May (1)
  • ►  2016 (5)
    • ►  October (1)
    • ►  September (1)
    • ►  March (1)
    • ►  February (2)
  • ▼  2015 (28)
    • ►  November (1)
    • ►  September (7)
    • ►  August (2)
    • ►  July (1)
    • ►  June (1)
    • ▼  April (3)
      • How to Create Static Pages In Blogger
      • How to Add Author's Profile Picture and Name In Mu...
      • Responsive Timeline With Pure CSS/CSS3 3D Effect f...
    • ►  March (3)
    • ►  February (5)
    • ►  January (5)
  • ►  2014 (105)
    • ►  December (4)
    • ►  November (6)
    • ►  October (1)
    • ►  September (8)
    • ►  August (12)
    • ►  July (14)
    • ►  June (5)
    • ►  May (11)
    • ►  April (5)
    • ►  March (15)
    • ►  February (24)

Labels

  • Facebook
  • twitter
  • googleplus
  • linkedin
  • youtube
  • flickr
  • vimeo
  • deviantart

Copyright Quicker BD 2018

Published By Gooyaabi Templates