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!
Izin re-post
BalasHapusSilahkan!
Hapus