Fixed Link!

Membuat Logo Header Berputar Ala Ridwan Hex

Membuat Logo Header Berputar Ala Ridwan Hex - Bagi sebagian atau keseluruhan blogger, template blog yang cantik tentu menjadi kepusan tersendiri, entah untuk menggaet visitor atau hanya sekedar mempercantik blog. Nah salah satunya saya akan share di postingan kali ini. yaitu tentang Cara Membuat Logo Header Berputar Ala Ridwan Hex.

Membuat Logo Header Berputar Ala Ridwan Hex
Membuat Logo Header Berputar Ala Ridwan Hex
Cara ini cukup simple, karena tutorial yang saya berikan tidak terlalu susah. Tahapan membuat header berputar saat disentuh cursor (Mouse) juga bisa dilakukan oleh seorang yang baru terjun ke dunia Blogging. Sebagai contohnya silahkan arahkan cursor mouse anda menuju ke header blog Ini:


Langsung Saja Simak Tutorialnya  :

  • cari kode <h1 class='title'> trus paste kode dibawah ini tepat dibawah kode tersebut.


<a href='/'><img class='logo' src='http://4.bp.blogspot.com/-RUtEfL4FWrk/UuOYQt1c_8I/AAAAAAAAAgg/d4gQwconxcs/s1600/1620547_263957580429362_917960090_a.jpg'/></a>

  • Terus Tambahin Kode CSS Dibawah ini Tepat diatas ]]></b:skin> Atau </style> Tergantung Template anda.

#header img{float: left;border: 3px solid rgba(255,255,255,0.4);border-radius: 50px;width: 8%;height: auto;display: block;margin: -9px;padding: 6px;margin-left: 2px;margin-right: 1px;}
#header:hover img{
-moz-transform: scale(1) rotate(-360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1) rotate(-360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(-360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(-360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(-360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transition: all 600ms ease-in-out;
-moz-transition: all 600ms ease-in-out;
-ms-transition: all 600ms ease-in-out;
-o-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}


  • Jika Sudah Simpan template anda. 

Sekian Artikel Membuat Logo Header Berputar Ala Ridwan Hex . 
Dan lihat jika ada Error atau tidak pas Diterapkan Di blog anda bisa komnetar dibawah. 

Berlanggan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan dari FajriAndaviar.

Comments+ 9 komentar:

avatar

wenak tapi takut loading lama
www.eko48.blogspot.com

avatar

emang di blog saya loadingnya lama gan ?

avatar

itu kalau menggunakan gambar , kalau teksnya yang berputar gimana Gan ??

avatar

Demonya mana mas? Kalau ndak ada demonya kan pengunjung jadi ndak tahu gimana maksud mas... :)

avatar

Apa cuma gue, yang gabisa ngeblok teksnya :v

avatar

Ganti aja img nya sama .title.

jadi #header:hover .title

avatar

Hahahah .. Maaf Om waktu itu soalnya saya masih pake sekarang udah enggak :boy:

avatar

Hahahahah Bnyak yang Copast sembarangan :D

Terima kasih atas komentar Anda

Sering Dikunjungi