Press

SMK NEGERI 6 KOTA BEKASI

Flickr Images


Selasa, 27 November 2012

MEMBUAT SOCIAL ICON DENGAN GAMBAR BERPUTAR

Membuat Social Icon Dengan Gambar Berputar - Kali Ini Saya Mau Posting Tutorial Blog Lagi, Bagi Sobat Yang Belum Tahu Cara Membuat Social Icon Dengan Gambar Berputar Saya Akan Jelaskan Tutorialnya, Sebelum Ke Pembahasan Mari Kita Lihat Dulu Demonya Dibawah Ini ( Arahkan Pointer Mouse Sobat Ke Gambar Dibawah ) :


Icon Icon Icon

Gimana Sobat ?, Keren Kan ?
Gambar Itu Bisa Berputar Karna Efek Rotate Dari CSS

Berikut Tutorailnya :


  • Login Blogger
  • Tata Letak
  • Tambah Gadget
  • HTML/JavaScript
  • Copy Kode Dibawah, Lalu Paste Di Form HTML/JavaScript



<style type='text/css'>
/* 3D Social Icon by Monster Zila */
#social a:hover {background-color: transparent;opacity:0.7;}
#social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }
#social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
</style>
<center>

<div id="social">
<!--Start Rss Icon-->
<a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img src="http://icons.iconarchive.com/icons/graphics-vibe/media-pin-social/64/rss-feed-icon.png" alt="Icon"/></a>
<!--End Rss Icon-->
<!--Start Facebook Icon-->
<a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img src="http://icons.iconarchive.com/icons/graphics-vibe/media-pin-social/64/facebook-icon.png" alt="Icon"/></a>
<!--End Facebook Icon-->
<!--Start Twitter Icon-->
<a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img src="http://icons.iconarchive.com/icons/graphics-vibe/media-pin-social/64/twitter-icon.png" alt="Icon"/></a>
<!--End Twitter Icon-->
<!--Start Google+ Icon-->
<a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img src="http://icons.iconarchive.com/icons/graphics-vibe/media-pin-social/64/google-icon.png"/></a>
<!--End Google+ Icon-->
</center>

Keterangan !!! :
Ganti Kode Dibawah :
YOUR-FEED-URL-HERE Dengan URL Feed Blog Sobat
YOUR-FACEBOOK-PAGE-URL-HERE Dengan URL Facebook Sobat
YOUR-TWITTER-URL-HERE Dengan URL Twitter Sobat
YOUR-GOOGLE-PLUS-URL-HERE Dengan URL G+ Sobat


  • Simpan Gadget

0 komentar:

Poskan Komentar

Bhakti Alumni SMKN 6 Kota Bekasi