widget sosial media with sliding effects

Pentingnya memasang informasi pada blog saya rasa cukup penting supaya pengunjung dapat berkomunikasi langsung tanpa harus menunggu balasan komentar. karna penulis blog tidak selalu hadir pada blog. biasanya si penulis lebih rajin online pada situs tertentu seperti Facebook, Twitter, atau Google +. Dengan bantuan Widget ini akan membantu penulis dan pebaca Blognya lebih mudah bertemu. tampilan widget ini juga menarik dengan efek sliding yang keren. langsung saja di simak tutorial di bawah.

BIASAKAN BACKUP ATAU DOWNLOAD TEMPLATE SEBELUM DI EDIT

TUTORIAL

1. Pastikan kamu sudah Login dan masuk Profil blog mu.
2. Selanjutnya klik Tata Letak , Tambah gadget ( posisnya bebas,tanpa nama ),
3. Kemudian HTML/JavaScript.
4. Copy kode di bawah dan paste di kotak yang tersedia.

<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/AVvXsEjXQqhgMML04SEPRKOP55RrKOYzNKAvcoQh2nQg5P9x9yVyzuJ_eJWmh2qLkVFgoi1GMT4Utjh_rmJTLPnZJLXNyKrmL5B53TN-L0X1fngx2Vf1gv-CQG8nxXk1QFuz9bChFQhFuQohd18/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 #000;"><a href="http://ngurah-insane.blogspot.com/2014/06/widget-sosal-media-with-sliding-effects.html" target="_blank" title="widget sosal media with sliding effects">-> Get This Widget Here</a></div></small>

Keterangan:
Ganti tanda *** dengan Link kepunyaanmu, dan pastikan sudah sesuai dengan icon'nya.

5. Kemudian klik save. dan lihat hasilnya.

semoga artikel ini bisa bermanfaat ya :)

Share artikel ke: Facebook Twitter Google+ Linkedin Technorati Digg