Artikel Terkini

Minggu, 09 Februari 2014

Membuat Logo Header Berputar Ala Ridwan Hex

0 komentar
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. 

Leave a Reply

Diberdayakan oleh Blogger.