Home
Blogger

Add Ribbon Style Sliding CSS3 Author info Box below Blog Header

Add Ribbon Style Sliding CSS3 Author info Box below Blog Header
author box

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

2 comments

  1. 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
Go Up