Cara Membuat Widget Social Sharing Berputar di Bawah Postingan

Di postingan saya kali ini saya akan menjelaskan tentang bagaimana caranya membuat widget sosial bookmark berputar. Memang sebelumnya saya sudah pernah kasih tahu caranya beberapa waktu yang lalu. Bisa kalian lihat di bawah ini :

1. Widget Social Bookmark 3D yang bisa berputar

2. WIdget Social Bookmark Yang Bisa Berputar

Dengan memasang widget ini tentunya akan menambah trafik pengunjung blog kamu loh, karena para pembaca yang membaca postingan kamu dan tertarik untuk membagikannya di media sosial seperti facebook ataupun twitter. Sehingga pengunjung lainnya pun datang deh. Oke langsung saja lihat caranya di bawah ini :

1. Login ke Blogger.com

2. Klik Template --> Back Up template Terlebih dahulu, lihat caranya disini

3. Masih di bagian Template, Klik Edit HTML --> Klik lagi Lanjutkan --> Centang "Expand Widget Template".

4. Cari kode   <div class='post-footer-line post-footer-line-1'/>, gunakan CTRL + F untuk memudahkan pencarian.

5. Salin kode CSS di bawah ini dan letakkan diatas kode <div class='post-footer-line post-footer-line-1'/>.

<b:if cond='data:blog.pageType == "item"'>
<style>
p#socialicons img {    -moz-transition: all 0.2s ease-in-out;    -webkit-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;} p#socialicons img:hover {    -moz-transform: rotate(70deg);    -webkit-transform: rotate(70deg);    -o-transform: rotate(70deg);    -ms-transform: rotate(70deg);    transform: rotate(70deg);}
</style>
<center><p id='socialicons'>
<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img border='0' src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzPJ-dZUPeSetePi5d7tP8Vq6XXOsJUupa_53shqFsrycXJgfOAxQQDhqe9C5hYLpb7HY_gbieJDbRwuZgZaHirOzpFHZZhqoqhGVd1k0X4m1YUDy48B5_6_Sw_ryaPth8x-EmlUs1HkU/s1600/hzndi.blogspot.com-google_plus.png'/></a>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjht4Mm38VVVTNm6ihrnMO-N0sFmbTw3GOcgObkvVCMFgGp4sP9Y2GLZPRRR7S72vLSYdT-d-VYyCHjKW6e-mb-IXigyEXZ1wOvH1mCdypRK4zu408Lr73Guafv4S1SID-RNPC_vm-crF0/s1600/hzndi.blogspot.com-facebook.png'/></a>
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi91xRtwC5idOl7heHD1sEfSBx15gwpDeFDBL_rJIOYLvApTCpkUMhbkUeVhWKRf5FPVIr7Afy04En6ZB7xD2mdnr6n39b43otIjCU-hXePEElBB7WiWXEBWNDJ5c3bjwFuPUvTVBUGHE/s1600/hzndi.blogspot.com-twitter.png'/></a>      
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSzW7VjjGMvKoI88RBnG8ptMieGI24G0p7p4ARvGis_UxDF6hGo8VgaDoCMv-3CbUl59NDrAomtC9WOk3DsDCEFwbK0NHMcLLs2AXHu9ZISz1rOFA18bWOaU0xDAQXAAh5jU9DVJIecvHR/s1600/digg.png'/></a>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxm71QgbunQw1EEOPiBv873rvccK0BqUpC5VUjQfb7eJHtUIouJKu6_03t7os7s6CuWKOWtuWdQ0oj5lkUm5riDGpsz_bPK6LKPScAL2BfCebl1iGLslTTuq1zrzFHTb-9RMp5E2frRY7/s1600/delicious.png'/></a>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4BwyTFCHD6tqNosKfdrTFR_GpbB9AgVhw73kH9w6UcaRvoZ1TN5s8OUo5O8cPQje_rysRXQFbXOvQijSVWZGXiGs4SXDehs5jcuqtodWA3irAjVyApPnCqYrcfY6FCCtqAga4-cM_1Ay-/s1600/stumbleupon.png'/></a>
<a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG6F_hwHa37ubHpEJBOzb9iAW0a4TN2GNc6OuRUo10oBW-bxVfY3s-lYr5JVFGncKLtt8hyphenhyphenCpQ4mBegSSJkrgJoEdNK1nw5C6oImd-FHoySQP0bBUEadLSRWw_lYXytLCRV6GTQ0k0sxEO/s1600/technorati.png'/></a></p></center><p style='display:none;'>Spinning icons by <a href='http://www.hzndi.blogspot.com'>Tutorial Blog dan SEO</a></p></b:if> 

6. Simpan Template

Postingan Terkait:

Posted in: Blogger,Social Bookmarking,Social Sharing