Blog Tutorial:Top Navigation Menu
Snapshot Top Navigation Menu(Seperti Yang Korang Nampak Kat Blog Ni)
1.Pergi Blogger Dashboard, Layout >> Edit HTML >>
Dan cari kod ni:
Dan kat atas kod tu,letakkan kod ni
2.Save template,Dah siap!!Sekarang korang cuma perlu pergi ke Blogger Dashboard, Layout >> Page Elements >>Dan pilih Add HTML/JavaScript,letakkan kat atas kawasan catatan blog/blog post
Pastekan kod ni dalam html/javascript tersebut:
1.Pergi Blogger Dashboard, Layout >> Edit HTML >>
Dan cari kod ni:
</b:skin>
Dan kat atas kod tu,letakkan kod ni
/*Top Navigation Menu*/
.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.basictab li{
display: inline;
margin: 0;
}
.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}
.basictab li a:visited{
color: #2d2b2b;
}
.basictab li a:hover{
background-color: #DBFF6C;
color: black;
}
.basictab li a:active{
color: black;
}
.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #DBFF6C;
color: black;
}
.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.basictab li{
display: inline;
margin: 0;
}
.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}
.basictab li a:visited{
color: #2d2b2b;
}
.basictab li a:hover{
background-color: #DBFF6C;
color: black;
}
.basictab li a:active{
color: black;
}
.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #DBFF6C;
color: black;
}
2.Save template,Dah siap!!Sekarang korang cuma perlu pergi ke Blogger Dashboard, Layout >> Page Elements >>Dan pilih Add HTML/JavaScript,letakkan kat atas kawasan catatan blog/blog post
Pastekan kod ni dalam html/javascript tersebut:
<ul class="basictab">
<li class="selected"><a href="#">Home</a></li>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
</ul>
<li class="selected"><a href="#">Home</a></li>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
</ul>
Editla sendiri kat Edit apa nama yang korang nak letak kat menu tu,dan # adalah untuk alamat url yang korang ingin letak.Save.
14 ulasan
thnx..jd pun..hehe
Reply@Kamil ace[tm] Sama-sama,TQ^^
Replysalam. sy dh cuba buat tp kenapa tak leh save template tu?
Replykuar benda ni :
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "b:skin" must be terminated by the matching end-tag "".
@nadia Salam,mungkin awak terletak dua kod 'b:skin' tu.Boleh nyatakan nama template yang awak guna tak?
Replyda jady..tp an..contoh mcm sye wat name menu tu utk award an..mcm mne nk msokan award2 yg ade kat dlm menu tu..:-o
Reply@Bella Kurang fahamla,mksud awak cam dropdown menu ke?
Replymcm ni...skunk sye da ade menu tu..n sye khas kan menu tu tuk award je..msalahnye skunk..cmne sye nk msokkn award2 yg sye ade kat dlm menu tu..? kire if org bkak menu award tu org bley tngok la award2 yg sye ade..pening la..da cube bnyak kali..
Reply@Bella Oh,awak letak label award pada semua award awak dan kemudian klik pada label award,dan ambil link utk label award tu utk diletak kat menu award,hrp awak faham :)
Replysoryy..xpahamlahhh
Reply@Bella Camna saya nk terangkan ya...ok,cuba awak tengok menu saya,ada perkataan label kat situ,saya buat camtu atau awak nk buat lain?
Replysalam. sy dah cuba buat lgi sekali dah boleh bila dh save ada navigation box tu. Tapi ada plak tulisan kod yg ni
Reply/*Top Navigation Menu*/ .basictab{ padding: 3px 0; margin-left: 0; font: bold 12px Verdana; border-bottom: 1px solid gray; list-style-type: none; text-align: left; /*set to left, center, or right to align the menu as desired*/ } .basictab li{ display: inline; margin: 0; } .basictab li a{ text-decoration: none; padding: 3px 7px; margin-right: 3px; border: 1px solid gray; border-bottom: none; background-color: #f6ffd5; color: #2d2b2b; } .basictab li a:visited{ color: #2d2b2b; } .basictab li a:hover{ background-color: #DBFF6C; color: black; } .basictab li a:active{ color: black; } .basictab li.selected a{ /*selected tab effect*/ position: relative; top: 1px; padding-top: 4px; background-color: #DBFF6C; color: black; }
Tulisan kod ni ada ats navbar.
ni templet yg sy gunakan : Picture Window template. Template images by Ollustrator. Powered by Blogger.
tq. harap dpt bantu :)
@nadia Pastikan yang awak ltk kod di langkah 1 sblum kod </b:skin>(sentiasa backup template)
ReplySaya nk cuba tngok template tu tp template designer cam ada masalah je huhu :(
tapi macam mane nk buat cm kat blog ko tuh..menarik!
Replytp template yg sedia ada dah disediakan dah page utk top nav bar kat semua blogspot
@nas Yang mana,yang home,login tu ke?Nantikan aku tuliskan ;)
ReplyNota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.