Kesayangan

Entry Miss Honey Minggu ini

Isnin, 6 Ogos 2012

Tutorial : Membuat Tab Menu Comel di tepi Blog




Assalamualaikum dan Hai..Hai....
Hari ini miss honey akan ajar korang buat Tab Menu yang simple 
Tapi sangat menarik...
Tak percaya??
Miss honey sendiri pun menggunakan Tab Menu nie tau..
yang bestnya dengan menu tab tersebut ada effects-5 deg...
ape itu affects-5 deg nie benda yang senget bila cursor menyentuh tajuk tersebut.
macam dibawah ni ha..


nak tengok??
 baiklah miss honey akan tunjukkan dekat korang k

Cantik tak..??
kalau suka jom ikut step miss honey ajarkan yek 

1.Mula-mula macam biasalah korang kena Sign in blog > Dashboard > Template > Edit HTML
2. Dah?? Kemudian korang tick Expand Wadgets > Ctrl +f (serentak)
3. korang copy code dibawah ini dan paste di kotak find.

 Code Tab Menu:
]]></b:skin>
4. Dah..korang copy dan paste Code dibawah ini pula pula sebelum code ]]></b:skin>
/* LIST #8 */
#list8 { }
#list8 ul { list-style:none;}
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px;margin:1px; }
#list8 ul li a { display:block; width:80px; height:28px; background-color:#000000; border-right:10px solid #FFFFFF; padding-left:40px;
text-decoration:none; color:#FFFFFF; }
#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

Backgroud : warna pada kotak (ikut kesukaan korang)
Border: (kotak kecil kat tepi) boleh tukar right or left
Transform rotate: ( ukuran sengit bila cursor menyentuh) boleh tukar jadi 6, 7, 8
#000000 : tukar colour ikut korang suka [code warna]  >> SINI <<

5. Kemudian korang kena cari code nie pula (tekan ctrl+f serentak untuk cari code)
</body>
6. dah jumpa?? baiklah copy dan paste code dibawah ini sebelum code </body> tadi
<div style='display:scroll; position:fixed; top:150px; left:-40px;'>
<div id='list8'>
<ul>
<li><a href='URL BLOG'>Home</a></li>
<li><a href='URL/LINK '>Tajuk</a></li>
<li><a href='URL/LINK '>Tajuk</a></li>
<li><a href='URL/LINK '>Tajuk</a></li>
</ul>
</div>
</div>

warna Ungu : letak URL korang sendiri (http://www...............)
warna Pink : Letak tajuk (ikut suka korang)
position fixed : adjust tinggi tau 

7. dah buat??...try buat dulu k...dah siap..PREVIEW dulu dan SAVE kalau tak menjadi tanya yek =)









。◕‿◕。 SUKA!! LIKE and KOMEN yek。◕‿◕。

1 ulasan:

hasniza hamzah berkata...

Cubalah korag buat .....cantik sgt miss honey suka tab menu nie..
tak menjadi??? jgn segan2 tanya yek syg

Daisypath Happy Birthday tickers

Daisypath Happy Birthday tickers