0 Dazzling Author Box for the End of Every Blog Posts

Hello visitors I have just designed a dazzling stylish author box that will help to beautifying your blog. This author box is awesome with image rotator effects. That means when your will Mouse over on Author Image then it will slightly rotate. For installing this author box just follow the below steps.

 Live Demo

CSS PART FOR THE DAZZLING 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.

/**Dazzling Author Box by www.bloggerspice.com**/
#BS-authorbox {
background:#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDZGEltLYJRgoaXW3Q14s8SBBF9mBVYcmhhF10lnaKyzKyWz-WqXRiR_b1tNLselPomvhbownrKXBoTWlTXf95x5G22AysS_NHIppbR7khyphenhyphen_TeZXPP6V88aZGzrUqtqrdswYeqU-7lApFd/s400/About+the+author.jpg) no-repeat scroll left top;
width:auto;
overflow:hidden;
color:#fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
margin:5px auto;
padding:40px 10px 10px 20px;
}
#BS-authorbox:hover {
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
}
#BS-authorbox h4 {
font-size:16px;
color:#fff;
clear:none;
margin:0;
padding:10px 10px 5px;
}
#BS-authorbox .author_small {
font-style:italic;
}
#BS-authorbox img {
-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform:  rotate(+2deg);
-moz-transform: rotate(+2deg);
float:left;
border:4px solid #F9780E;
margin:10px;
padding:0;
}
#BS-authorbox img:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}
#BS-authorbox p {
color:#F9EAD4;
margin:0;
padding:0 10px 10px;
}
#BS-authorbox a {
color:#F9780E;
}

HTML PART FOR THE DAZZLING AUTHOR 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 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.

<div id="BS-authorbox"> 
<img alt="About Author" src="http://4.bp.blogspot.com/-AUlnsFGtuYA/UMIYuhZF76I/AAAAAAAAAVc/VEbCdsa08ZM/s1600/Rabbi.jpg" height="80" width="80"/>
<h4><a href="https://plus.google.com/102331886274459115104/" title="Posts by Mohammad Fazle Rabbi" rel="author">Posted by Mohammad Fazle Rabbi</a></h4>
 <p>Hello This is Mohammad Fazle Rabbi ,from Bangladesh, I like to grab knowledge about blogger hacks and Tricks, Desing Blogger template, Web Developing and Designing. </p> <p>Visit My Blog <a href="http://www.bloggerspice.com">Blogger Spice</a> | Follow Me On <a href="http://www.twitter.com/BloggerSpice">Twitter</a> Or <a href="http://www.facebook.com/BloggerSpice">Facebook</a></p></div>

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
Change Mohammad Fazle Rabbi with your name