Add Ribbon Style Sliding CSS3 Author info Box below Blog Header
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.
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
Add Ribbon Style Sliding CSS3 Author info Box below Blog Header
BloggerSpice

Contact Form
Let's Connect
Trending
- How to Float 2 Wide Skyscraper Ad banner on Left and Right Side?
- How to Make YouTube Video Responsive in Blogger Site?
- How to Submit Website to DMOZ (The Open Directory Project)?
- Float AdSense and other Ads on left or right side of your Blog
- 15 Hot SEO Google Chrome Extensions for Website SEO Analysis and Audit
- How to Add 2-Step Verification in Google Account?
- 6 Killer Tips on How to Get More Views on YouTube for Free
- How to Fix Bengali Font Problem in Google Chrome Browser?
- How to add Google progress scrollbar on top of your BlogSpot page?
- The Insider's Guide to Generate Your Blog Traffic by 110%
Hello Dear How are you? Your post is funtastic about Author rebin. Sir I have 300 page views only from google now a days. Within 3 months. can you please give me idea how much i wait for it boost up as like your 25,000. Can you please visit my blog optimize it.
Bro it require time. But in my case mostly worked my blog's unique design. I am also getting traffic from my created Templates and Widget. one of my popular widget Floating ads is using 2 popular Arabic and Greek site I am receiving 10,000+ traffic from them daily. So its not only depend on optimization. But optimization is very important and more importantly you have to gain trust from your visitors. You have to helped them generously. Beside of this I got many referral site they are willingly refereed me as good site.
Your blog is still young..but wait at least 6 month and make frequent post (2 post daily) submit sitemap to search engine. But don't copy from others, if you do then your visitors will lose faith from you.
Don't worry I will provide you guidelines if you need...and keep visiting BloggerSpice more new exciting widget.thanks