How to show Author Profile Name on the top in each blog post

If you are an author of any blogger blog and write articles on various topics, you may would like to show your name and profile photo with some introduction in each blog post.

By default Blogger BlogSpot Blog displays the only name of post author with link to the blogger blog author profile (if not linked to Google+) at the end of each blog posts. But, many bloggers want to display their name at the top of every article and a short author bio with image and name below each blog post.

However, if you have customised your blogger template or using third party downloaded free blogger templates then it may be possible that the author profile is not working for your blog. So, please read this article very carefully and enjoy the right to show your name with intro in each article/posts.

How to show Author Profile Name on the top in each blog post

Step-1:

Sign-in to your blogger account and click on your blog name or go to the dashboard.

Step-2:

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:125px;
border: 2px solid #666;
border-radius:25px;
opacity:0.4;
filter:alpha(opacity=40);
transition:width 1s, height 1s, transform 1s;
-webkit-transition:width 1s, height 1s, -webkit-transform 1s;
}
.swt-author profile img:hover {
border-radius:5px;
opacity:1.0;
filter:alpha(opacity=100);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
/* Tutorial at: http://www.superwebtricks.com/?p=321 */}

Style-2:

/* Custom Author Profile by www.superwebtricks.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 {
color:#ffffff;background-color: #192a3e;
border: 5px solid #1ABC9C;
border-style: outset;
-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.superwebtricks.com/?p=321 */}

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

Now, search for

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

And just after/ below it paste the following HTML codes.

You will get same line in two places in the blogger template. The first one is for mobile template and second or last one is for desktop templates. Thus, if you want to show the author profile only for desktop visitors then paste the codes after the second one.

<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 with Google Plus profile url'>Google+</a> |
<a href=' replace it with Facebook profile url'>Facebook</a> |
<a href=' replace it with Twitter profile url'>Twitter</a>
</profile></div>
</b:if>

Now, replace the image url in 6th line with your own image. Replace the # in 7th line with your about page link (if created or other profile link as you wish) and replace the respective Google Plus, Facebook and Twitter profile urls in 10-12 lines.

Save your template and enjoy!