Display Author Profile Below Every Post in Blogger

If your are writing articles on diferrent topics and publish them on your blog then you may be like to display author profile below every post in blogger. By default blogger display the author name with link to blogger profile if Google Plus not linked at the end of each post. Displaying the author profile below every post gives the chance to visitors so they understand you.

But many blogger's wants to display their short introduction with avatar and social connections at below of every post. This method is very easy so lets start it.

• Go to Blogger Dashboard, Layout, and go into blog posts section.
• Now check/select the "how Author Profile below post" option and save.
• Now go to Template, Edit Html section and search "]]></b:skin>" tag. 
• Before/above skin tag paste the following code.

/* Custom Author Profile by www.itsatblogger.com
----------------------------------------------- */
.swt-author {
margin: 1em 0;padding: .5em .25em;
background-color: #f1f4f8;
border: 5px solid #192a3e;
border-style: groove;
overflow: auto;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
}

.swt-author:hover img {
border: 2px solid #1ABC9C;
border-radius:100px;
opacity:0.8;
filter:alpha(opacity=80);
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
}
.swt-author profile {
font-family:"Times New Roman", Times, serif;
font-weight: normal;
padding:5px 0;
margin:0;
text-transform:auto;
line-height:24px;
word-wrap:break-word;
}
.swt-author profile info {
font-size: 12px;
text-align: justify;
font-family: 'Droid Serif', serif;
}
.swt-author profile img {
float: left;
margin: 5px;
width:100px;
border: 2px solid #192a3e;
border-radius:50px 0;
opacity:1.0;
filter:alpha(opacity=100);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
/* Tutorial at: http://www.itsatblogger.com/ */}

NOTE: Delete lines 3-11 if you have already added it while adding the customized author name.

• Now search the following code in your blogger template:

<div class='post-footer-line post-footer-line-1'>

 

NOTE: You may be found this code 2 times in your blogger template 1st for the mobile template and 2nd for the desktop template, Thus it depends upon you where you want to display it only for mobile users, desktop users, or for both.

• Now paste the following code below/after the searched tag.

<b:if cond='data:blog.pageType == "item"'>
&lt;!—Custom Author Profile by www.superwebtricks.com --&gt;
<div class='swt-author'>
<b><u>About Author:</u></b>
<profile>
<img alt='author' src='https://lh6.googleusercontent.com/-LofL3EnbELo/AAAAAAAAAAI/AAAAAAAADvU/ED8fSbGJZT4/s120-c/photo.jpg'/>
<info> Write here the author short Bio or introduction. The author profile may be maximum 250-300 characters with spaces or 40-55 words long. <i><a href='#'>Read More</a></i>...</info>
&lt;/br&gt;&lt;hr&gt;
Join him on
<a href='replace it'>Google+</a> |
<a href='replace it'>Facebook</a> |
<a href='replace it'>Twitter</a>
</profile></div>
</b:if>

customization

1. Change the "About Author" word with your own.
2. Replace Url with your avatar Url in yellow color.
3. Replace "#" with the link of the about you page or blogger profile link.
4. Respectively "replace it" with your Google+, Facebook, and Twitter account URLs.

Save your template and check your additions and enjoy.