Cara membuat Share Button Tombol Berbagi model putar

Manfaat dari widget share button, bukanlah hal yang asing lagi buat seorang blogger. dimana dengan adanya tombol share button, Blog artikel terbaru kita, bisa kita share melalui tombol berbagi. Sehingga dampaknya untuk menambah Traffic Blog. maka Blog tanpa tombol share sangat janggal sekali.

Saat ini Banyak sekali cara-cara yang dilakukan seorang blogger untuk mempercantik blognya. salah satunya memilih tombol bookmark sosial yang menarik. Yang akan ingin membuat Share Button Tombol Berbagi model putar seperti diatas, silakan diikuti.

1. Login ke blogger> Desain> Edit HTML> Expand Widget Templates. Cari kode berikut pada template Anda: gunakan (ctrl + f)

<data:post.body/>

2. Tambahkan Kode berikut ini dibawahnya.

<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/Zhrieeblog' target='_blank' title='RSS'>RSS</a>
</div>
</b:if>

 3. Silakan anda mengganti kode http://feeds.feedburner.com/Zhrieeblog dengan Username feedburner anda.

4.  Cari Kode :
]]></b:skin>

5. Diatas kode tersebut, tambahkan code dibawah 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/AVvXsEjwR1DnfHrXaQ6iKUh3BweGjupM02UsXlwclNhNp-5GIQUa6AyKhuyw9wz_soSk8cBv6SXl6lv0fMdzxGCknLXAQ29J827lp3LLy_3HbIVuh4dgEjSKAvRzNRrxhWOcrduiF_2RSZx_1Jc/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmwdUB3y80RsPSU5S7hGvcqbVFQTFGwA9oDtZdR3BbKKhOTxSyRGg0nxNma6KpCsbbNLDt1P_62xmAL0-eo4tDus1zUrB-AuoZr2rRKW_Hh-ZyeRqtqMzIH2pScqG6ULebcZ9wMI8tvnM/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi17-47pjnnNlNZ4nvv6K6bI5GZz4noZIDRnGertMRnM1CYefcV_PRUTBUfwJC0Ftk5C89Ku_fyEISQ54ivW0AqiHAPY0nbMhVhNTtWIVKQYbtTVWGWt_Sbt4qD7ofDqKIUmbPrddbYuOs/s1600/digg_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB4OI3tQC-xHvQsTcBD9DB-MXsZkAOGgi52btVqwVc0jjnDMupiWX4xbGxVxFQvSpX6kW55QHDbPPJKOFs1lltkRz9SWf7OSgsZUch66VBVcTH4zCM8YUZsShU_CYVFDCGmm6JIDe4Onw/s1600/facebook_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlRGqIQGN5Z1WzOkCE3MClY0qtzmfEpdbBTk2fUkbSUrGkWzL3lJX5dUCoBjkA4gbZJ3nDAYZ_gllGG0FzRS7B0TtogKzQGha9frQqVsLPnI5GTSltFQ1p9S2KukqeMjRiWwMCu77tq_Q/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-fY7n9IcrNRk-Nl-SCQpfbBSH9_EgFW6zzMVMDKCrDHs8j_Gme9XywJxB4f_YF1K7Ry76tw4EXYUyO-n7Roog2JVl2qGiuQu7vK6FvgzbolwSZHDCyj5naQvZ1MzbHTk6W8elR-IV5K8/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;
} 

Demikianlah Cara membuat share button tombol Berbagi model putar. semoga Bermanfaat.