Add Ribbon Style Sliding CSS3 Author info Box below Blog Header

Author info box is very necessary for every blogger. It increase credibility of the blog. Previous I have shared many author box for blog footer and end of every posts but today  I am going to share a unique sliding author info Ribbon box which is really awesome for your blog. This author box made with pure CSS3. And it will display author image beside header. When you mouse over on that widget it will jump to right side instantly and again it will back slowly by sliding. This concept is completely unique and I believe it will able to attract your visitors. More importantly, it doesn't occupy any extra space on your blog. You would able to link this widget with your About Author and Contact us Page thus a visitors can easily navigate to those pages. Hope you would like it and it will add some extra spice on your blog.

Live Demo

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard 

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.

<style>
#BloggerSpiceRibbonAuthorBox {
position: absolute;
top: 30px;right: 32%;
z-index: 10;
width: 108px;
height: 160px;
background-color: #333;
color: #999;
-webkit-box-shadow: 0 5px 7px rgba(0,0,0,.7);
-moz-box-shadow: 0 5px 7px rgba(0,0,0,.7);
box-shadow: 0 5px 7px rgba(0,0,0,.7);
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: right 5.15s linear;
-moz-transition: right 5.15s linear;
-ms-transition: right 5.15s linear;
-o-transition: right 5.15s linear;
transition: right 5.15s linear;
border: 1px solid;
border-color: #444 #222 #222 #444;
padding: 10px;
-webkit-transition: all 7s ease-out;
-moz-transition: all 4.26s ease-out;
-ms-transition: all 7s ease-out;
-o-transition: all 4.26s ease-out;
transition: all 7s ease-out;
}
#BloggerSpiceRibbonAuthorBox:hover {right: 12%;-webkit-transition: all 0s ease-out!important;
-moz-transition: all 0s ease-out!important;
-ms-transition: all 0s ease-out!important;
-o-transition: all 0s ease-out!important;
transition: all 0s ease-out!important;}
#BloggerSpiceRibbonAuthorBox, {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
-animation-duration: 2s;
}
#BloggerSpiceRibbonAuthorBox:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
top: 100%;
left: 20px;
border: 15px solid transparent;
border-top-color: #333;
}
#BloggerSpiceRibbonAuthorBox .img-container img {
display: block;
background-color: #3c3c3c;
padding: 5px 0;
}
#BSBack li a {
display: block;
background-color: #3c3c3c;
color: #ccc;
font: normal normal 8px/normal Arial,Sans-Serif;
text-transform: uppercase;
position: relative;
-webkit-transition: all .26s ease-out;
-moz-transition: all .26s ease-out;
-ms-transition: all .26s ease-out;
-o-transition: all .26s ease-out;
transition: all .26s ease-out;
padding: 6px 10px;
}
#BloggerSpiceRibbonAuthorBox .img-container {
width: 82px;
border: 3px double #3c3c3c;
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.4);
-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.4);
box-shadow: inset 0 0 2px rgba(0,0,0,.4);
margin: 0 0 10px auto;
padding: 10px;
}
#BSBack {
width: 108px;
display: block;
margin: 0 0 0 -10px;
}
#BSBack li a:before {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
top: 0;
right: 0;
border: 11px solid transparent;
border-right-color: #333;
}
#BSBack li {
list-style: none;
}
#BSBack li.BS1 a:hover, #BSBack li.l-3 a:focus {
background-color: #0186cb;
}
#BSBack li.BS2 a:hover, #BSBack li.l-3 a:focus {
background-color: #005C91;
}
<!--www.bloggerspice.com-->
</style>
<div id="BloggerSpiceRibbonAuthorBox" style="margin-right: 0px; width: 108px; overflow: hidden;">
<div class="img-container center">
       <a href="/"><img alt="Mohammad Rabbi" src="Image URL Here" height="70" width="82" /></a>
        </div>
<ul id="BSBack">
<li class="BS1">
<a href="#">About Author</a>
</li>
<li class="BS2">
<a href="#">Contact Us</a>
</li>
</ul>
</div>

Customization 

• Change top: 30px; for adjusting top position of the widget
• Replace Image URL Here  it with your image URL
• Replace # it with your page link