<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="ΕΔΩ ΤΟ URL THΣ EIKONAΣ" height="70" width="82" /></a>
        </div>
<ul id="BSBack">
<li class="BS1">
<a href="ΕΔΩ ΤΟ LINK ΤΗΣ ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ">About Author</a>
</li>
</ul>
</div>