Home Owner Affies Stuffs Themes


May 20, 2015

Hover Box #1






Halo.... aku kembali aktif, nih! Hehehe....... abis aja UN selesai. Jadi bisa on lagi! Kali ini, aku mau penuhi req dari Gifta.

Sebenarnya itu adalah hover box yang aku pakai untuk rules cbox. Jadi multifungsi ya, hehe.... bisa buat rules blog, status, rules cbox (kayak aku XD), dll. Oke langsung aja ya men-temen!



  • Log In Blogger
  • Designer -> Layout -> HTML/JavaScript (Kalau untuk rules cbox maka cari letak kode cbox kalian yaa)
  • Classic -> Template -> Taruh di mana-mana aja boleh yaa yang penting di sidebar.
  • Copy kode ini :

<center>
<style type="text/css">
.box {
width: 235px;
padding: 10px;
background:#eee;}
.box2 {
padding:3px;
display:block;
height:17px;
width:225px;
background:#fff;
-webkit-transition-duration:.8s;
-moz-transition-duration:.8s;
overflow:hidden;}
.box2:hover {height: 150px;}
h01{
font-family:Century Gothic;
padding-top:1px;
font-size:12px;
color:#000;
text-align:center;
text-transform :uppercase;
background: #aaa;
letter-spacing:5px;
height:16px;
padding-left:6px;
display:block;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
border-radius:5px;}
</style>
<div class="box"><div class="box2"><h01>Your Title</h01>
<div style="font-family:Century Gothic;font-size:10px;height:130px; overflow:auto;margin-top:3px;">
Your Content Here</div></div></div>
<br />
</center>


  •  Hijau : Width hover box kalian.
  • Biru : Warna background box-nya. Bisa juga diganti dengan pattern dengan cara mengganti kode background:#eee; dengan :
background:url(URL BG);

  • Merah : Width box yang berada di dalam. Eits, tapi ini harus disesuaikan dengan width box yang diluar. Jarak besarnya 10px. Contoh kalau width yang diluar 225px, maka yang di dalam 215px. Mengerti nggak?? :o 
  • Ungu : Warna tulisan judul hover box-nya.
  • Oranye : Warna background judul hover box-nya.
  • Italic : Judul Hover Box.
  • Bold : Konten dari hover box.
  • Save and.... Done!!
Semoga manfaat ya... terima kasih!
Cr : Kak Afiqah


Thanks For Reading..... Leave Your Comments ^_^



No comments:

Post a Comment

Just Comment Here! I'm not a Wolf...