Membuat Efek Spinning Pada Icons Social Bookmark Dengan CSS3 -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Membuat Efek Spinning Pada Icons Social Bookmark Dengan CSS3, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel Blogger Tutorials, Artikel Blogger Widgets, Artikel CSS3, Artikel Sosial Bookmarking, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Membuat Efek Spinning Pada Icons Social Bookmark Dengan CSS3
link : Membuat Efek Spinning Pada Icons Social Bookmark Dengan CSS3
Gambar dibawah ini

Membuat Efek Spinning Pada Icons Social Bookmark Dengan CSS3

Tutorial kali ini kita akan belajar membuat efek spinning pada icons social bookmark dengan bantuan CSS3 transform. Efek spining adalah efek berputar pada icons apabila disorot crusor pointer. Efek ini dapat pula anda terapkan pada image avatar blogger comments, thumbnail pada widget recent posts perlabel atau popular posts seperti pada blog ini. Untuk lebih jelasnya silahkan lihat demo disidebar blog ini:

View Demo

 

Baiklah sekarang cara membuat efek spinning pada icons social bookmark

Langkah Pertama

• Login ke akun anda
• Pada dasbor>> klik template>> edit HTML
• Cari kode ]]></b:skin> lalu Salin dan tempel CSS berikut tepat diatasnya ]]></b:skin>

div#socialicons1 img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */

-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;

}

div#socialicons1 img:hover{

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg);

}

div#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */

-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;

}

div#socialicons2 img:hover{

-moz-transform: rotate(70deg);

-webkit-transform: rotate(70deg);

-o-transform: rotate(70deg);

-ms-transform: rotate(70deg);

transform: rotate(70deg);

}

div#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */

}

div#socialicons3 img:hover{

-moz-transition: all 0.5s ease-in-out;

-webkit-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

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

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

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

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

transform: rotate(-360deg); }

• Simpan template

Langkah Kedua

• Pada dasbor masuk ke menu tataletak>> klik tambah gadget>> pilih HTML/JavaScript
• Sekarang salin dan tempel kode berikut pada form yang tersedia dan beri judul yang anda inginkan

<div id="socialicons1"> <!-- angka 1 bisa dirubah dengan angka 2 atau 3 untuk model yg berbeda -->

<a href="http://urlanda.com/RSS"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlPQA7SKIRNjxxRGi1CXoR54l-HThmM7KAFAVZXdBYD3PWv0HncRsmDtlPaoJdYVFiIliMF0Ge6q3fCLObyuK27MWEyXoVPH1izKjiIFvz24ixqLfiQvrgpHGwOvLLhDEuUk65ndYf7arW/s1600/rss.png" /></a> <a href="http://www.delicious.com/delicious-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCq-V1TiB1sKcKm1NZPJjsagDcEw28u6gTeoTFdfWb92G-UtHAGUjbo12cZ4Dr11MHvlGL5_vwajJ0fQPDpFmudCW9EQDw952zOYO7QhpcMWdQ65P2RBDrP-R39qcVScVs9DpEsW3nIMqQ/s1600/delicious.png" /></a> <a href="http://www.facebook.com/FB-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj46WlVEDckT-i6Tj3n0FEastkxNT9-3OdwIMIxpEit218wb_Uy1ximcy4x7ZwCQwIm6ouRHbJ9DDYklgzSBAx8OrJ7X1dVOdzqHwxioAcud3_oO9wJsECUyjQG6hiwLX0ktdtOVQQAdZqC/s1600/facebook.png" /></a> <a href="http://www.twitter.com/twitter-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil-E6Ir-PTCd4in4jW4asVn8frCabeZOdiZ95HQrInWamKlvTkFTZzp2KyYMw5vQN8qzuARrYn0_4le8_e_wCjfuHQciRwO7Vo1pRwnKIP4JRT8J3H9Mtr6QggVoT6mcNAz4RDN-IDkYsN/s1600/twitter.png" /></a> <a href="http://www.yahoo.com/ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZTyQToC7J9uXxvX6L4kk83g7k5aTQMCZmu1hhSTjACXUkk-R_rXvfCowpLngWohHBblZMW9NypK6zozE4uYkfAu7wayn56jnIH_a-KLAypvkAxOQUiHyiM5tCOc1C3-AKrIj9w3oW3ItH/s1600/yahoo.png" /></a></div>

<div class="clear">

</div>

• Simpan dan lihat hasilnya diblog anda

Model dan Penyesuaian :

• Mengganti model diatas ada 3 pilihan model ganti saja <div id="socialicons1"> dengan angka misalnyasocialicons2 atau socialicons3

Original Resourece: Dynamicdrive.Com 

Demikianlah Artikel Membuat Efek Spinning Pada Icons Social Bookmark Dengan CSS3

Sekianlah artikel Membuat Efek Spinning Pada Icons Social Bookmark Dengan CSS3 kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Membuat Efek Spinning Pada Icons Social Bookmark Dengan CSS3 dengan alamat link https://trikmitos.blogspot.com/2012/06/membuat-efek-spinning-pada-icons-social.html