Wordpress Fancier Author Box Below Every Post For Blogger (Blogspot) Blog

Wordpress is the most popular blogging platform used by many professional bloggers because it has many features which are not available in others. Self hosted Wordpress provides us with a wide variety of plug-ins. One of the most famous of them is Fancier Author Box by ThematoSoup. You will find this awesome plug-in in most of the Wordpress blogs below every post. It looks very professional as compared to the older ‘Posted by’ link in Blogger. Even I also use this Author box below my posts. Not only that, it also has facebook and twitter follow buttons. So let’s see how to add it.

Adding Wordpress Fancier Author Box Below Every Post For Blogger

  
    (1)   Go to your blog’s dashboard.

          (2)   Click on ‘Template’.

          (3)   Firstly backup your template and proceed to ‘Edit HTML’.

          (4)   Now press ctrl+f inside the code for search box.

          (5)   Now search the below code.

]]></b:skin>

         
          (6)   Now paste the below code above ]]></b:skin>.

.author_info {

        float: center;

        width: 675px;

        padding: 10px;

        border: 1px solid #b2bbff;

        margin-bottom: 15px;

        margin-top: 15px;

        background: #e7ebff;

}

.author_info h4 {

font-family: Georgia;

font-size:20px;

clear:none;

margin:0;

padding:10px 10px 5px;

}

.author_info p {

font-family: Georgia;

margin:0;

padding:0 10px 10px;

}

.author_photo img {

box-shadow: 5px !important;

padding: 5px !important;

border: 5px !important;

}

.author_photo {     

float:left;

shadow:none;

margin:10px;

padding:0;

}

    (7)   If you have difficulty in finding ]]></b:skin>, just go to ‘Template’ and choose ‘Customize’.

          (8)   Go to ‘Advanced’ and choose ‘Add CSS’ (last option).

          (9)   Add the above code in the box and click on ‘Apply to Blog’ (top right corner).

         (10)    Now again go back to ‘Edit HTML’ under ‘Template’

         (11)   Find the below code.

<data:post.body/>

          
   (12)  You will find this code three times, paste the below code just after the 2nd <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='author_info'>

<div class='author_photo'>

<img alt='author' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir14OcWADDjn5IrP-vguTqUGBb8br7ijlgnkchbKzFz9QWoS96uuNjeRWmuQFW_6uy4EogkfP5b46O4gmRxY5GON11OSMq-6_F7-2kbUKBLbOY4d3eN4ulLnF5_D3jgfZpI97cw67yVgA/s80-no/pic.jpg'/></div>

  <h4><strong>Article by <a href='http://www.bloglution.com/author/admin' rel='author'>Sandeep Gupta</a></strong></h4>

  <p><strong>Sandeep has written 40+ articles.</strong>              

  If you like this post, you can follow Bloglution on <strong><a href='http://twitter.com/Bloglution' rel='nofollow'>Twitter</a></strong>. Subscribe to <strong> Bloglution feed via <a href='http://feeds.feedburner.com/Bloglution' rel='nofollow'>RSS</a> or <a href='http://feedburner.google.com/fb/a/mailverify?uri=Bloglution&amp;loc=en_US' rel='nofollow'>EMAIL</a> </strong>to receive instant updates.</p>

                   

  <p><a class='twitter-follow-button' data-show-count='false' href='https://twitter.com/bloglution'>Follow @Bloglution</a>

  <script src='//platform.twitter.com/widgets.js?4a2793' type='text/javascript'/>

    <a class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='85' href='http://www.facebook.com/bloglution'/></p>

            <!--<a href="https://plus.google.com/https://plus.google.com/105760284818598443849" target="_blank" rel="nofollow" class="gplus-s">Google</a>-->

      </div>

  <div style='clear:both;'/> </b:if>

      
    (13)    Replace the above highlighted codes with your details as applicable.

•        First red link with your image URL and others as applicable.
•        Your image should be of 100*100 pixels.

           (14)   Now click on ‘Save template’ and it’s done.

Check it by opening any of your posts, you will find this widget below all your posts.

Kindly comment, if you liked this widget.

Subscribe Updates, Its FREE!

Article by Sandeep Gupta

Sandeep has written 55+ articles. If you like this post, you can follow Bloglution on Twitter. Subscribe to Bloglution feed via RSS or EMAIL to receive instant updates.

Follow @Bloglution