CARA MEMBUAT Professional Social Sidebar floating Widget for DI BLOGSPOT

Professional Social Sidebar floating Widget for Blogger

elok banget nich blog you di terapkan,..
marilah kita terapkan,...


*  buka blog you
*  tata letak
*  tambah gadget
*  html/javascript
*  copy kode dibawah dan letakkan ke dalam html/javascript
<div id='social-sidebar'>
   <ul>
    <li>
     <a class='entypo-twitter' href='https://twitter.com/ivankGribatako' target='_blank'>
      <span>Twitter</span>
     </a>
    </li>
    <li>
     <a class='entypo-gplus' href='https://plus.google.com/110561987544809067837/posts' target='_blank'>
      <span>google+</span>
     </a>
    </li>
    <li>
     <a class='entypo-tumblr' href='http://www.tumblr.net/' target='_blank'>
      <span>tumblr</span>
     </a>
    </li>
<li>
     <a class='entypo-facebook' href='http://www.facebook.com/ivankvalentine' target='_blank'>
      <span>facebook</span>
     </a>
    </li>
        <li>
     <a class='entypo-rss' href='http://feeds.feedburner.com/' target='_blank'>
      <span>feedburner</span>
     </a>
    </li>
   </ul>
  </div>
<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */

@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul,#social-sidebar ul li,#social-sidebar ul li a {
 list-style: none;
 margin: 0;
 padding: 0;
}
 
/* ---------- Social Sidebar ---------- */
#social-sidebar {
    left: 0;z-index:999;
 margin-top: -75px; /* (li * a:width) / -2 */
 position: fixed;
 top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
 background: #121212;
 color: #fff;
 display: block;
 height: 50px;
 font-size: 18px;
 line-height: 50px;
 position: relative;
 text-align: center;
 width: 50px;
}
#social-sidebar ul li a:hover span {
 left: 130%;
 opacity: 1;
}
#social-sidebar ul li a span {
 border-radius: 3px;
 line-height: 24px;
 left: -100%;
 margin-top: -16px;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 opacity: 0;
 padding: 4px 8px;
 position: absolute;
 -webkit-transition: opacity .3s, left .4s;
 -moz-transition: opacity .3s, left .4s;
 -ms-transition: opacity .3s, left .4s;
 -o-transition: opacity .3s, left .4s;
 transition: opacity .3s, left .4s;
 top: 50%;
 z-index: -1;
}
#social-sidebar ul li a span:before {
 content: "";
 display: block;
 height: 8px;
 left: -4px;
 margin-top: -4px;
 position: absolute;
 top: 50%;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 width: 8px;
 z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style>
>>> CATATAN <<<
        [ Ganti warna merah dengan url sosmed anda ]
# silahkan di save /simpan

***  SEMOGA  BERHASIL  SOBAT  ***

Baca Juga Artikel Terkait Lainnya

Thanks For Your Comment Here