Add Author's Profile Motion-Picture Present Together With Advert Inward Multi Writer Blog

In this tutorial, nosotros volition encounter how to add together the author's profile painting exhibit as well as advert on a Blogger spider web log only below the postal service title. Not solely that this tin plow over your spider web log that personal deportment upon but attaching an epitome to your spider web log posts inwards Blogger tin deal visitors identify, as well as possibly accept a degree of trust alongside you. Also, this could last a corking add-on to blogs alongside multiple authors, since the information for each publisher volition last shown below the titles of their respective posts as well as this way, they volition teach the proper credit for their work.

Adding the Author's Profile Picture / Avatar as well as Name inwards Blogger

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

Step 2. Click anywhere within the code expanse as well as press the CTRL + F keys to opened upward the search box. Paste the next code within the search box, thus hitting Enter to notice it:

Just below this work is the residue of code, which should await something similar this:

<b:if cond='data:top.showAuthor'>
 <b:if cond='data:post.authorProfileUrl'>
 
 <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
 <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
 <data:post.author/>
 </a>
 
 <b:else/>
 
 <data:post.author/>
 
 </b:if>
 </b:if>

Note: If y'all are using a custom template, it could await something similar this:

<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<data:post.author/>

</b:if>

Step 3. Now that y'all works life the code, delete it. Please authorities notation that it should outset as well as halt alongside the tags marked inwards yellow. This code is repeated 2 times inwards the template's code as well as y'all volition ask to take both occurrences.

Step 4. Next, search for this work (you'll notice it twice but halt on the minute one):

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

Step 5. Just below the line, glue the next code:

<b:if cond='data:post.author == "AuthorName"'>
<a href='Author-Profile-URL'><img src='Author-Image-URL'/></a>
</b:if>
 <b:if cond='data:top.showAuthor'>
 <data:top.authorLabel/>
 <b:if cond='data:post.authorProfileUrl'>
 
 <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
 <data:post.author/>
 </a>
 
 <b:else/>
 <data:post.author/>
 </b:if>
 </b:if>

Replace the AuthorName text alongside the EXACT advert that appears on the Blogger profile, i.e. the ane that appears inwards the posts or comments. If it is added inwards a dissimilar way, Blogger volition non recognize the username, nor the epitome as well as the code volition non work.

To display the author's pic, add together the URL of the author's Blogger profile as well as the epitome URL past times replacing the text inwards blue. It is recommended to role an epitome alongside a maximum elevation of 40px as well as 40px wide. Once done, the photograph of the writer volition look adjacent to the "posted by" text only below the postal service title.

Now for those who hold a spider web log alongside to a greater extent than than ane author, y'all volition ask to add together the next code only higher upward <b:if cond='data:top.showAuthor'>

<b:if cond='data:post.author == "AuthorName2"'>
<a href='Author2-Profile-URL'><img src='Author2-Image-URL'/></a>
</b:if>

If y'all accept to a greater extent than than 2 authors, repeat this block of code for each writer that y'all desire to add.

Now, let's teach ane pace farther as well as 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 as well as that's it. You should encounter forthwith the profile painting exhibit as well as advert of the Blogger writer below the championship of each post.