Cara Memasang Tombol Berbagi Efek Berputar

Saat ini banyak widget  share button/tombol berbagi telah dirilis untuk Blogger.  Hal ini cukup membantu untuk membuat blog Anda bersosialisasi dan mendapatkan lebih banyak traffic. Menambahkan tombol bookmark sosial adalah cara yang keren untuk mendapatkan lebih banyak pembaca dan pemirsa yang ditargetkan.

Tombol berbagi yang saya bagi sekarang cukup keren, ketika pointer mouse diarahkan ke tombol tersebut ia akan memutar 360 derajat.

Berikut adalah cara untuk menambahkan tombol berbagi dengan efek berputar ke blog Blogger Anda:

1. Login ke blogger> Template> Edit HTML> Cari kode berikut pada template Anda: (CTRL + F)

<data:post.body/>

2. Tepat di bawahnya tambahkan kode berikut ini: 

<b:if cond='data:blog.pageType == "item"'>
<div class='spinning_icons'>
<a class='twitter' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank' title='Twitter'>Twitter</a>
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Delicious'>Delicious</a>
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg'>Digg</a>
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Facebook'>Facebook</a>
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumbleupon'>Stumbleupon</a>
<a class='rss' href='http://feeds.feedburner.com/NotEasy' target='_blank' title='RSS'>RSS</a>
</div>
</b:if>

3. Ganti http://feeds.feedburner.com/NotEasy dengan username feedburner Anda, kemudian cari kode ini:

]]></b:skin>

4. Tepat di atas kode tersebut tambahkan kode di bawah ini:

.spinning_icons a{
    width:48px;
    height:48px;
    display:inline-block;
    text-indent:-9999em;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
}
.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtoBalWb8Hr7f-7JoqSMKfxP4WYhNLgOgOnfDfCrUkbbZJm_mwE5Nvn6FR1wl5TJT06SivZ5ozjPbKx-9oH0uIuNrLbO61SFhk2PhHmAvWHZ1J7NWBXn9YmPMF_NAD8p6D5cE7WZaUAR8/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBatjA2NXh0uULL-qNHlTABKf7zPMAikpFwnq7XdBtwmu6sG7rg1rbQGZUvIw-R00-mRlVjSFFPzZdAJ1FTkCE4-pwKUDH6qR5kWEOBt0f01xQfzzq2ULGxKEfPeDtTIXpmOsZYVdNDJw/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH6BfXDlwfHocQQwHfh4Qtgeupc-R7qAqaJN48yY-XHrC0q_f4BEMyvPXEJIQga47YDli1gQ93KQmLe50bZrZ9IOly9HA0kb-Rwm5rlYGP1m1jPeU7eXUMhhgWsF831nD_G_5wKbMbql0/s1600/digg_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWG_9A1pVqoa-iFmqhK6n0yvtt2KH8p2HggQffrCUrK6-TG892LUxibLZMeJyn-vBT7iz4jcb53YHaEjZrn9JeT8xH0tP0vYdYMDCZrNapbMVJu969gq2ATjzS2vAuyTY_xbu4hz52E5U/s1600/facebook_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf0g-9H-jXmp3W1RHzuE2IxlZEhMdoJrnnMfgobP_C-muoNFe1P11DKUKWacdNJ75NbydsE3CArS9OhGvUYcLVZ-sMP69jJKvEjip7qJWzclUgpG4Vu75HmZ9pUAe7PqiT6EdzxGaK_UA/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY_yXnoE0xlqi4cdxMMTsr3EJZCPYB-hyN-Gvh3aRJzScGnaW5LrGvHQAEqoCjfv3dfulMhi8m-doxui69h4ovKO065onBcc1WaKbeW2AT_LJ0_5AVs1_3EEAHA1bxEzCBTQjcLZWBl7M/s1600/stumbleupon_32.png'); }
.spinning_icons a:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    transition: transform 0.2s ease-out;
    -webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
}

5. Sebelum menyimpan klik pratinjau dulu, jika error berarti ada kesalahan. Jika bagus simpan template dan Tombol Berbagi Efek Berputar Anda sudah jadi. Baca juga Cara Membuat Tombol Like, Share dan Twitter di Sisi Blog.