Hafiz Zulkafly

Tutorial : Opacity Navigation

Monday, July 23, 2012

Assalamualaikum

Annyeong o/ . lol . update tutor sebab tengah ada mood . hehe ^^ . okay tutor ni ada orang request dekat twitter. terima kasih sudi request . berupdate jugak lah blog ni . okay opacity navigation tuh macam mana ? berminat ? meh sini nak share ilmu :)


UNTUK PENGGUNA BLOGSKINS

1. Dashboard > Template > Edit HTML .

Copy code ni , paste dekat ATAS </style>


#chanyeol{
background-image: url('http://i.imgur.com/sKEY0.gif');
width:200px;
border:5px solid #444;
}
#sehun {
background:#fff ;
font-size:10px;
color:black;
font-family:trebuchet ms;
text-align:justify;
padding:3px;
width:195px;
height:180px;
opacity:0.00;
-webkit-transition:1300ms;
}
#sehun:hover {
opacity:1;
-webkit-transition:1300ms;
}

*untuk background-image tuh , aku sarankan korang pakai gambar yang beresolution 200X200 . kalau tak die tak jadi and takkan muat


2. Copy code bawah ni pulak paste dekat mana section yang korang nak . code ni terpulang korang nak paste dekat mana .


<div id="chanyeol">
<div id="sehun">
CODE NAVIGATION OR YOUR FOREWORD !
</div>
</div>

3. Save . SIAP .

UNTUK PENGGUNA SIMPLE TEMPLATE

1. Dashboard > Design > Edit HTML

Copy code bawah ni , paste dekat ATAS

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


#chanyeol{
background-image: url('http://i.imgur.com/sKEY0.gif');
width:200px;
border:5px solid #444;
}
#sehun {
background:#fff ;
font-size:10px;
color:black;
font-family:trebuchet ms;
text-align:justify;
padding:3px;
width:195px;
height:180px;
opacity:0.00;
-webkit-transition:1300ms;
}
#sehun:hover {
opacity:1;
-webkit-transition:1300ms;
}

2. Save. then pergi pulak dekat Dashboard > Design > Page Element > Add a Gadget > HTML/JavaScript .

copy and paste code ni dekat dalam gadget tu .


<div id="chanyeol">
<div id="sehun">
CODE NAVIGATION OR YOUR FOREWORD !
</div>
</div>

3. Save and siap :)

*mana mana code yang di bold kan tuh . boleh tukar ikut suka korang :)

ce tengok , jadi tak ? insyaallah aku rasa kalau korang ikut betul betul tutor ni mesti jadi . hehe . kalau tak jadi , sila bagitau ye . aku akan bantu korang sampai menjadi . okay selamat mencuba !

3 comments

  1. Wauu...nice apis! Boleh Cuba ni :)

    ReplyDelete
  2. yang id="chanyeol"> tu boleh tukar gmbar tak?

    ReplyDelete

© 2017 HAFIZ ZULKAFLY ALL RIGHTS RESERVED