Add Elegant Colored Author Box At The Bottom Of Every Blog Posts

Add Elegant Colored Author Box At The Bottom Of Every Blog Posts

15
data:blog.title
Blog Author box

Author box is very important for every blog to certify it as a legit site. Because blog audience always would like to bit interested about Author if they like your blog. Most of the professional blog are using Author box for giving little info about themselves. We can see different Author Box that is improving day by day from traditional to modern appearance. As a result I have already designed some author box to meet the requirement of bloggers as well as improving with more features and designs. Finally I have coded another Elegant Colored Author Box with rotator image effects that is really cools.

The Features of This Author Box are as follows

  •  Rotator Image effects
  • Colored Border
  • Colored Author’s Name
  • Integrated Social Sharing Links (e.g. Facebook, Twitter & Google Plus)
  • Read more links for navigate to About Us page.

Live Demo
You can add this author box in 2 ways. I ma explaining one by one.

Method 1

CSS PART FOR THE ELEGANT COLORED AUTHOR BOX


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

Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  

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. 


/**Elegant Colored Author Box by www.bloggerspice.com**/
<style>
.bloggerspicePA{font-size:12px;width:auto;text-shadow:1px 0 0 #ACACAC;background:#009999;border-radius:5px;border:2px #009999 solid;-moz-box-shadow:0 0 5px #009999;-webkit-box-shadow:0 0 5px #009999;box-shadow:0 0 5px #009999;min-height:140px;margin:0 auto;padding:10px}
.bloggerspice{font-size:12px;float:left;width:110px;text-align:center;margin:0;padding:10px 10px 0 0}
.bloggerspice img{border:2px solid #888;background-color:#009999;opacity:0.5;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .5s ease-out;-moz-transform:rotate(7deg);-o-transform:rotate(7deg);-webkit-transform:rotate(7deg);-ms-transform:rotate(7deg);transform:rotate(7deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455,M12=-0.08715574274765817,M21=0.08715574274765817,M22=0.9961946980917455,sizingMethod='auto expand');zoom:1;margin:0 5px;padding:2px}
.bloggerspice:hover img{border:2px solid #ccc;cursor:pointer;opacity:1;-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0,M22=1,sizingMethod='auto expand');zoom:1;-moz-box-shadow:1px 1px 4px #000;-webkit-box-shadow:1px 1px 4px #000;box-shadow:1px 1px 4px #000}
. bloggerspicetext{float:right;width:75%;font:14px Trebuchet MS,sans-serif;text-align:justify;color:#111;border-left:1px #c4c4c4 solid;margin:0;padding:0 0 0 10px}
. bloggerspicefooter{font:bold 12px Trebuchet MS;padding:10px 0}
.bloggerspicePA{font-size:12px;width:auto;text-shadow:1px 0 0 #F7F7F7;background:#F7F7F7;border-radius:5px;border:1px #009999 solid;-moz-box-shadow:0 0 5px #009999;-webkit-box-shadow:0 0 5px #009999;box-shadow:0 0 5px #009999;min-height:140px;margin:0 auto;padding:10px}
.bloggerspice{font-size:12px;float:left;width:110px;text-align:center;margin:0;padding:10px 10px 0 0}
.bloggerspiceimg{border:2px solid #888;background-color:#FFF;opacity:0.5;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .5s ease-out;-moz-transform:rotate(7deg);-o-transform:rotate(7deg);-webkit-transform:rotate(7deg);-ms-transform:rotate(7deg);transform:rotate(7deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455,M12=-0.08715574274765817,M21=0.08715574274765817,M22=0.9961946980917455,sizingMethod='auto expand');zoom:1;margin:0 5px;padding:2px}
.bloggerspice:hover img{border:2px solid #ccc;cursor:pointer;opacity:1;-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0,M22=1,sizingMethod='auto expand');zoom:1;-moz-box-shadow:1px 1px 4px #000;-webkit-box-shadow:1px 1px 4px #000;box-shadow:1px 1px 4px #000}
.bloggerspicetext{float:right;width:80%;font:14px Trebuchet MS,sans-serif;text-align:justify;color:#111;border-left:1px #c4c4c4 solid;margin:0;padding:0 0 0 10px}
. bloggerspicefooter{font:bold 12px Trebuchet MS;padding:10px 0}
.bloggerspicePA{font-size:12px;width:auto;text-shadow:1px 0 0 #F7F7F7;background:#F7F7F7;border-radius:5px;border:1px #009999 solid;-moz-box-shadow:0 0 5px #009999;-webkit-box-shadow:0 0 5px #009999;box-shadow:0 0 5px #009999;min-height:140px;margin:0 auto;padding:10px}
.bloggerspice{font-size:12px;float:left;width:110px;text-align:center;margin:0;padding:10px 10px 0 0}
.bloggerspiceimg{border:2px solid #888;background-color:#FFF;opacity:0.5;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .5s ease-out;-moz-transform:rotate(7deg);-o-transform:rotate(7deg);-webkit-transform:rotate(7deg);-ms-transform:rotate(7deg);transform:rotate(7deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455,M12=-0.08715574274765817,M21=0.08715574274765817,M22=0.9961946980917455,sizingMethod='auto expand');zoom:1;margin:0 5px;padding:2px}
.bloggerspice:hover img{border:2px solid #ccc;cursor:pointer;opacity:1;-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0,M22=1,sizingMethod='auto expand');zoom:1;-moz-box-shadow:1px 1px 4px #000;-webkit-box-shadow:1px 1px 4px #000;box-shadow:1px 1px 4px #000}
.bloggerspicetext{float:right;width:80%;font:14px Trebuchet MS,sans-serif;text-align:justify;color:#111;border-left:1px #c4c4c4 solid;margin:0;padding:0 0 0 10px}
.bloggerspicefooter{font:bold 12px Trebuchet MS;padding:10px 0}
.bloggerspicePA{font-size:12px;width:auto;text-shadow:1px 0 0 #F7F7F7;background:#F7F7F7;border-radius:5px;border:1px #009999 solid;-moz-box-shadow:0 0 5px #009999;-webkit-box-shadow:0 0 5px #009999;box-shadow:0 0 5px #009999;min-height:140px;margin:0 auto;padding:10px}
.bloggerspice{font-size:12px;float:left;width:110px;text-align:center;margin:0;padding:10px 10px 0 0}
.bloggerspiceimg{border:2px solid #888;background-color:#FFF;opacity:0.5;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .5s ease-out;-moz-transform:rotate(7deg);-o-transform:rotate(7deg);-webkit-transform:rotate(7deg);-ms-transform:rotate(7deg);transform:rotate(7deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455,M12=-0.08715574274765817,M21=0.08715574274765817,M22=0.9961946980917455,sizingMethod='auto expand');zoom:1;margin:0 5px;padding:2px}
.bloggerspice:hover img{border:2px solid #ccc;cursor:pointer;opacity:1;-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0,M22=1,sizingMethod='auto expand');zoom:1;-moz-box-shadow:1px 1px 4px #000;-webkit-box-shadow:1px 1px 4px #000;box-shadow:1px 1px 4px #000}
.bloggerspicetext{float:right;width:80%;font:14px Trebuchet MS,sans-serif;text-align:justify;color:#111;border-left:1px #c4c4c4 solid;margin:0;padding:0 0 0 10px}
.bloggerspicefooter{font:bold 12px Trebuchet MS;padding:10px 0}
</style>

HTML PART FOR THE ELEGANT COLORED AUTHOR BOX

After applying CSS Part now you have to go for HTML coding. Just follow the below steps-
 
Step 1 Now Click on Template ->Edit HTML


Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  

Step 3 Now Find this code ]]></b:skin> 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.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='bloggerspicePA'><div class='bloggerspice'><img height='70' src='http://3.bp.blogspot.com/-Viwg6lbo7ak/UTXjRiFKJDI/AAAAAAAAB7k/2hF1sXJbjDk/s320/Rabbi+(1).jpg' width='80'/><span style='font-family: Trebuchet MS,sans-serif;'><b>Mohammad Rabbi</b> (Admin) </span></div>
<div class='bloggerspicetext'><span style='font-size: large;'><b><span style='font-family: Trebuchet MS,sans-serif;'>Posted By: <span style='font-family: Fredoka One, cursive;'><span style='color: #04BDFA;'>Mohammad</span><span style='color: #FB9B03;'> Rabbi</span></span></span></b></span>
<p><div style='font-family: Trebuchet MS,sans-serif;'>Mohammad Fazle Rabbi is the owner and founder of BloggerSpice.com. I love to blogging, Design Blogger template, Web Developing and Designing.i like to learn and share technical hacking/security tips with you.</div></p>
<div class='bloggerspicefooter'><div 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></div>
<div style='float:right;text-align:right;'><a href='http://www.bloggerspice.com/p/authors-profile-hi-readers-this-is.html' target='_blank'>Read More &gt;&gt;</a></div></div></div></div></b:if>

 Customization

  • Change http://3.bp.blogspot.com/-Viwg6lbo7ak/UTXjRiFKJDI/AAAAAAAAB7k/2hF1sXJbjDk/s320/Rabbi+(1).jpg with your Image link
  • Change BloggerSpice with Facebook & Twitter Id as well as replace 102331886274459115104 with your Google Plus Id no.
  • Change http://www.bloggerspice.com/p/authors-profile-hi-readers-this-is.html with your About Us page.
  • Change Mohammad Rabbi with your Name.

Method 2


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

Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  

Step 3 Now Find this code <div class='post-footer-line post-footer-line-1'>

or <div class='post-footer-line post-footer-line-2'> by Pressing Ctrl + F

Step 4 Paste the below code after above/below code and Save the templates. 

/**Elegant Colored Author Box by www.bloggerspice.com**/
<style>
.bloggerspicePA{font-size:12px;width:auto;text-shadow:1px 0 0 #ACACAC;background:#009999;border-radius:5px;border:2px #009999 solid;-moz-box-shadow:0 0 5px #009999;-webkit-box-shadow:0 0 5px #009999;box-shadow:0 0 5px #009999;min-height:140px;margin:0 auto;padding:10px}
.bloggerspice{font-size:12px;float:left;width:110px;text-align:center;margin:0;padding:10px 10px 0 0}
.bloggerspice img{border:2px solid #888;background-color:#009999;opacity:0.5;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .5s ease-out;-moz-transform:rotate(7deg);-o-transform:rotate(7deg);-webkit-transform:rotate(7deg);-ms-transform:rotate(7deg);transform:rotate(7deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455,M12=-0.08715574274765817,M21=0.08715574274765817,M22=0.9961946980917455,sizingMethod='auto expand');zoom:1;margin:0 5px;padding:2px}
.bloggerspice:hover img{border:2px solid #ccc;cursor:pointer;opacity:1;-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0,M22=1,sizingMethod='auto expand');zoom:1;-moz-box-shadow:1px 1px 4px #000;-webkit-box-shadow:1px 1px 4px #000;box-shadow:1px 1px 4px #000}
. bloggerspicetext{float:right;width:75%;font:14px Trebuchet MS,sans-serif;text-align:justify;color:#111;border-left:1px #c4c4c4 solid;margin:0;padding:0 0 0 10px}
. bloggerspicefooter{font:bold 12px Trebuchet MS;padding:10px 0}
.bloggerspicePA{font-size:12px;width:auto;text-shadow:1px 0 0 #F7F7F7;background:#F7F7F7;border-radius:5px;border:1px #009999 solid;-moz-box-shadow:0 0 5px #009999;-webkit-box-shadow:0 0 5px #009999;box-shadow:0 0 5px #009999;min-height:140px;margin:0 auto;padding:10px}
.bloggerspice{font-size:12px;float:left;width:110px;text-align:center;margin:0;padding:10px 10px 0 0}
.bloggerspiceimg{border:2px solid #888;background-color:#FFF;opacity:0.5;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .5s ease-out;-moz-transform:rotate(7deg);-o-transform:rotate(7deg);-webkit-transform:rotate(7deg);-ms-transform:rotate(7deg);transform:rotate(7deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455,M12=-0.08715574274765817,M21=0.08715574274765817,M22=0.9961946980917455,sizingMethod='auto expand');zoom:1;margin:0 5px;padding:2px}
.bloggerspice:hover img{border:2px solid #ccc;cursor:pointer;opacity:1;-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0,M22=1,sizingMethod='auto expand');zoom:1;-moz-box-shadow:1px 1px 4px #000;-webkit-box-shadow:1px 1px 4px #000;box-shadow:1px 1px 4px #000}
.bloggerspicetext{float:right;width:80%;font:14px Trebuchet MS,sans-serif;text-align:justify;color:#111;border-left:1px #c4c4c4 solid;margin:0;padding:0 0 0 10px}
. bloggerspicefooter{font:bold 12px Trebuchet MS;padding:10px 0}
.bloggerspicePA{font-size:12px;width:auto;text-shadow:1px 0 0 #F7F7F7;background:#F7F7F7;border-radius:5px;border:1px #009999 solid;-moz-box-shadow:0 0 5px #009999;-webkit-box-shadow:0 0 5px #009999;box-shadow:0 0 5px #009999;min-height:140px;margin:0 auto;padding:10px}
.bloggerspice{font-size:12px;float:left;width:110px;text-align:center;margin:0;padding:10px 10px 0 0}
.bloggerspiceimg{border:2px solid #888;background-color:#FFF;opacity:0.5;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .5s ease-out;-moz-transform:rotate(7deg);-o-transform:rotate(7deg);-webkit-transform:rotate(7deg);-ms-transform:rotate(7deg);transform:rotate(7deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455,M12=-0.08715574274765817,M21=0.08715574274765817,M22=0.9961946980917455,sizingMethod='auto expand');zoom:1;margin:0 5px;padding:2px}
.bloggerspice:hover img{border:2px solid #ccc;cursor:pointer;opacity:1;-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0,M22=1,sizingMethod='auto expand');zoom:1;-moz-box-shadow:1px 1px 4px #000;-webkit-box-shadow:1px 1px 4px #000;box-shadow:1px 1px 4px #000}
.bloggerspicetext{float:right;width:80%;font:14px Trebuchet MS,sans-serif;text-align:justify;color:#111;border-left:1px #c4c4c4 solid;margin:0;padding:0 0 0 10px}
.bloggerspicefooter{font:bold 12px Trebuchet MS;padding:10px 0}
.bloggerspicePA{font-size:12px;width:auto;text-shadow:1px 0 0 #F7F7F7;background:#F7F7F7;border-radius:5px;border:1px #009999 solid;-moz-box-shadow:0 0 5px #009999;-webkit-box-shadow:0 0 5px #009999;box-shadow:0 0 5px #009999;min-height:140px;margin:0 auto;padding:10px}
.bloggerspice{font-size:12px;float:left;width:110px;text-align:center;margin:0;padding:10px 10px 0 0}
.bloggerspiceimg{border:2px solid #888;background-color:#FFF;opacity:0.5;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .5s ease-out;-moz-transform:rotate(7deg);-o-transform:rotate(7deg);-webkit-transform:rotate(7deg);-ms-transform:rotate(7deg);transform:rotate(7deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455,M12=-0.08715574274765817,M21=0.08715574274765817,M22=0.9961946980917455,sizingMethod='auto expand');zoom:1;margin:0 5px;padding:2px}
.bloggerspice:hover img{border:2px solid #ccc;cursor:pointer;opacity:1;-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0,M22=1,sizingMethod='auto expand');zoom:1;-moz-box-shadow:1px 1px 4px #000;-webkit-box-shadow:1px 1px 4px #000;box-shadow:1px 1px 4px #000}
.bloggerspicetext{float:right;width:80%;font:14px Trebuchet MS,sans-serif;text-align:justify;color:#111;border-left:1px #c4c4c4 solid;margin:0;padding:0 0 0 10px}
.bloggerspicefooter{font:bold 12px Trebuchet MS;padding:10px 0}
</style>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='bloggerspicePA'><div class='bloggerspice'><img height='70' src='http://3.bp.blogspot.com/-Viwg6lbo7ak/UTXjRiFKJDI/AAAAAAAAB7k/2hF1sXJbjDk/s320/Rabbi+(1).jpg' width='80'/><span style='font-family: Trebuchet MS,sans-serif;'><b>Mohammad Rabbi</b> (Admin) </span></div>
<div class='bloggerspicetext'><span style='font-size: large;'><b><span style='font-family: Trebuchet MS,sans-serif;'>Posted By: <span style='font-family: Fredoka One, cursive;'><span style='color: #04BDFA;'>Mohammad</span><span style='color: #FB9B03;'> Rabbi</span></span></span></b></span>
<p><div style='font-family: Trebuchet MS,sans-serif;'>Mohammad Fazle Rabbi is the owner and founder of BloggerSpice.com. I love to blogging, Design Blogger template, Web Developing and Designing.i like to learn and share technical hacking/security tips with you.</div></p>
<div class='bloggerspicefooter'><div 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></div>
<div style='float:right;text-align:right;'><a href='http://www.bloggerspice.com/p/authors-profile-hi-readers-this-is.html' target='_blank'>Read More &gt;&gt;</a></div></div></div></div></b:if>


Follow the customization from above customization part. If you need any further help then feel free to contact with me.
Add Elegant Colored Author Box At The Bottom Of Every Blog Posts
4 Stars stars - "Add Elegant Colored Author Box At The Bottom Of Every Blog Posts " Author box is very important for every blog to certify it as a legit site. Because blog aud...

Post a Comment

thanks it is very helpful post for any blogger. Your author box is exceptional. I love it.

itz not working in my blog

Bro I have seen your blog...just paste the HTML code below your boookmarking code where you can see.....

Share this article:

Place HTML code here.....

Can you explain again in a sequence.
I wana add this Widget but FAILS time & again.
www.mytechblaze.blogspot.com

Hi Aditya
I have just updated the BS Yellow Mag templates in SEO version with this Author box..kindly download it again and upload it to your blogger account you will get the author box.

http://www.bloggerspice.com/2013/02/bs-yellow-mag-premium-blogger-templates_1306.html

plasterer surrey
Toby, it's the old, blurry line between truth & "the facts." Sometimes, they overlap, but often, they don't.

Hi Appal..What exactly you want to say??? I didn't understand your comment.

bro my blog template send . plz add author box my blog .

Hi Aslam I will work on it..Don't worry.. :d

Please check your email..I have send the backup file :d

many many thanks rabbi vai . (h)

plz , plz add this author box my template >http://www.mediafire.com/view/kka969kibty3lat/template-4929807247753798577.xml

have u tried the above steps?? there are 2 method available... :-?

hello admin ,
please send me code of your (SUBSCRIBE ARTICLES VIA EMAIL) & SHARE THIS codes ,please ,,,,plese

I will publish tutorial soon..be patient. :ekk

Facebook Group Community Disqus Channel 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 *