widget sosial media with sliding effects

screenshoot widget sosal 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

11 komentar

menjadikan blog nampak lebih keren dan profesional yamas.makasih tutornya

Keren widgetnya, nanti dicoba ke blog aku. Makasih infonya.

dari dulu ane nyari yang pas. semoga widget yang ini cocok dan menarik visitor
kunjungback foreignlanguagehunter com

Minyak aja deh :v :v :v

nanti ane bawa pindang sama kompor'nya biar komplit |o|

jangan sungkan berkomentar dengan sopan
dilarang memasang spam, memasang iklan, link aktif/mati dan memasang hal tentang pornografi.

Apabila ingin memasang gambar, cukup masukan link gambarnya.
Gunakan Konversi kode jika ingin memasukan kode script


Konversi KodeEmoticon