How to Show beautiful custom author profile in blogger

Custom Author profile in Blogger
Showing attractive, professional and custom author profile after each blogger posts is very important to SEO (Search Engine Optimization) point of view. Google facilitates to show Google Plus profile, you just need to enable it in post body setting of layout in blogger new interface. But what if you want to show custom author profile? Stay with us to know how to do the same! You just have to add a extra HTML/CSS (Cascading Style Sheet) code in your blogger template. For this, I’ll guide you step by step.

1. Show Google Plus Author profile

Before we discuss custom author profile in blogger blog, we have to enable to show Google Plus author blogger.
Steps to follow:

  1. First of all, go to and sign-in.
  2. Open the blogger blog on which you want to show custom author profile
  3. Open the “Layout” in blogger setting.
  4. Open “Post body” section in blogger layout setting
  5. As show in picture below, click “Show Author Profile Below Post”
  6. And save it.

For Custom Author Profile kindly read carefully the rest part of the post.

Show Blogger Author Profile
You may also like to read:

Show Custom Author Profile in Blogger

Congratulation, finally you enabled custom Author Profile in blogger layout setting. Be with me and keep following below steps in addition to above mentioned steps.
NOTE: Before editing template in HTML, make sure that you have made backup of the template.
Custom author profile in blogger
Demo of Author Profile

Steps to follow to edit HTML/CSS code for author profile.

  1. Go to template setting in your blogger blog
  2. Now click “edit HTML”
  3. Find the following code (Ctrl+F)

<div class=’post-footer-line post-footer-line-1’/>

     4. After that code, paste the following code.

height: 90px;
border:1px solid #ccc;
-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
.aboutauthor h2
{color:#b6e026;font-family:Helvetica,Arial;font-weight:bold;text-shadow:#64665b 0px 1px 1px;font-size:28px;margin-bottom:5px; margin-top: -6px; }
.aboutauthor h2:hover
{color:#b6e026;font-family:Helvetica,Arial;font-weight:bold;text-shadow:#ccffff 0px 1px 1px;font-size:28px;margin-bottom:5px; margin-top:-6px;}
.aboutauthor p
{margin-bottom:5px; margin-top: -6px;}
.aboutpic img{
border:1px solid #999999;
-webkit-transition:-webkit-transform .15s linear;
-moz-transition:-moz-transform .15s linear;
-o-transition:-o-transform .15s linear;transition:transform .15s linear;
-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);
box-shadow:0 3px 6px rgba(0,0,0,.25);
padding:5px 5px 5px 5px;-webkit-transform:rotate(+5deg);
.aboutpic img:hover{
-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
.aboutsoc img
margin-bottom: -7px;
.aboutsoc  p
font:16px georgia;
font-weight: bold;
.aboutsoc  a
.aboutsoc  a:hover
{color:orange; font-size:20px; font-weight:bold;}
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div class=’aboutauthor’>
<div class=’aboutpic’>
<img alt=’Zohaib Jahan Blog’ height=’74’ src=’’ title=’Zohaib Jahan’ width=’70’/>
<h2>About Zohaib Jahan:</h2>
<p><font color=’white’>He is a passionate blogger; providing SEO, Blogging, PDF stuff. As well as He Graduated in </font><font color=’#33ffff’><b>BSc in Electronics Engineering </b></font><font color=’white’>from</font><font color=’#33ffff’><b> UET Taxila, Pakistan.</b></font><font color=’white’> You can contact me via Email.</font></p>
<div class=’aboutsoc’>
<p><font color=’gray’>Catch me on Social Media:</font></p><a href=’‘>Facebook</a> | <a href=’‘>Twitter</a> | <a href=’’>+Google</a> | <a href=’‘>Pinterest</a></div>

5. Save the template, and you did it finally.
6. Change Bold text in above code according your requirements.

Alternate if you don’t find the HTML/CSS code for Author profile

If you cannot find <div class=’post-footer-line post-footer-line-1’/> in blogger HTML setting, then please find following similar codes.
<div class=’post-footer-line post-footer-line-2’/>
<div class=’post-footer-line post-footer-line-3’/>
and paste code below any of the above line.

Final thoughts about Custom Author profile in Blogger

I hope that you followed my instructions and now you are enjoying the custom author profile below blogger posts. You can change the code if you know just ABC of HTML/CSS (Cascading Style Sheet). Anyhow, let me know if you have any question regarding showing custom author profile in blogger. It’ll be an honor to answer your questions. Keep visiting our blog for more blogging and SEO tips and tricks.
Powerful SEO Techniques - Boost Traffic, Rank Blog
8 Powerful SEO Techniques You Need To Know (Boost Traffic)
Premium Tech Shadow Blogger Template
Tech Shadow Premium blogger template free download
How to Show beautiful custom author profile in blogger
Premium Tech Shadow Blogger Template
Tech Shadow Premium blogger template free download
How to Show beautiful custom author profile in blogger
How to add customize blogger blockquote
Apply for Nigerian Visa in Pakistan
How to get and apply for Nigerian Visa (Complete Guide)
Yellow Fever Vaccination in Pakistan
Get Yellow Fever and Polio Vaccination in Pakistan
MultCloud the best Multiple Cloud Storage Manager
MultCloud: The Best Multiple Cloud Storage Manager
How to Increase Motivation and Productivity
How to increase Motivation and Productivity

Do you want to be Pro Blogger?
The Best Findings Learn to Lead!

So do not forget to subscribe to our mailing list and get Pro Blogging and SEO tips to your email inbox to get higher Search Engine Ranking.