14/12/17

(Special 30 Followers) Tutorial Membuat Header dengan Efek Berputar

Hi guys! Di tutorial ke 19 ini, ada cara membuat header blog kita bisa berputar-putar (kalau diarahkan kursor ke sana) . Ya, gak mungkin gerak-gerak sendiri, lah. Itu sih namanya horror. Em... udah deh basa-basinya, langsung aja!
Credit: Aiz

  • Masuk akun blog
  • Dashboard
  • Tata Letak >> Tambahkan Gadget >> HTML/JavaScript
  • copas code di bawah ini:

<style>
.mirai{
width:60px;height:40px;
box-shadow:0px 0px 2px 3px #F7C5BF;
background:#F7C5BF;
width:400px;
height:300px;
color:#888888;
display:inline-block;
-moz-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;
padding: 10px;
display:inline-block;
border-radius: 200px;
}
.mirai:hover{
background:#FFFFFF;
color:#777;
-webkit-transform: rotate(-186deg) ;
-moz-transform: rotate(-186deg) ;
-o-transform: rotate(-186deg) ;
-ms-transform: rotate(-186deg) ;
}
.kuriyama {
background:transparent;
color:#F7C5BF;
font-family: Dancing Script;
font-size:100px;
text-transform:lowercase;
padding:5px;
margin-bottom:0px;
}
</style>
<center>
<img class="mirai" src="https://pm1.narvii.com/6237/9c48fb1660223eb77a0aca49dbcacf2b89bc7459_hq.jpg"/></center>
<br />
<center><div class="kuriyama"/>Aiz Tutobies</div></center>

Edit sesuai keinginan, lalu save
Masih bingung? Tanya di komentar aja!

2 komentar:

1. Jangan gunakan kata-kata kotor atau porno!
2. Jangan mempromosikan barang di komentar!
3. Komentar harus berhubungan dengan pos!

Judulnya Apa Ya?

  CUY!  Kangen ngeblog ah elah, pengen ngaktifin blog ini lagi tapi sy timbang-timbang dlu dah (emote cry), soalnya saya sibuk banget!  buat...