memasang menu unik berputar dengan css3 pada Blogger

Selamat malam sahabat pucanglaban, apabila pada tutorial yang lalu saya sudah share artikel memasang menu unik lentur, maka pada kali ini saya akan share menu unik lainnya yaitu menu unik berputar dengan css3. Tutorial ini saya temukan di loefa-cebook ketika saya sedang networking. Pada dasarnya, menu unik berputar ini akan terbagi kedalam 3 kategori, sahabat pilih saja salah satu kategori tersebut. untuk melihatnya, klik 

Ok langsung saja ke TKP!!!!

log in ke blogger >> rancangan >> template >> editHTML.
selanjutnya, sahabat copy+paste kode css berikut ini pada tepat diatas penutup teg b:skin ]]></b:skin>.

1. Berputar 360 derajat saat Mouse over dan Mouse out :

/* LOEFA-SPIN */

p#loefa-spin img{

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

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

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

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

transition: all 0.3s ease-in-out;

}

p#loefa-spin img:hover{

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg);

}

kemudian, sahabat copy+paste kode html berikut di HTML javascript

/* LOEFA-SPIN */

<p id='loefa-spin'>

<a href='#'>

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTAb9q3FTfQugCI5HY_aQPdITRuqjK6XYCukd7hH_3V61gdTMRjzHvIpkgsAF7qg7CWfc9znA3Ekey-sQwygAk2QYFjY9BzWpOf4ljqRqEuNXFdLICoyM3FdbPIzeXy8wyjhsHCHdcgQ/s1600/a.png'/></a>

<a href='#'>

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigrJ-K3r2PSa2J7SxWskkyx2NLRGGGCvFP_AgaiPONsSYdsd-r4SjPww8v-cKy6DZxz5tOM4YKDCg5hwbthLqJYtOr712RoVN50dDx4iUSe9Hp93C0JoqQAg27q9KO3jPzIQDT24BH2g/s1600/b.png'/></a>

<a href='#'>

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo2XOKDEzY2SmnLkDK8RBD8wNjUTcg8pvej7WI95py2K_ggx7TiQVA7AgQLJjYPbh0Jl9egORBEJ6kJyhG3gk7uX9_Le4mVeyfDE5OXwySuY0vLzb5Nq3jKOHnT8U0HtjhACV81NjNog/s1600/c.png'/></a>

<a href='#'>

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipbmgR_RPcLaNN4kK35D7UuLAIqZ_Ttw3BoMAbD4fPexZccreszaZE2s_DCpCygaNzt3nx9eix8dI5aHQwtS2qNnPT6hMQfjynkG42Ut0WGMoWAMVW4ykEYsrXIgd6ZnZe9TAoXCixfg/s1600/d.png'/></a>

<a href='#'>

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH4QlRMba8Gj4eo_4LtfAed9ae_ps0ufvxN4cPVcW0WhxW95H-kZDT4S61rEEDSP2uY-gsi-uq27aMUxmzlbQZj-D42lj_XQJTizT_M6sbiqP3HttnpXTTDID3GV-ttCatTrljgnWR0A/s1600/e.png'/></a>

</p>

2.Berputar 60 derajat saat Mouse over dan Mouse out :

/* LOEFA-SPIN 2*/

p#loefa-spin2 img{

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

}

p#loefa-spin2 img:hover{

-moz-transform: rotate(70deg);

-webkit-transform: rotate(70deg);

-o-transform: rotate(70deg);

-ms-transform: rotate(70deg);

transform: rotate(70deg);

}

kemudian, sahabat copy+paste kode html berikut di HTML javascript

/* LOEFA-SPIN 2 */

<p id='loefa-spin2'>

<a href='#'>

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTAb9q3FTfQugCI5HY_aQPdITRuqjK6XYCukd7hH_3V61gdTMRjzHvIpkgsAF7qg7CWfc9znA3Ekey-sQwygAk2QYFjY9BzWpOf4ljqRqEuNXFdLICoyM3FdbPIzeXy8wyjhsHCHdcgQ/s1600/a.png'/></a>

<a href='#'>

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigrJ-K3r2PSa2J7SxWskkyx2NLRGGGCvFP_AgaiPONsSYdsd-r4SjPww8v-cKy6DZxz5tOM4YKDCg5hwbthLqJYtOr712RoVN50dDx4iUSe9Hp93C0JoqQAg27q9KO3jPzIQDT24BH2g/s1600/b.png'/></a>

