Add Author's Profile Moving Painting Together With Advert Inward Multi Writer Blog

In this tutorial, nosotros volition run across how to add together the author's profile movie in addition to advert on a Blogger weblog only below the postal service title. Not solely that this tin laissez passer on your weblog that personal acquit upon but attaching an prototype to your weblog posts inwards Blogger tin assistance visitors identify, in addition to perchance accept a grade of trust alongside you. Also, this could travel a neat improver to blogs alongside multiple authors, since the information for each publisher volition travel shown below the titles of their respective posts in addition to this way, they volition teach the proper credit for their work.

Related: How to Add or Invite Multiple Authors inwards Blogger

Adding the Author's Profile Picture / Avatar in addition to Name inwards Blogger

Step 1. From the Blogger Dashboard, teach to "Template" in addition to click the "Edit HTML" button.

Step 2. Click anywhere within the code expanse in addition to press the CTRL + F keys to opened upward the search box. Paste the next code within the search box, therefore hitting Enter to observe it:

<span class='post-author vcard'>

Just below this business is the remainder of code, which should await something similar 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 yous are using a custom template, it could await something similar 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 yous flora the code, delete it. Please depository fiscal establishment notation that it should commencement in addition to halt alongside the tags marked inwards yellow. This code is repeated 2 times inwards the template's code in addition to yous volition require to take both occurrences.

Step 4. Next, search for this business (you'll observe it twice but halt on the 2d one):

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

Step 5. Just below the line, glue the next 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 alongside the EXACT advert that appears on the Blogger profile, i.e. the 1 that appears inwards the posts or comments. If it is added inwards a unlike way, Blogger volition non recognize the username, nor the prototype in addition to the code volition non work.

To display the author's pic, add together the URL of the author's Blogger profile in addition to the prototype URL yesteryear replacing the text inwards blue. It is recommended to travel an prototype alongside a maximum travel yesteryear of 40px in addition to 40px wide. Once done, the photograph of the writer volition seem adjacent to the "posted by" text only below the postal service title.

Now for those who hold a weblog alongside to a greater extent than than 1 author, yous volition require to add together the next code only higher upward <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 yous accept to a greater extent than than 2 authors, repeat this block of code for each writer that yous desire to add.

Now, let's teach 1 pace farther in addition to add together the CSS styles.

Step 6. Search using CTRL + F for this tag:

]]></b:skin>

Just higher upward the ]]></b:skin> tag, glue the next 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 alter the size of avatar, modify the 45px> value.

Step 7. Click on the "Save template" push in addition to that's it. You should run across forthwith the profile movie in addition to advert of the Blogger writer below the championship of each post.