Sabtu, 16 Juni 2012

Cara Membuat Spinning Social Media Icon Dengan CSS3


By on 20.12

Blazer Blog, CSS3 - Spinning Social Media Icon, disini saya akan membahas bagaimana cara membuat sebuah widget social media dengan icon ditambah saat pointer mouse diarahkan ke icon tersebut, icon tersebut akan memutar.


Cara membuat :
1. Login ke blog kamu.
2. Pilih Rancangan > Edit HTML > Expand Widget Template > Cari kode ]]></b:skin>
3. Setelah ketemu, letakan kode di bawah ini tepat di atas kode yang dicetak tebal tadi.
/* Spinning Social Media Icons by blazerracing.blogspot.com */
.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;
}
.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;
}
.twitter{ background:url('http://1.bp.blogspot.com/-mxUHRwVg-0g/TzvZYtAEyrI/AAAAAAAACts/f7_QxX03c9k/s1600/twitter_32.png'); }
.delicious{ background:url('http://1.bp.blogspot.com/-fxvge7IVP_0/TzvZTJdLHGI/AAAAAAAACs4/W_1mS4jVBw8/s1600/delicious_32.png'); }
.digg{ background:url('http://2.bp.blogspot.com/-ooYCSeCOB5I/TzvZTy7y41I/AAAAAAAACs8/4yuBMS3tUPA/s1600/digg_32.png'); }
.dribbble{ background:url('http://1.bp.blogspot.com/-iao_fkdnI8g/TzvZUimv-dI/AAAAAAAACtE/byoo1PMhHBk/s1600/dribbble_32.png'); }
.email{ background:url('http://4.bp.blogspot.com/-lXL2ZEpOcDw/Tzvlb5LTRCI/AAAAAAAACuA/oQXdvFvkw-o/s1600/email_32.png'); }
.facebook{ background:url('http://3.bp.blogspot.com/-TScBRGxU9Lc/Tzvlcv90XGI/AAAAAAAACuE/chFHrMti4HA/s1600/facebook_32.png'); }
.flickr{ background:url('http://3.bp.blogspot.com/-7q2TEZOQAlQ/TzvZVODOJlI/AAAAAAAACtQ/88_OWjHPLpU/s1600/flickr_32.png'); }
.foursquare{ background:url('http://2.bp.blogspot.com/-v1z2OwMbP3k/TzvZW4cXJ7I/AAAAAAAACtU/a0gu5lX-Vsg/s1600/foursquare_32.png'); }
.linkedin{ background:url('http://1.bp.blogspot.com/-4NFlcfudgWg/TzvZXZcmSbI/AAAAAAAACtc/7mn2HcWX00g/s1600/linkedin_32.png'); }
.rss{ background:url('http://4.bp.blogspot.com/-F61pBeMGnlI/TzvldKuhfeI/AAAAAAAACuQ/frfzGvY6X8s/s1600/rss_32.png'); }
.stumbleupon{ background:url('http://3.bp.blogspot.com/-rPU_iNN7Wk8/TzvZYPlQLPI/AAAAAAAACtk/LT-XQiVJZpY/s1600/stumbleupon_32.png'); }
.youtube{ background:url('http://4.bp.blogspot.com/-zJVHywcJLgQ/TzvZZfljGUI/AAAAAAAACt0/jKrO2ijfC3c/s1600/youtube_32.png'); }
/* Spinning Social Media Icons by blazerracing.blogspot.com */
Jangan Edit kode di atas atau ga akan bekerja.

4. Selanjutnya cari kode <div class='post-footer'> jika tidak ada cari kode <data:post.body/> setelah ketemu letakan kode di bawah ini tepat di bawah kode yang di vetak tebal.
<!--Start Social Media Icons from blazerracing.blogspot.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class="spinning_icons">
<a href="http://www.twitter.com/social profile" class="twitter" title="twitter">Twitter</a>
<a href="http://www.delicious.com/social profile" class="delicious" title="delicious">Delicious</a>
<a href="http://www.digg.com/social profile" class="digg" title="digg">Digg</a>
<a href="http://wwww.dribbble.com/social profile" class="dribbble" title="dribbble">Dribbble</a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=social profile" class="email" title="email">Email</a>
<a href="https://www.facebook.com/social profile" class="facebook" title="facebook">Facebook</a>
<a href="http://www.flickr.com/social profile" class="flickr" title="flickr">Flickr</a>
<a href="https://foursquare.com/social profile" class="foursquare" title="foursquare">Foursquare</a>
<a href="http://in.linkedin.com/social profile" class="linkedin" title="linkedin">Linkedin</a>
<a href="http://feeds.feedburner.com/social profile" class="rss" title="rss">RSS</a>
<a href="http://www.stumbleupon.com/social profile" class="stumbleupon" title="stumbleupon">Stumbleupon</a>
<a href="http://www.youtube.com/social profile" class="youtube" title="youtube">YouTube</a>
</div>
</b:if>
<!-- End Social Media Icons from blazerracing.blogspot.com -->
Ganti kata Social profile dengan username dari masing-masing social media, jika ada salah satu belum punya kosongkan saja, tapi kalau untuk Facebook dan Twitter pasti sudah punya.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

2 komentar:

  1. kok gg bsa gan dah gw cba!!!

    BalasHapus
  2. Kok ga bisa gan coba cek lagi, saya udah di cek dan berhasil.

    BalasHapus