Saturday, July 28, 2012

Tutorial : Drop Down Hover


Ok semalam ade re-quest macam mana nak buat drop down hover bila cursor sentuh macam Atin  . Nak buat boleh tapi code ni untuk blogskin je . Macam design punye atin tak tau lah macam mana codenye --' . Tapi tak pe lah atin try , disebabkan reQ , so terpaksa buat untuk design punye . 
Maaf codenye mesti korang rase terbelitkan . Banyak sangat codenye huhu >< 


Example

before:


 hover:





BLOGSKIN
 
 Dashboard > Template > Edit HTML
 Tekan Ctrl + f (serentak) dan cari code </stlye>
 Copy code dekat bawah ni

<style type="text/css">
.box {
width: 220px;
padding: 3px;
background:url(URL PIC);}
.box2 {
padding:3px;
display:block;
height:17px;
width:220px;
background:#fff;
-webkit-transition-duration:.8s;
-moz-transition-duration:.8s;
overflow:hidden;}
.box2:hover {height: 150px;}
h01{
font-family:Handlee;
padding-top:1px;
font-size:11px;
color:#000;
text-align:center;
text-transform :uppercase;
background: #FFD2DB;
letter-spacing:5px;
height:16px;
padding-left:1px;
display:block;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;}
h01:hover{
color:#fff;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;}
</style>
 Paste di bawah code </stlye> 

 Next, copy bawah ni pulak


<center>
<div class="box"><div class="box2"><h01>HOVER HERE</h01>
<div style="font-family:arial;font-size:10px;height:140px; overflow:auto;margin-top:3px;">
PUT YOUR MSG HERE !!
</table></center>
</div></div></div>

 Paste kat sideber , atau bahagian yg korang suka
 Preview and save =)



DESIGN

 Dashboard > Designer > Expand Widget Templates
 Tekan Ctrl + f (serentak) dan cari code bawah ni


/* Header
----------------------------------------------- */

 Dah? then copy code bawah ni

.box {
width: 220px;
padding: 3px;
background:url(URL PIC);}
.box2 {
padding:3px;
display:block;
height:17px;
width:220px;
background:#fff;
-webkit-transition-duration:.8s;
-moz-transition-duration:.8s;
overflow:hidden;}
.box2:hover {height: 150px;}
h01{
font-family:Handlee;
padding-top:1px;
font-size:11px;
color:#000;
text-align:center;
text-transform :uppercase;
background: #FFD2DB;
letter-spacing:5px;
height:16px;
padding-left:1px;
display:block;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;}
h01:hover{
color:#fff;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;}



 Paste di bawah code tadi

 Next , Design > add gadget > HTML/JavaScript
 Copy code bawah ni


<center>
<div class="box"><div class="box2"><h01>HOVER HERE</h01>
<div style="font-family:arial;font-size:10px;height:140px; overflow:auto;margin-top:3px;">
PUT YOUR MSG HERE !!</table></center>
</div></div></div>

 Paste kat dalam HTML/JavaScript
 Preview and save =)




hijau : lebar dan tinggi
biru : URL background luar
merah : code warna SINI
pink : tajuk
oren : mesej korang or letaklah apa2 yang korang nak


p/s : see? kan dah ckp codenye terbelit-belit . LOL ><


Credit : Afiqah

8 comments:

Sheda ucu said...

oke2 nant sheda try tenkiu comel hihi

umi mashitah said...

akak..kenapa say punya tak menjadi

Atin Tory said...

@umi : bahagian mn yang tak jadi tu ? i mean code mn?

Panda. said...

Akak, kenapa nak copy kod dalam tu xboleh ?

Atin Tory said...

@Panda : bole la dear ... tekan ctrl+c (serentak) OK ??

ira ♪♫♪ said...

Nape x menjadi...

Atin Tory said...

@ira : huhu.. blog awk x bolh terima coe tu kot -.-

Marha Amni said...

Thankssss