Add Multi Author Profile in Blogger below each Post

Share:
Add Multi Author Profile in Blogger below each Post
In this post techmix.in is going to discuss how to add author profile below each post. This post is helpful to those blogs or websites which are using multi authors to share their contents. With the help of this post  you can add your profile with manual profile picture and about yourself below the post.

Procedure:

1. In Blogger Dashboard, Open Edit HTML option under Template tab.
2. Now Click inside the code and press CTRL+F and search for following code given below
<span class='post-author vcard'>
3. Copy all the content inside </span> on notepad.
4. Now replace copied code with the code given below
 <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>

5. Now search for <div class='post-header-line-1'/>
6. Now paste the code you edited in step 4 below this line.
7. Now is you are using multi author blog then add the following code just before this line (<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>
8. Now your code will look like as :
 <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:post.author == &quot;AuthorName2&quot;'>
<span class='author'><a href='Author2-Profile-URL'><img src='Author2-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>

9. Now replace all in red color with
AuthorName - Profile name 1
Author-Profile-URL- Your profile address
Author-Image-URL- Profile pic Address

10. Now search for ]]></b:skin>
11. Now add the following code above it for CSS Styling and save the template.
 .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; }
DMCA.com Protection Status

No comments

We Hate Spam !