March 15, 2013

Membuat Social Network Icon Dengan Efek Berputar

Selamat sore sob...

Gimana kabarnya hari ini??? Semoga sehat selalu...

Ok, pada kesempatan kali ini saya ingin berbagi cara membuat efek berputar pada icon-icon social network saat disorot mouse, seperti facebook, twitter, dan kawan-kawannya, hehehe...

Untuk penampakannya kurang lebih seperti berikut :




Nah, kalo temen-temen tertarik, silahkan ikuti PBL (Praktek Blogging Lapangan) berikut :

1. Login ke blogger.

2. Pilih Tata Letak - Tambahkan Gadget - HTML/Javascript.

3. Masukkan kode berikut :

<style>

p#aiizahh_socialnetworkicon img {
 /* Social Network Widget By http://aiizahh.blogspot.com */
    -moz-transition: all 0.9s ease-in-out;
    -webkit-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}

p#aiizahh_socialnetworkicon img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

/* Social Network Widget By http://aiizahh.blogspot.com */

</style>


<center><p id="aiizahh_socialnetworkicon">
<a href="http://twitter.com/USERNAME"' target='_blank'>
<img border="0" src="http://4.bp.blogspot.com/-UHTXhLlnAM4/URV01PYeT8I/AAAAAAAACVY/GNfBcx1tgsY/s000/twitter.png' title='Twitter" /></a>
<a href="http://www.facebook.com/USERNAME"' target='_blank'>
<img border="0" src="http://1.bp.blogspot.com/-pfdCr67N0vY/URV01_6rbJI/AAAAAAAACVg/n_vDeB55BIE/s000/facebook.png' title='Facebook" /></a>
<a href="https://plus.google.com/USERNAME"' target='_blank'>
<img border="0" src="http://3.bp.blogspot.com/-lodPYWKzSs8/URV02Sr-jWI/AAAAAAAACVo/oAhkSrXW_qU/s000/gplus.png' title='Google Plus" /></a>
<a href="http://www.linkedin.com/USERNAME"' target='_blank'>
<img border="0" src="http://3.bp.blogspot.com/-_aFcLmXOmWA/URV02yUDxCI/AAAAAAAACVw/iKGHV_pzIVU/s000/linkedin.png' title='LinkedIn" /></a>
<a href="http://URL BLOG/feeds/posts/default"' target='_blank'>
<img border="0" src="http://4.bp.blogspot.com/-DG0bPhhycRU/URV03kQ819I/AAAAAAAACV0/PPkxhtfMJZI/s000/rss.png" /></a>
<a href="mailto:USERNAME@gmail.com"' target='_blank'>
<img border="0" src="http://4.bp.blogspot.com/-xYeZT1Ckroo/URV04QBRScI/AAAAAAAACV8/Mzc6lTDySpQ/s000/email.png' title='Email" /></a>
</p></center>

4. Simpan.


5. Enjoy.

*Keterangan : Ganti kode berwarna biru sesuai Username dan URL milik temen-temen...

Gimana sob???sudah jadi icon social networknya dengan efek berputar...
kalo gagal, berarti ada yang salah dengan kode yang agan masukkan....

Terima kasih ya semoga bermanfaat dan jangan lupa meninggalkan komentar....

Catatan Kecil Alya Zahra :

Artikel Membuat Social Network Icon Dengan Efek Berputar, diproduksi di Indonesia oleh Alya Zahra on March 15, 2013. Semoga artikel ini bermanfaat bagi Anda dan jangan lupa untuk meninggalkan komentar, jejak kaki, dan juga salam tempel. Alya Zahra adalah seorang penggiat blog yang cerdas, cantik, imut, sederhana, dan bersahabat, serta selalu rajin beribadah dan taat kepada kedua orang tua, meskipun Alya Zahra saat ini masih duduk di bangku Taman Kanak-Kanak.

Enter your email address:

Delivered by FeedBurner

OK

0 comments:

Post a Comment

Silahkan berkomentar yang bijak dan santun, serta tidak hanya bertujuan spam.

Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA </i>

Terima kasih atas komentar anda. Semoga informasi yang ada di blog ini bermanfaat.

haii pleased huhhh dad shake wat2 order happy cheer spoiled


Konversi Kode HTML

 
scrolltotop