AABI‍TALITA BLOG
6.30.2013

Membuat Widget Social Media dengan Efek Berputar

social media

Kali ini saya coba share cara membuat Widget Social Media dengan efek berputar.sesuai dengan efeknya image social media ini akan berputar ketika diarahkan mouse.ada lima image social media pada widget ini yaitu Facebook,Twitter,Google Plus,Rss dan widget feedburner.


social media


Untuk langkah pembuatannya hanya mengikuti tiga  langkah mudah berikut ini :

1. Masukan kode dibawah ini diatas kode  ]]></b:skin>

.social a{color: #6e6e6e;font: bold 12px Arial;text-decoration: none;padding: 1px 1px 0px;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f9f9f9;border: solid 1px #f9f9f9;margin-bottom:10px}
.social a:hover {color: #333;border-color: #0e928d;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 2px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}
.social a:active{color:#000;border-color: #444;}

2.Selanjutnya masukan lagi kode berikut diatas kode  </head>

<style type='text/css'>#rotate img{-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out;} #rotate img:hover{ -o-transform: scale(1.1) rotate(360deg); -moz-transform: scale(1.1) rotate(360deg); -webkit-transform: scale(1.1) rotate(360deg);}</style>

3.Sampai disini simpan dulu template sobat.

4. Kemudian masukan kode HTML di bawah ini dalam Gadget HTML/Javascript.

<div class='social'>
<div id="rotate">
<a style="margin-left: 5px; margin-right: 5px;" title="Get updates right in your inbox"  href='http://feedburner.google.com/fb/a/mailverify?uri=Id Sobat' target='_blank' alt='newsletters'><img alt='email' src='https://lh6.googleusercontent.com/-VXLPa9GZq1Q/UJyyu0siW-I/AAAAAAAANY8/GEIS4T1jbe4/s40/mail.png' alt='newsletters' title='newsletters'/></a>
<a style="margin-left: 5px; margin-right: 5px;" title="Subscribe to our RSS feed" href='http://feeds.feedburner.com/Id Sobat' target='_blank' alt='rss'><img alt='rssfeed' src='https://lh6.googleusercontent.com/-mmd0UaE1A24/UJyyv5DqQwI/AAAAAAAANZQ/hxIo6ijm3iY/s40/rss.png' alt='rss' title='rss'/></a>
<a style="margin-left: 5px; margin-right: 5px;" title="Follow us to get our twitter updates"  href='http://twitter.com/Id Sobat' target='_blank' alt='Follow on twitter'><img alt='twitter' src='https://lh3.googleusercontent.com/-e_BiuZYOtmM/UJyyv8lLuUI/AAAAAAAANZM/gd42sWzL3KM/s40/twitter.png' alt='Follow on twitter' title='Follow'/></a>
<a style="margin-left: 5px; margin-right: 5px;" title="Like me on Facebook" href='http://www.facebook.com/Id Sobat/' target='_blank' alt='Like me on Facebook'><img alt='facebook' src='https://lh3.googleusercontent.com/-4A-w9bh9pdI/UOVvglcjUPI/AAAAAAAAT9g/mieZRe2D3x0/s40/facebook.png' alt='Like me on Facebook' title='Like me on Facebook'/></a>
<a style="margin-left: 5px; margin-right: 5px;" title="Add us to your circles on google plus"  href='https://plus.google.com/108693546003414204831' target='_blank' title='Follow on G+'><img alt='blog' src='http://4.bp.blogspot.com/-gLJp4DLDSCs/UVvuJnD6t_I/AAAAAAAAX5k/r9WTrCFCTAU/s1600/g+.png' alt='Follow on G+' title='Follow on G+'/></a></div></div>

Ganti tulisan berwarna merah dengan ID milik sobat.
Terakhir klik simpan dan lihat hasilnya.demikian tutorial cara membuat widget Social Media dengan efek Berputar semoga bermanfaat.

4 komentar

terimakasih bro atas informasinya mohon izin copas ya

salam
Pembicara Bisnis Online

terimakasih atas sharingnya.

sama sama mas djangkaru,

Sepertinya bagus ya pak kalau ada tombol jejaring sosial yang bisa berputar-putar. Tapi apakah widget tersebut tidak memperberat loading blog pak? :)

Terima kasih atas kunjungannya, silahkan berkomentar sesuai topik. Menuliskan link aktif tidak akan ditampilkan dalam komentar.Terima Kasih.