Pages

Friday, September 13, 2013

tutorial tab menu

tutorial nie pasal tab menu. tau tak tab menu tu apa? ala kalau tengok kat blog orang tue yang ader bebanyak tab kat atas blog tue. nanti ko tengok ceera punyer, konfem ko akan mengerti sampai bila-bila. nia la cara-cara yer.

menyibuk betul la signature nie. dah tau tak boleh nak apply, ko duk dendiam dah la kat bawah. nie nak menyusahkan aku pulak. aishhh...

********************************


Disebabkan aku punye color ijo.. so aku tak sediakan color ijau dibawah ini yeeeeee.. kalau nak jugak ko buat la sendiri kat photoshop nun.. =P

Yes.. button ini jugak boleh direkacipta kalau ko taknak sama dengan orang lain...

black2.gif
black1.gif
blue2.gif
blue1.gif
orange2.gif
orange1.gif
purple2.gif
purple1.gif
red2.gif
red1.gif

Mula2 sekali.. ko pergi sini ye..

Layout - EditHTML
Then tick kat expend Expand Widget Templates yang ada sibelah kanan atas kotak html itu..

Then ko carik coding ini... ]]>
then ko copykan coding2 di bawah ni kat atas coding ]]>
Bubuh di atas ye..

#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://2.bp.blogspot.com/_NGLN8-IACTs/SijS9RUKm6I/AAAAAAAAPTo/r8QdGcx-Zac/s1600-h/black2.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://4.bp.blogspot.com/_NGLN8-IACTs/SijS9QAotPI/AAAAAAAAPTw/CvsHHJK0TMc/s1600/black1.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

Ok... kat tulisan yang hijau tu.. mana ko nak dapat url nye???

Kat sini ye.. mula2 ko click saja pict2 button yang ado di atas ini.. pastu akan bukak di window yang lain.. kalau nak itam, ko click kat button itam, kalau nak merah. ko click kat button merah...


Pastu click kanan untuk amik properties...


And copy location...

Dah copy, ko pastekan masuk ke dalam tulisan ijau ituuuuuuuu....
syiap bahagian ini..

Lepas tu.. ko copy pulak coding di bawah2 ini...





Di mana nak pastekan??? ko pastekan kat atas coding ini


camne nak carik coding
, ko tekan ctrl-F then, pastekan kat kotak find.. terus jumpa coding yang ko nak...


Dah paste... ko gantikan saja url aku ke url korang.. pastu home tu ko nak tukar jadik lain pun boleh...

Then save.. preview...

Mudah kannnnnnnn..

Nak tambah button, just pastekan
  • CeeraDotCom
  • di bawah coding2 yang sedia ada...

    Selamat Mencuba...

    *****************************
    thanx and credit to ceera.

    aku tak apply pun benda alah nie. nanti-nanti ler. itupun kalau aku rasa ader kegunaannyer. kalau tak, berkepuk ler dalam blog nie sajorkkk tanpa diapplykan oleh ku. ewahhh...

    Looking for gifts for birthday, wedding, anniversary etc? 

     

    No comments:

    Post a Comment

    Related Posts Plugin for WordPress, Blogger...

    All content provided on this "nursueada.blogspot.com" blog is for informational purposes only. The owner of this blog makes no representations as to the accuracy or completeness of any information on this site or found by following any link on this site.

    The owner of nursueada.blogspot.com will not be liable for any errors or omissions in this information nor for the availability of this information. The owner will not be liable for any losses, injuries, or damages from the display or use of this information.
    This terms and conditions is subject to change at anytime with or without notice.