How To Add Professional Author Box In Blogger Below Every post

 

In the following tutorial you are going to learn exactly how to add professional author box below every blog post in blogger. You can add an author box to the post footer in your Blogger blog by adding CSS + HTML code in your blogger template.
Everyone wants to make his Blog or Website more attractive and professional. Therefore, I thought to share professional author box for blogger platform users who want to change the look of his blog.
  

Professional Author Box Features :

 

• Professional look
• Fully responsive design 
• Simple CSS Design
• Very easy to use and customizable
• Short code (doesn't affect on your blog loading speed)
• Suits to your template

Adding Professional Author Box In Blogger 

Step 1

Go to your blogger dashboard >> Template >> Edit HTML:

Step 2

Search for the following code by pressing Ctrl+F.

]]></b:skin>  

  
Step 3

Now just before/above this code add the following piece of CSS code.

 /*Professional Author Box CSS Code*/
 .about-author {
    width : 750px;
    overflow : hidden;
    margin:10px 0px;
    border:0px;
        background: #f2f2ef;
        margin: 0 0 30px 0;
        padding: 10px;
        border: 1px solid #EAEDEF;
        overflow: hidden;
        color: #333333;
        font-size: 14px;
        font-family: Georgia, Tahoma, Verdana;
        line-height: 24px;
    }
    .about-author img {
    display: block;
    width: 90px;
    height: 90px;
    margin: 0 1.2em 0 0;
    float: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-border-radius: 999em;
    -moz-border-radius: 999em;
    border-radius: 999em;
    border: 2px solid #ddd;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    }
    .about-author h3{
    font-family:georgia !important;
    font-size:18px !important;
    margin:9px 0px !important;
    color:#666 !important;
    border-bottom:2px solid #666 !important;
    border-top:0px !important;
    }
    .about-author p {
    margin:0px;
    text-align:justify;
    color:#666;
    }
    /*Professional Author Box CSS Code*/

Step 4

Next search for 

<data:post.body/>

Step 5

Now just after/below this code add the following piece of HTML code.

 /*Professional Author Box HTML Code*/
<div class="about-author">
<h3>About Author:</h3>
<img align="left" src="Paste Your Image URL Here"><p>Write Something About Yourself</p><br/>
<p>Let's Get Connected: <a href="http://twitter.com/khatriscreation" rel="nofollow" target="_blank"><font color="#00aced">Twitter</font></a> | <a href="http://www.facebook.com/khatriscreation" rel="nofollow" target="_blank"><font color="#3b5998">Facebook</font></a> | <a href="http://plus.google.com/103411954659172316653" rel="nofollow"><font color="#dd4b39">Google Plus</font>
</a></p>
</div>
/*Professional Author Box HTML Code*/ 

 customization.

Paste Your Image URL Here : Add Your Profile Picture

Write Something About Yourself 

http://twitter.com/khatriscreation : Replace with your Twitter page URL http://www.facebook.com/khatriscreation : 
Replace with your Facebook page URL. http://plus.google.com/103411954659172316653  : Replace with your Google Plus page URL>        

now save it 

hope you like it.

regards,
sudarshan khatri
 

• Tweet
• Share
• Share
• Share
• Share

About sudarshan khatri

Welcome To khatriscreation And Let Me First Introduce Myself. I’m Sudarshan khatri From Nepal And I Manage khatriscreation. I’m Not A Professional Blogger By Education I’m Self Trained Guy And I Am 13 Years Old. Well Talking About Me I’m A Normal Guy Who Lives The Life Fullest, Loves Searching New Things On Internet.I love to share my expenience and education to the peoples so i have managed this blog .khatriscreation is totally about blogging,seo,widgets and blogging tips.

Related Post