Cara menambahkan widget tombol share button efek berputar
Tombol share button biasanya sering kita temui dalam sebuah blog. Kegunaan tombol tersebut ialah agar memudahkan pembaca blog kita untuk membagikan artikel yang telah kita posting. Dalam artikel saya yang ini, saya akan membagikan cara untuk membuat tombol share button yang ketika pointer mouse diarahkan ke salah satu tombol share tersebut maka akan berefek berputar.
Berikut caranya :
1. Masuk blogger.com > Template > Edit Html.
*sebaiknya anda download dulu template blog anda sebelum mengedit html agar jika ada kesalahan tidak akan fatal hasilnya.
2. Klik Ctrl + F lalu cari kode <data:post.body/>
3. Pastekan kode berikut di bawah kode <data:post.body/>
<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='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Delicious'>Delicious</a>
<a class='digg' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Digg'>Digg</a>
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Facebook'>Facebook</a>
<a class='stumbleupon' expr:href='"http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Stumbleupon'>Stumbleupon</a>
<a class='rss' href='http://feeds.feedburner.com/mbakmurti' target='_blank' title='RSS'>RSS</a>
</div>
</b:if>
*gantilah kode http://feeds.feedburner.com/mbakmurti dengan kode feedburner anda
4. Carilah kode ]]></b:skin> dengan Ctrl + F juga.
5. Kemudian pastekanlah kode berikut di atas kode ]]></b:skin> tadi.
.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/AVvXsEheYFUSK88xlXFAsIWQuIijVy9vm_ZAUSN9gF1m8eTnaPCY8boVSzlEYWgzHvNwcQ8GkDEtdC2TVUHdi8WzhbzhOmTHathRqBfewTwqO3b0gMe3TOZf1qaTzygtCCsNP0uJmwOQpjbONGo/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieojht3U32bK5qMKfDJzkAW6ocykudXzAdBCcjBDlDgyaNKWX_-SFcRnvJ-2Lz-HnsI6m04OXkbvaIfQxY7rOE3Qy7r8s1xfV9K8k37LqYIcgcWCMFy3ziGvw344QJrO7GWr0t2SqCXEU/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl2AobaEL7H-Dsv6EnzHCzVBfHb0Ajf8of8PrRUR636m49ClFr1bDnTxxVlcHAMGP9IJlKPS4WVQuj7rpqxKGKewbOlxJ3exDig6SeRA2XC323n3Rhyl5qeDffFVnsqgx0_1iQvBQT8CI/s1600/digg_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmqFNu1I98uBsSM33JkuaaVzqGeWOyn6rXQcFKP9E8kxes6Ww4KKkUriyTZp5xDZKZQ39kZzHlJ_LE9EabP_ltXjv-aaHIxezJ5Mhgbstc50zXZuwLeoGpRS3tdmIrGSDAqTVUWGchce4/s1600/facebook_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibV18GZqoK2BGYZSdEMP41iyu3oCAT8sT3oSksF6lqdhZFSrYGpfT4w8L5GFSznuXW6atFiO76K0iW0_g5PJpfSo1DKNpcnEHumKRR3HRrH-P1xTda5AuAxl67Kk0Qis51unLrEghQjZ4/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji4zxR8yEnzp0w3GYD48Q04ONeht02ZXxQFb-1eTdlnsx4OBzj8xRKNbd3CcwRbee-pbDuqGDkhIt-PS6LSxDQGw9Y63AjGTlcNCWBTkOnkApfij1aehUPCroCpGXtItU_mqzpOmUX-18/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 tips yang bisa saya berikan, semoga bermanfaat. Jika anda mengalami kesulitan dalam menerapkan kode tersebut maka berkomentarlah.
