Kamis, 14 Desember 2017

(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!