Membuat Widget Social Dengan Effect CSS pada Blog

Nah kali ini saya akan memberikan cara bagaimana Membuat Widget Social Dengan Effect CSS pada Blog. dengan lebih prktis dan mudah di jangkau para visitor nah langsung saja kita cara.

  1. Masuk blogger
  2. Pilih kolom tata letak
  3. tambah gadget
  4. pilih html/javascript
  5. masukan kode di bawah ini
<style> 
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} 
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;} 
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;} 
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8hM-MmVyaTUEy75PZCsR_CD9ivtjxysIcUtIQ6uWjtgMVlCrOP54JDsLfjpiMRuSPBQ-hsplFXnka3uGW9pFY34O2jT5FqScs_eD2IzNBBeekcvKwpCSM8VH7t8XGR3AgEQKy3nzvcJk/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;} 
#tbisose .icon{overflow:hidden; color:#fafafa;} 
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} 
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} 
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} 
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} 
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} 
#tbisose li:hover .icon, 
.touch #tbisose li .icon{width:210px;} 
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);} 
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);} 
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);} 
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);} 
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);} 
</style> 
<ul id="tbisose"> 
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li> 
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li> 
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li> 
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li> 
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li> 
</ul>
<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://awandcyber4rt.blogspot.com/2013/06/membuat-widget-social-dengan-effect-css.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>
Setelah itu ingat tanda yang saya beri warna merah ganti dengan link anda. 
      6. Kemudian Save dan pratinjau 

Untuk melihat contoh dan bukti lihat saja di sidebar blog ini. Semoga artikel tentang Membuat Widget Social Dengan Effect CSS pada Blog bermanfaat buat kalian