When I was surfing arlinadesign.blogspot.com Then I found this widget from one of arlinadesign template. I was wondering how it is made after some days I made it. To add it to Blogger Follow the steps given below.
How to add it to Blogger
-Go to template>Edit HTML
-Press CTRL+F and search ]]></b:skin>
-Paste the following code above it
/* CSS Author Widget */.iuauthor-item {padding:15px 10px;text-align:center;}.iuauthor-item .image-wrap {position:relative;overflow:hidden;border-radius:50%;-webkit-transform: translate3d(0px,0px,0px);transform: translate3d(0px,0px,0px);width:80%;height:auto;margin:0 auto;margin-bottom:15px;}.iuauthor-item .image-wrap:before {content: '';display:block;position:absolute;border-radius:50%;border:10px solid #f9f9f9;border-image-source:initial;border-image-slice:initial;border-image-width:initial;border-image-outset:initial;border-image-repeat:initial;opacity:0.7;margin:auto;top:0px;right:0px;bottom:0px;left:0px;-webkit-transition: all 0.4s linear;transition: all 0.4s linear;}.iuauthor-item .social {position:absolute;width:92.5%;height:92.5%;border-radius:50%;background-color:#f9f9f9;opacity:0;margin:auto;top:0px;right:0px;bottom:0px;left:0px;font-size:0px;text-align:center;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transition: all 0.3s linear;transition: all 0.3s linear;}.social.linear-3s .social-inner {position:absolute;width:100%;padding:15px 0;top:50%;left:50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}.social-inner .fa {margin:0px 5px;font-size:16px;color:#fff;width:14px;height:14px;padding:8px;border-radius:50%;}.image-wrap:hover .social.linear-3s {opacity:0.95;-webkit-transform: scale(1);transform: scale(1);}.image-wrap:hover:before {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);}.iuauthor-item h4.iuauthor-name a {font-size:18px;margin-bottom:10px;display:block;color:#333;}.social-inner .fa-google-plus {background:#d64431!important;}.social-inner .fa-twitter {background:#00aced!important;}.social-inner .fa-facebook {background:#3b5998!important;}.social-inner .fa-pinterest {background:#cb2027!important;}-Hit Save template Button
-Go to layout>add a gadget>HTML/Javascript
-Paste the following code
<div class='iuauthor-item'><div class='image-wrap'><img alt='Revoltify' class='img-circle author_avatar img-responsive' src='http://2.bp.blogspot.com/-S_QQa65ZemI/VMHoJ_VqdII/AAAAAAAAB3o/dl0c7BH3mnE/s1600/Arlina%2BLogo.png' title='Revoltify'/><div class='social linear-3s'><div class='social-inner'><a href='#' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook'></i></a><a href='#' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter'></i></a><a href='#' target='_blank' title='Follow Us On Google Plus'><i class='fa fa-google-plus'></i></a><a href='#' target='_blank' title='Follow Us On Pinterest'><i class='fa fa-pinterest'></i></a></div></div></div></div>-Save it
Your are all done :)
EmoticonEmoticon