Widget Share Spinning Berputar

Widget Share Spinning Dengan CSS - Kali Ini Saya Akan Posting Tentang Widget Share Spinning, Sebenernya Sudah Ribuan Widget Share Social Yang Ada, Tapi Kebanyakan Pakai JavaScript, Tapi Sekarang Sobat Tidak Usah Bingung Lagi Karena  Share Tutorialnya

Widget Share Spinning Ini Ringan Dan Fast Loading Karena Hanya Menggunakan CSS, Images Dan HTML

Demo

      

Bagaimana ?, Menarik Kan ?
Berikut Tutorialnya :

• Login Blogger
• Klik Template
• Edit HTML
• Cari Kode  <data:post.body/>
• Copy Kode Dibawah, Kemudian Taruh Dibawah Kode  <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<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(360deg);

   -webkit-transform: rotate(-360deg);

   -o-transform: rotate(-360deg);

   -ms-transform: rotate(-360deg);

transform: rotate(-360deg);}

</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='http://1.bp.blogspot.com/-ol6vM16wlA8/UExXvhfRyRI/AAAAAAAAAOY/GadwDGdUteU/s1600/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='http://2.bp.blogspot.com/-NvtmaRUy-vc/UExXu11rG4I/AAAAAAAAAOE/7-yMkh0TyJQ/s1600/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='http://3.bp.blogspot.com/-ygGIyb8t7P0/UExXwTFjgUI/AAAAAAAAAO0/oHSSckE4tpw/s1600/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='http://2.bp.blogspot.com/-PfT1YSSroJY/UExXvZMMQQI/AAAAAAAAAOQ/bmyQitwObBU/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='http://4.bp.blogspot.com/-ofw_9GjmIAA/UExXu-ZhT9I/AAAAAAAAAOI/YvLdIYakHZs/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='http://2.bp.blogspot.com/-oa5oDtmljaY/UExXvx5JH3I/AAAAAAAAAOk/2idhxCKLkP4/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='http://1.bp.blogspot.com/-HqPMcsCVvQs/UExXwFXCRsI/AAAAAAAAAOo/v0G5s2XlqHQ/s1600/technorati.png'/></a></p>

</center>

</b:if> 

Keterangan :
Bagi Yang Menggunakan Readmore Otomatis Ada 2 Kode <data:post.body/> , Maka Pilihlah Kode <data:post.body/> Di Template Sobat Yang Terakhir / Ke-2

• Simpan Template

Silahkan Cek / Buka Salah Satu Posting Sobat, Kalau Belum Muncul Coba Kodenya Ditaruh Di <data:post.body/> Yang Pertama / Terakhir