Display Author Profile Below Every Post in Blogger

If your are writing articles on various 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 author profile below every post give 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 http://web4services.blogspot.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://web4services.blogspot.com/ */}

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

here

here

here

here

                  Now search following code in your blogger template:

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

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

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

<b:if cond='data:blog.pageType == "item"'>
&lt;!—Custom Author Profile by http://web4services.blogspot.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 "About Author" word with your own.
2. Replace Url with your avatar Url in yellow olor.
3. Replace "#" with the link of about you page or blogger profile link.
4. Respectively "replace it" with your Google+, Facebook and Twitter accounts Url's.

Save your template and check your additions and enjoye.