18
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 (Windows) or CMD+F (Mac)

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 find <data:post.body/> by pressing Ctrl+F (Windows) or CMD+F (Mac) 


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

Step 3 Now Copy the below code and Paste it Below/after 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 4  Now Click on Save template button.


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

Subscribe articles via email

Post a Comment

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

http://theprofessionalgeek.blogspot.com/

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

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

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

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

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.

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

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

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.

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.

Out Of Topic Show Conversion CodeHide Conversion Code Show EmoticonHide Emoticon

Dear readers, after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me. Thank you. আপনার একটি মন্তব্য একজন লেখক কে ভালো কিছু লিখার অনুপেরনা যোগায় তাই প্রতিটি পোস্ট পড়ার পর নিজের মতামত জানাতে ভুলবেন না । তবে এমন কোন মন্তব্য করবেন না যাতে লেখকের মনে আঘাত করে !!!!

Thank you for commenting