Home
Blogging

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

Add Elegant Colored Author Box At The Bottom Of Every Blog Posts
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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo5DZbarcUH-uw8mzTe8d4APDt-l1DP4hGhi7vqm1g3t3C_6JCypXEJeOH5fVwidXgnt7uHH1OcYKJk0tUQud6eBS6yVA3ZbbPiJb3-qoOQ7Q2CE9aAZvGFpCQ-wyEikbAXNrR8UWHc_0/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 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo5DZbarcUH-uw8mzTe8d4APDt-l1DP4hGhi7vqm1g3t3C_6JCypXEJeOH5fVwidXgnt7uHH1OcYKJk0tUQud6eBS6yVA3ZbbPiJb3-qoOQ7Q2CE9aAZvGFpCQ-wyEikbAXNrR8UWHc_0/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo5DZbarcUH-uw8mzTe8d4APDt-l1DP4hGhi7vqm1g3t3C_6JCypXEJeOH5fVwidXgnt7uHH1OcYKJk0tUQud6eBS6yVA3ZbbPiJb3-qoOQ7Q2CE9aAZvGFpCQ-wyEikbAXNrR8UWHc_0/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.

14 comments

  1. thanks it is very helpful post for any blogger. Your author box is exceptional. I love it.
  2. 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
  3. 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)
  4. 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... :-?
  5. 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
Go Up