<a href='#'>

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo2XOKDEzY2SmnLkDK8RBD8wNjUTcg8pvej7WI95py2K_ggx7TiQVA7AgQLJjYPbh0Jl9egORBEJ6kJyhG3gk7uX9_Le4mVeyfDE5OXwySuY0vLzb5Nq3jKOHnT8U0HtjhACV81NjNog/s1600/c.png'/></a>

<a href='#'>

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipbmgR_RPcLaNN4kK35D7UuLAIqZ_Ttw3BoMAbD4fPexZccreszaZE2s_DCpCygaNzt3nx9eix8dI5aHQwtS2qNnPT6hMQfjynkG42Ut0WGMoWAMVW4ykEYsrXIgd6ZnZe9TAoXCixfg/s1600/d.png'/></a>

<a href='#'>

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH4QlRMba8Gj4eo_4LtfAed9ae_ps0ufvxN4cPVcW0WhxW95H-kZDT4S61rEEDSP2uY-gsi-uq27aMUxmzlbQZj-D42lj_XQJTizT_M6sbiqP3HttnpXTTDID3GV-ttCatTrljgnWR0A/s1600/e.png'/></a>

</p>

3. Berputar -360 derajat hanya saat Mouse Over :

/* LOEFA-SPIN 3*/

p#loefa-spin3 img{

}

p#loefa-spin3 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);

}

kemudian, sahabat copy+paste kode html berikut di HTML javascript

/* LOEFA-SPIN 3*/

<p id='loefa-spin3'>

<a href='#'>

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTAb9q3FTfQugCI5HY_aQPdITRuqjK6XYCukd7hH_3V61gdTMRjzHvIpkgsAF7qg7CWfc9znA3Ekey-sQwygAk2QYFjY9BzWpOf4ljqRqEuNXFdLICoyM3FdbPIzeXy8wyjhsHCHdcgQ/s1600/a.png'/></a>

<a href='#'>

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigrJ-K3r2PSa2J7SxWskkyx2NLRGGGCvFP_AgaiPONsSYdsd-r4SjPww8v-cKy6DZxz5tOM4YKDCg5hwbthLqJYtOr712RoVN50dDx4iUSe9Hp93C0JoqQAg27q9KO3jPzIQDT24BH2g/s1600/b.png'/></a>

<a href='#'>

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo2XOKDEzY2SmnLkDK8RBD8wNjUTcg8pvej7WI95py2K_ggx7TiQVA7AgQLJjYPbh0Jl9egORBEJ6kJyhG3gk7uX9_Le4mVeyfDE5OXwySuY0vLzb5Nq3jKOHnT8U0HtjhACV81NjNog/s1600/c.png'/></a>

<a href='#'>

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipbmgR_RPcLaNN4kK35D7UuLAIqZ_Ttw3BoMAbD4fPexZccreszaZE2s_DCpCygaNzt3nx9eix8dI5aHQwtS2qNnPT6hMQfjynkG42Ut0WGMoWAMVW4ykEYsrXIgd6ZnZe9TAoXCixfg/s1600/d.png'/></a>

<a href='#'>

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH4QlRMba8Gj4eo_4LtfAed9ae_ps0ufvxN4cPVcW0WhxW95H-kZDT4S61rEEDSP2uY-gsi-uq27aMUxmzlbQZj-D42lj_XQJTizT_M6sbiqP3HttnpXTTDID3GV-ttCatTrljgnWR0A/s1600/e.png'/></a>

</p>

Untuk menggati gambar anda cukup mengganti setiap link-link gambarnya,contoh: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH4QlRMba8Gj4eo_4LtfAed9ae_ps0ufvxN4cPVcW0WhxW95H-kZDT4S61rEEDSP2uY-gsi-uq27aMUxmzlbQZj-D42lj_XQJTizT_M6sbiqP3HttnpXTTDID3GV-ttCatTrljgnWR0A/s1600/e.png , silahkan ganti sesuai keinginan anda, dan gambar dari saya itu berukuran 64x64 px, anda bisa merubahnya sesuai keinginan ada juga.

Dan untuk menambahkan link, anda cukup mengganti tanda pagar (#) dengan link tujuan. Contoh: href='http://loefa-cebook.blogspot.com'

oke selesai, tapi perlu diingat bahwa css ini hanya berjalan baik di Mozila Firefox. mohon maaf apabila ada salah kata, dan salah penulisannya, jika ada yang mau ditanyakan mengenai ini, silahkan berkomentar saja. salam.

selamat mencoba dan semoga bermanfaat.

pucanglaban.com informatif, kompetitif dan kreatif bersama berbagi ilmu dan pengetahuan.