0 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 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

CSS PART FOR THE ELEGANT COLORED AUTHOR BOX

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.

/**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 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.

<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/AVvXsEi0YIQ8qIqMjoQ0dCxcRj03BuYIk2sZF-VrsBEO2IoZ86J436AC5P4gdODXoIKEuyUXQFSDsEsu5HrU8SDEbRx09DxThXCugauSmD1ALpP_8titoddhEBdQOrrdlxGb9nQbTgZC5zqVCJ0/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/AVvXsEi0YIQ8qIqMjoQ0dCxcRj03BuYIk2sZF-VrsBEO2IoZ86J436AC5P4gdODXoIKEuyUXQFSDsEsu5HrU8SDEbRx09DxThXCugauSmD1ALpP_8titoddhEBdQOrrdlxGb9nQbTgZC5zqVCJ0/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.