Add Author Info Box at the bottom of every Blog Post

Add Author Info Box at the bottom of every Blog Post

18
data:blog.title
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
Add Author Info Box at the bottom of every Blog Post
4 Stars stars - "Add Author Info Box at the bottom of every Blog Post " Today I will share with you 3 beautiful Author box widget below every blogger posts. We know t...

Recommended Hosting

★★★★
Support
★★★★★
Features
★★★★
Uptime
★★★★★
Value
★★★★★

Pros: Free Domain , Unlimited Bandwidth

Cons:

Bluehost provides customers with low-cost shared hosting, as Read Review

Try Host
★★★★
Support
★★★★
Features
★★★★
Uptime
★★★★
Value
★★★★

Pros: Free domain name , Unlimited traffic, emails, DBs

Cons:

SiteGround is an established host managing well over Read Review

Try Host
★★★★
Support
★★★★
Features
★★★★
Uptime
★★★★
Value
★★★★

Pros: Free SSDs , 90 Day Money Back Guarantee

Cons:

InMotion Hosting has been providing web hosting services since 2001.Read Review

Try Host

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

what error have u got?

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.

Facebook Group Google+ Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *