Tombol berbagi yang Ane bagi sekarang cukup keren, ketika pointer mouse diarahkan ke tombol tersebut ia akan memutar 360 derajat.
Share Button Efek Berputar
Berikut adalah cara untuk menambahkan tombol berbagi dengan efek berputar ke blog Blogger Anda:
1. Login ke blogger> Desain> Edit HTML> Expand Widget Templates. Cari kode berikut pada template Anda: (ctrl + f) : <data:post.body/>
2. Tepat di bawahnya tambahkan kode berikut ini:
1. Login ke blogger> Desain> Edit HTML> Expand Widget Templates. 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='"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/blogbelajar2' target='_blank' title='RSS'>RSS</a></div></b:if>3. Ganti http://feeds.feedburner.com/blogbelajar2 dengan username feedburner Anda, kemudian cari kode ini:
]]></b:skin>4. Tepat di atas kode tersebut di atas 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/AVvXsEgfz0fvGmcZWEoyU0WC8TRCJxqTQE86aDHfpMI27qnE5hwZXSv4j6HyfKswWl2PNo5JZ0hLueLlPsO3hdeMllHERBSdHJP0Q1l4U9gNcSGwOc8MBqGBAND-9QMoKjhYnzMn76IAlQbZ25Y/s1600/twitter_32.png'); }.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmN-lbMtbNYrHyXk_wngRqSUdUIjWJjpetQN5Rz7oxavpkj3P_2h8-DEv05A7fnDEzlVPiPLcEPK04BO7AKY_i8_7GhRpZadv_YQLPSIW7m5rSG8VAFbmp5Px8Cq6q6KOJRvq30GCCaSc/s1600/delicious_32.png'); }.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIodcqUMBo1fKfun2QC3AEUf7F1zSYRdwekyIMwo8o7bgEiNwuyqlrcQvIjKqpYiaPjR5df2YJzc88oHiFMvvJnQ1Wirt0j-vP7EB4OAkDAAJLLN8UhvktaWq5dd5ii7JDTaX2r0QoqFw/s1600/digg_32.png'); }.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5vORPnZPwXvJQSz9bHZoO74dSCa4n0WgEkMXW-e-EWxPDYijlpvXW8feX8XgGgBVHVN5xjqpxXvVFPyP4Xr1_19aWr9Os5dujYi0sFPt1DEpXFAE6JpXs42SXOU2R1lKRHxH-1Du3CM0/s1600/facebook_32.png'); }.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIvMJt7QEZ4ZBNtj5Z3a7yKaJSR5_DXoOUSoDdXzr2YAOuKkCIHlWM38zH8fFQE9rZiN-SYPQmIK0fv7V81wlcY79OjNCK7ckssB3zpkBwyOadBbuKK4B0nymz0QoBvNZlR2EP71ms4cg/s1600/rss_32.png'); }.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1fE603iXZZvMdgm2dA-XTzedqD-Q6AqXp9QFw1cCXfdYwrARIwgwyCAGjJ9XoXsVGIpHVKvZpnc6WGkLVZOVCzxqksFazdHbycFObIjo_N1ZfU_kg8B9nKzyskVLa08ExDWzkh_OoMX0/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;}Untuk demonya silakan sobat buka di sini
5. Sebelum menyimpan klik pratinjau dulu, jika error berarti ada kesalahan. Jika bagus simpan template dan tombol berbagi dengan efek berputar Anda sudah jadi. Selamat Mencoba.
0 komentar:
Posting Komentar
WARNING
Komentar Anda Tidak Boleh Mengandung Unsur
1. penghinaan
2. spam komen
3. link aktif atau text anchor dan sejenisnya
4. berkomentar tanpa unsur sara, pornografi, atau kata-kata tidak baik lainnya ya :)
Jika kamu memiliki pertanyaan atau tanggapan mengenai artikel ini, silahkan tinggalkan komentar kamu disini !