Tutorial : Opacity Navigation

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 :)

LIVE PREVIEW

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 !