Home
Blogging

Add Author Info Box at the bottom of every Blog Post

Add Author Info Box at the bottom of every Blog Post

Author box
Today I will share with you 3 beautiful Author box widget below every blogger posts. We know that a author box contain small information about the site owner/Author. And it will appearing at the bottom of every  post. Now a day's various author box we introduced by blogger. But I have tried to add some extra spice in my Author Box widget with Twitter, Facebook and Google links on it. Thus a visitor can give you likes from your author box. And this Author box is very simple and fast loading. You can select any author box among 3 style. It will match all types of blog templates.


Live Demo


Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Paste the below code  Before/above ]]></b:skin> and Save the templates.


CSS Part For the Author Info Box

Author Box-1




blogger widget




 



/* Author Box by www.bloggerspice.com */

.admin-bs {display:block; width:auto; background:#EABFFE; border:5px solid #660099; box-shadow:0 1px 3px #000; -moz-box-shadow:0 1px 3px #000; -webkit-box-shadow:0 1px 3px #000; padding:0; margin:30px 0 10px 0; font:normal 12px Arial,Sans-Serif; color:#222}

.admin-bs .kontainer{padding:5px}

.admin-bs h1{background:#D580FE; border:none; border-bottom:1px solid #C0C0C0; color:#fff; text-transform:normal; text-shadow:0 1px 0 rgba(0,0,0,0.4); font:bold 12px Arial,Sans-Serif; padding:5px 10px; margin:0 0 0 0; display:block}

.admin-bs h1 a{color:#FEEA83}

.admin-bs img{width:70px; height:70px; margin:0 10px 0 0; float:left; border:0px solid #E6E6FA; padding:2px; background:#E6E6FAbox-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none}


 


 







Author Box-2


blogger information









/* Author Box by www.bloggerspice.com */

.admin-bs {display:block; width:auto; background:#FED9BF; border:5px solid #B24700; box-shadow:0 1px 3px #000; -moz-box-shadow:0 1px 3px #000; -webkit-box-shadow:0 1px 3px #000; padding:0; margin:30px 0 10px 0; font:normal 12px Arial,Sans-Serif; color:#222}

.admin-bs .kontainer{padding:5px}

.admin-bs h1{background:#00477D; border:none; border-bottom:1px solid #C0C0C0; color:#fff; text-transform:normal; text-shadow:0 1px 0 rgba(0,0,0,0.4); font:bold 12px Arial,Sans-Serif; padding:5px 10px; margin:0 0 0 0; display:block}

.admin-bs h1 a{color:#FEEA83}

.admin-bs img{width:70px; height:70px; margin:0 10px 0 0; float:left; border:0px solid #E6E6FA; padding:2px; background:#E6E6FAbox-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none}


 


 


 







Author Box-3








hacks




 





/* Author Box by www.bloggerspice.com */

.admin-bs{display:block; width:auto; background:#F5F5F5; border:3px solid #C0C0C0; box-shadow:0 1px 3px #000; -moz-box-shadow:0 1px 3px #000; -webkit-box-shadow:0 1px 3px #000; padding:0; margin:30px 0 10px 0; font:normal 12px Arial,Sans-Serif; color:#222}

.admin-bs .kontainer{padding:5px}

.admin-bs h1{background:#C0C0C0; border:none; border-bottom:1px solid #C0C0C0; color:#fff; text-transform:normal; text-shadow:0 1px 0 rgba(0,0,0,0.4); font:bold 12px Arial,Sans-Serif; padding:5px 10px; margin:0 0 0 0; display:block}

.admin-bs h1 a{color:#FEEA83}

.admin-bs img{width:70px; height:70px; margin:0 10px 0 0; float:left; border:0px solid #E6E6FA; padding:2px; background:#E6E6FAbox-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none}


  



HTML Part For the Author Info Box


 


After applying CSS Part now you have to go for HTML coding. Just follow the belowsteps-


 



Step 1 Now Click on Template ->Edit HTML




Step 2 Now click on  Check box to Expand the templates 




Step 3 Now find <data:post.body/> by pressing Ctrl + F 





Note: You will find 3/4 time this code go for second one. 







Step 4 Now Copy the below code and Paste it before /above code.


 


  



<div class="admin-bs">

<h1>Founded by : <a href="https://plus.google.com/u/0/102331886274459115104/posts">Mohammad Fazle Rabbi</a> - Written 50+ Awesome Articles </h1>

<div class="kontainer">

<img src="http://4.bp.blogspot.com/-AUlnsFGtuYA/UMIYuhZF76I/AAAAAAAAAVc/VEbCdsa08ZM/s1600/Rabbi.jpg" width="80" height="85"></img>

I love to blogging and sharing tips and tricks with my readers. I am a Part time blogger. Design Blogger template, Web Developing and Designing. If you think that this article help you little bit then please  do not forget to subscribe by entering your email in column Get Updates Via Email.

  <p><span style='float:left;text-align:left;'>

Join Me On: <a href='http://www.facebook.com/BloggerSpice' rel='nofollow'>Facebook</a> | <a href='http://www.twitter.com/BloggerSpice' rel='nofollow'>Twitter</a> | <a href='https://plus.google.com/102331886274459115104/' rel='nofollow'>Google Plus</a></span>

<span style="float:right;font:italic 10px Arial, Sans-Serif;"><a href="http://bloggerspice.com" target="_blank">:: Thank you for visiting ! ::</a></span></p>

<div style="clear:both;"></div>

</div>

</div>


Step 5  Now Save Your Templates,





Customization: 


    

  • Change this link http://4.bp.blogspot.com/-AUlnsFGtuYA/UMIYuhZF76I/AAAAAAAAAVc/VEbCdsa08ZM/s1600/Rabbi.jpg with your image link. 
    • 

  • Change BloggerSpice with your Twitter and Facebook ID
    • 

  • Change 102331886274459115104 with your Google Plus ID
    • 






















































































18 comments





















    

  1. 

    

    

    
                  
                  
    
                  
    

    



    

    
this is really awesome and unique.I love this site..

    

    

    





    

                                
    
                              
    2. 

  2. 

    

    

    
                  
                  
    
                  
    

    



    

    
http://theprofessionalgeek.blogspot.com/

    

    

    





    

                                
    
                              
    3. 

  3. 

    

    

    
                  
                  
    
                  
    

    



    

    
Nice Post bro i like this post and want to Apply this Box into my blog but bro bad luck for me this is not working on my blog ? can u help to customize this into my blog? 
    Thanks and nice article
    Best of luck
    Regards
    R.S

    

    

    


    


      

    • 

      

      

      
                  
                  
      
                  
      

      



      

      
what error have u got?

      

      

                                              
      
                                            
      • 

    

    

    





    

    

    





    

                                
    
                              
    4. 

  4. 

    

    

    
                  
                  
    
                  
    

    



    

    
Nothing i just paste this code which u mention in your post but when i save my template it doesn't happen no error no author info in below every post?

    

    

    


    


      

    • 

      

      

      
                  
                  
      
                  
      

      



      

      
Hi Rizwan I have checked your template..you can use this widget easily. 

      Find the below code and Please add the HTML part below of any code--

      Google Adsense Ad Code (Below Post Title)

      or 

      post-footer-line post-footer-line-1

      or

      post-footer-line post-footer-line-2

      

      

                                              
      
                                            
      • 

    

    

    





    

    

    





    

                                
    
                              
    5. 

  5. 

    

    

    
                  
                  
    
                  
    

    



    

    
Hello Bro i founded these codes and now my author information shows good but bro there is some problem the author info showing on the top post area where the post start begin now tell me how can i replace this to After post area ?

    

    

    


    


      

    • 

      

      

      
                  
                  
      
                  
      

      



      

      
Add the code below of the given line then it will show end of the post. I have tested on this template 

      Google Adsense Ad Code (Below Post Title)

      or 

      post-footer-line post-footer-line-1

      or

      post-footer-line post-footer-line-2

      

      

                                              
      
                                            
      • 

    

    

    





    

    

    





    

                                
    
                              
    6. 

  6. 

    

    

    
                  
                  
    
                  
    

    



    

    
Dear i place that code in these lines but the same thing comes again they not showing end area?

    

    

    





    

                                
    
                              
    7. 

  7. 

    

    

    
                  
                  
    
                  
    

    



    

    
Ok bro now i have done thanks for Apprised and helping me best of luck bro
    Regards
    R.S

    

    

    


    


      

    • 

      

      

      
                  
                  
      
                  
      

      



      

      
thanks and if you need any further help then leave a comments I will get back to you as soon as possible.

      

      

                                              
      
                                            
      • 

    

    

    





    

    

    





    

                                
    
                              
    8. 

  8. 

    

    

    
                  
                  
    
                  
    

    



    

    
Hello there! This is kind of off topic but I need some 
    guidance from an established blog. Is it hard to set up 
    your own blog? I'm not very technical but I can figure 
    things out pretty quick. I'm thinking about creating my 
    own but I'm not sure where to begin. Do you have any 
    points or suggestions? Many thanks

    

    

    


    


      

    • 

      

      

      
                  
                  
      
                  
      

      



      

      
First chose your niche that what type of blog you want to start..then gather information about the niche and do little research for article writing.. Select appropriate blogger template And you would get proper Google blogging training from my eBook http://www.bloggerspice.com/2013/11/blogger-trainer-digest-free-ebook.html...And if you need any further help then feel free to contact with me. :d

      

      

                                              
      
                                            
      • 

    

    

    





    

    

    





    

                                
    
                              
    9. 

  9. 

    

    

    
                  
                  
    
                  
    

    



    

    
Hi you can check this out another simple author Bio box Link
    Thanks

    

    

    





    

                                
    
                              
    10. 

  10. 

    

    

    
                  
                  
    
                  
    

    



    

    
Thank you so much! I've been trying to add a simple piece of code to my Blogger template. Yours is the only site that told me that data:post.body shows up more than once! Once you put the code after the right repetition of that line, it all works!

    

    

    


    


      

    • 

      

      

      
                  
                  
      
                  
      

      



      

      
Hi John data:post.body code contain 3 times in a template it the template using auto readmore code. In Blogger default template you will find one time only. So if any user add data:post.body 4 times in case of template with auto readmore and in blogger default template if you use 2 times then it will show this message. However in this tutorial I have mentioned to add the code below data:post.body. So there hasn't any chance to show up this kinds of message. Thanks.

      

      

                                              
      
                                            
      • 

    

    

    





    

    

    





    

                                
    
                              
    11. 

  11. 

    

    

    
                  
                  
    
                  
    

    



    

    
any way to put down the author box below of the post?

    i don't like to put it upper.

    if possible pls share the tricks

    thanks

    

    

    


    


      

    • 

      

      

      
                  
                  
      
                  
      

      



      

      
Hi there.. This is very simple.. Just little change in Step 4

      Step 4 Now Copy the below code and Paste it before /above code.

      Instead of before/above code paste the widget code after/below  . that's it.

      

      

                                              
      
                                            
      • 

    

    

    





    

    

    





    

                                
    
                              
    12. 

































































Go Up