14

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

Post a Comment Blogger Disqus

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

    ReplyDelete
  2. http://theprofessionalgeek.blogspot.com/

    ReplyDelete
  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

    ReplyDelete
  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?

    ReplyDelete
    Replies
    1. 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

      Delete
  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 ?

    ReplyDelete
    Replies
    1. 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

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

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

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

      Delete
  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

    ReplyDelete
    Replies
    1. 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

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

    ReplyDelete

 
Top