Cara membuat Tombol Share Button Berputar

Kali ini shad akan berbagi sedikit mengenai Cara membuat Tombol Share Button Berputar seperti pada blog SHADACTIVITY ini.
bagi sobat blogger yang belum tau Cara membuat Tombol Share Button Berputar silahkan liat tutorial Cara membuat Tombol Share Button Berputar di bawah ini.

Bagaimana Cara membuat Tombol Share Button Berputar :
Langkah pertama
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='&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/ShadActivity' target='_blank' title='RSS'>RSS</a>

</div>

</b:if>

3.    Ganti  http://feeds.feedburner.com/ShadActivity 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/AVvXsEhmJdECaRQgt64b93MIUEBvY1PXMvg68xLknk6o2hINY94xnfAhepQW5CFzNkV6uBDeB1FsMZWUgMopbWbnvY94KkeZiQas6_DC5_a1kxql3qkZP-5JXMmIK4UxbtihEvsWnrBBEmjZW88/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWLP3EMGjRE5fKERObOnV6yrE7hsv009HARGYklPfr6ve6qdOJUE7tEeEkjKVaqZis3xxLu94DgRm8oOz7XkXx6wrdbuRubf0qw7NUiQkTpucoQv1rjZeb-Gp9gjjm6lau8sZ-8rNhbYk/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1oB0oewYdGO4dZq0tWgahBGtGX6Lm4drzHc0uCewnfQ5v8XL6ytA4fK3OyxkhSwRXFBP9KGYk7qB0rmu2Cm2NjMbzA57DS8JW8tMhl6MNleA1ysx5O1zWbcEamwrgobLQv8MdUGqsmO8/s1600/digg_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf5QIbPnrx6hHcZ7TZPAz4C0p9Ymh50Pz0oQC5R64xUbiBCOVnjpqECeYJ_2xkisGYlOu5Y2N5pWhMWwELUZAIfzseuP9Cuu60UpcbqgZmI4jIACpcipBiCUaV4vAkJwQe6tD0S0Oeqdg/s1600/facebook_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPG7ztXMFkp-Rjac9etZ-gKEUgRKDKBvzzccm7U0ETqRtfrJO-F2R8itGHZsx67EVD6IoY-lC1CEpxhwoUsmnrDl911Q4akyj0togRlcugB_qCLoDIn4VCE9JprvHPy_T6dYD4Ho2FROk/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMQOvHiKjljK5lVZ3fxMJsvtCyuXb67Mg-7o08OMdD8gehmN1ntYuZCPSmaBQv_ZDOx3xXE8j6ABDeaB7VDSy7TlNbyiB_ICeMMOeuqUxLOlfCzvDsbw-NdSvjCgoJbGtoPUAnT6LkU1E/s1600/stumbleupon_32.png'); }
.spinning_icons a:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    transition: transform 0.5s ease-out;
    -webkit-transition: -webkit-transform 0.5s ease-out;
        -moz-transition: -moz-transform 0.5s ease-out;
}

Demo nya bisa sobat lihat di blog SHADACTIVITY ini sendiri


sekian Cara membuat Tombol Share Button Berputar kalo ada yang belum berhasil silahkan tinggalkan komentar agar saya bisa koreksi Tombol Share Button yang anda buat.


Jangan lupa di like ya kalo artikel ini bermanfaat :)