Dazzling Author Box for the End of Every Blog Posts

Dazzling Author Box for the End of Every Blog Posts

1
data:blog.title

awesome author box
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.





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(http://2.bp.blogspot.com/-Y5BDoWT0eCw/UQ3qalggHSI/AAAAAAAABQw/wbsrl3dpYG4/s400/About%2Bthe%2Bauthor.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
Dazzling Author Box for the End of Every Blog Posts
4 Stars stars - "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...

Post a Comment

Thanks boss this is awesome. I have seen this design first time. i recommended it for others.

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 *