Memasang Widget Social Media di Blog dengan Efek Berputar

Memasang widget Social Media di Blog dengan Efek Berputar - Saya akan nge-share widget unik nih, widget ini bisa berputar ketika kursor diarahkan ke Widget tersebut. Lumayan kan buat memperindah tampilan blog, hehe.
Ingin mencoba memasang widget ini pada blog sobat? Silahkan disimak~ ^^

Untuk demo ada pada bagian kanan blog ini

Langkah Pertama: Login ke Akun Blogger sobat, silahkan menuju setting ~> Template ~> edit HTML.

Langkah Kedua: Kemudian masukkan kode dibawah ini tepat 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;}

Langkah Ketiga: Lalu masukkan kode dibawah ini tepat 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>

Langkah Keempat: Save/Simpan Template

Langkah Kelima: Silahkan menuju Setting ~> Tata Letak ~> Add a Gadget/Tambahkan Gadget ~> Pilih HTML/JavaScript

Langkah Keenam: Masukkan kode HTML dibawah ini

<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 milik 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 milik 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 milik 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 milik 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>

Ket:
Ganti kode berwarna biru dengan ID milik sobat

Lalu klik Simpan

Semoga Bermanfaat~
sumber