Cara Memasang Widget Social Media dengan Efek Transisi

Dengan berkembang pesatnya pertumbuhan pemakai atau pengguna social media, bisa kita manfaatkan sebagai ajang berpromosi secara gratis.
Dengan tampilan tombol yang menarik maka akan dapat membuat bertambahnya follower (twitter) atau yang menyukai Fan Page (FB) dari blog kita.
Kali ini saya akan memberikan widget social media dengan efek transisi, yang dapat menarik pengunjung untuk mencobanya.

Untuk pemasangannya tidak terlalu sulit, silahkan anda ikuti langkah-langkahnya :

• Seperti biasa masuk dulu ke blogger.com
• Pilih Tata Letak
• Lalu klik Tambahkan Gadget
• Pilih HTML/Javascript
• Lalu Pastekan kode berikut ini

<style type="text/css"> #kotakwidget .iconz {background:#E3E3E3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0QPat-C9LssZexrzXwaH_wyNph6eL699H4p0fGCI45oB4aCEqMGrwn6ZJERg6OrmH0ecC160XYiFBhSMsXjZIJeRdHvhSeA3vCcNx6fjeraXgKfZHypYOMaHh1HAkuImaz4Cgft65HKE/s1600/blsocial12.png') 0 0 no-repeat; -moz-border-radius:40px; -webkit-border-radius:40px; -o-border-radius:40px; border-radius:40px; display:block; color:#212121; float:none; height:48px; width: 48px; line-height:48px; margin:10px auto 0; position:relative; text-shadow:0 1px 0 #FAFAFA; text-align:center; text-decoration:none; white-space:nowrap; -webkit-transition:width .25s ease-in-out; -ms-transition:width .25s ease-in-out; -moz-transition:width .25s ease-in-out; -o-transition:width .25s ease-in-out; transition:width .25s ease-in-out; -webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; -o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;} #kotakwidget a span {display:none;} #kotakwidget:hover a span {display:inline;} #kotakwidget a span {font-size:1.4em;} #kotakwidget:hover .iconz {width:250px;} #kotakwidget .fb {background-position: 0 -384px;} #kotakwidget .twiter {background-position: 0 -432px;} #kotakwidget .google {background-position: 0 -480px;} #kotakwidget .pint {background-position: 0 -528px;} #kotakwidget .linkedin {background-position: 0 -576px;} #kotakwidget .devart {background-position: 0 -624px;} #kotakwidget .ytube {background-position: 0 -672px;} #kotakwidget .rss {background-position: 0 -720px;} #kotakwidget .fb:hover {background-position: 0 0;color: #0374DD;} #kotakwidget .twiter:hover {background-position: 0 -48px;color: #00A1DF;} #kotakwidget .google:hover {background-position: 0 -96px;color: #A70000;} #kotakwidget .pint:hover {background-position: 0 -144px;color: #C00;} #kotakwidget .linkedin:hover {background-position: 0 -192px;color: #005772;} #kotakwidget .devart:hover {background-position: 0 -240px;color: #4C7A4A;} #kotakwidget .ytube:hover {background-position: 0 -288px;color: #A00;} #kotakwidget .rss:hover {background-position: 0 -336px;color: #EC5601;} </style> <div id="kotakwidget"><a href="#" class="iconz fb"><span>Facebook</span></a></div> <div id="kotakwidget"><a href="#" class="iconz twiter"><span>Twitter</span></a></div> <div id="kotakwidget"><a href="#" class="iconz google"><span>Google+</span></a></div> <div id="kotakwidget"><a href="#" class="iconz pint"><span>Pinterest</span></a></div> <div id="kotakwidget"><a href="#" class="iconz linkedin"><span>LinkedIn</span></a></div> <div id="kotakwidget"><a href="#" class="iconz devart"><span>DeviantArt</span></a></div> <div id="kotakwidget"><a href="#" class="iconz ytube"><span>Youtube</span></a></div> <div id="kotakwidget"><a href="#" class="iconz rss"><span>RSS</span></a></div>

Jika sudah, tinggal anda simpan deh....

Demikian Cara Memasang widget Social Media dengan Efek Transisi, semoga dapat bermanfaat bagi anda semua.

Jangan lupa cek juga widget-widget lainnya, siapa tahu ada widget lainnya yang sedang anda cari-cari.

"Salam Satu Widget"