CSS Menu Untuk Blog
Cara untuk buat css menu/multi menu
Demo:Tengok menu pada blog ni ;)
1.Login ke blogger dashboard--> layout- -> Edit HTML
2.Pergi cari kod </head>
3.Lepas korang jumpa,pastekan kod dibawah ni SEBELUM/DI ATAS kod </head>
<style type='text/css'>
#catmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTewFMhhRL94gN2C4HNIfc_PKCOSslUBwxiT9M0pca9nRKShyphenhyphen2el1tSXvBEw3QZROlP3u-UoDxZBbBbtUvnapFL1A0ztLh-rPBdBanWi6E4a5lliZ3ItvWTL74ZYTtvpavEhy7PebeV8_v/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font: 14px "Century gothic",verdana, Arial, sans-serif;
font-weight:normal;
border-top:1px solid #686D6F;
}
#catmenu ,#catmenu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}
#catmenu a {
color: #999;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}
#catmenu a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_o1xdgvCi9GwmN9hQmMlrAIwG-2FgPeYmw0kmN9A7l8uqSYauLd22eaLgY-dObaaN27A2rdztsA5XjzrrnkUtfH8CyfbB32hVOpzRremK_EQmJdMpwzmChKwqrLST6lm7-l4uAF-wGhuD/) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}
#catmenu li {
float: left;
margin: 0px;
padding: 0px;
}
#catmenu li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTewFMhhRL94gN2C4HNIfc_PKCOSslUBwxiT9M0pca9nRKShyphenhyphen2el1tSXvBEw3QZROlP3u-UoDxZBbBbtUvnapFL1A0ztLh-rPBdBanWi6E4a5lliZ3ItvWTL74ZYTtvpavEhy7PebeV8_v/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#E8EBEE;
border-bottom:1px solid #2C3133;
}
#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_o1xdgvCi9GwmN9hQmMlrAIwG-2FgPeYmw0kmN9A7l8uqSYauLd22eaLgY-dObaaN27A2rdztsA5XjzrrnkUtfH8CyfbB32hVOpzRremK_EQmJdMpwzmChKwqrLST6lm7-l4uAF-wGhuD/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
border-bottom:1px solid #2C3133;
}
#catmenu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}
#catmenu li:hover ul {
left: auto;
display: block;
}
#catmenu li:hover ul, #catmenu li.sfhover ul {
left: auto;
}
</style>
#catmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTewFMhhRL94gN2C4HNIfc_PKCOSslUBwxiT9M0pca9nRKShyphenhyphen2el1tSXvBEw3QZROlP3u-UoDxZBbBbtUvnapFL1A0ztLh-rPBdBanWi6E4a5lliZ3ItvWTL74ZYTtvpavEhy7PebeV8_v/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font: 14px "Century gothic",verdana, Arial, sans-serif;
font-weight:normal;
border-top:1px solid #686D6F;
}
#catmenu ,#catmenu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}
#catmenu a {
color: #999;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}
#catmenu a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_o1xdgvCi9GwmN9hQmMlrAIwG-2FgPeYmw0kmN9A7l8uqSYauLd22eaLgY-dObaaN27A2rdztsA5XjzrrnkUtfH8CyfbB32hVOpzRremK_EQmJdMpwzmChKwqrLST6lm7-l4uAF-wGhuD/) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}
#catmenu li {
float: left;
margin: 0px;
padding: 0px;
}
#catmenu li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTewFMhhRL94gN2C4HNIfc_PKCOSslUBwxiT9M0pca9nRKShyphenhyphen2el1tSXvBEw3QZROlP3u-UoDxZBbBbtUvnapFL1A0ztLh-rPBdBanWi6E4a5lliZ3ItvWTL74ZYTtvpavEhy7PebeV8_v/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#E8EBEE;
border-bottom:1px solid #2C3133;
}
#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_o1xdgvCi9GwmN9hQmMlrAIwG-2FgPeYmw0kmN9A7l8uqSYauLd22eaLgY-dObaaN27A2rdztsA5XjzrrnkUtfH8CyfbB32hVOpzRremK_EQmJdMpwzmChKwqrLST6lm7-l4uAF-wGhuD/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
border-bottom:1px solid #2C3133;
}
#catmenu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}
#catmenu li:hover ul {
left: auto;
display: block;
}
#catmenu li:hover ul, #catmenu li.sfhover ul {
left: auto;
}
</style>
Nota:Sila hos imej catmenu.jpg dan catmenuhov.jpg sendiri.
4.Save template.
5.Sekarang pergi ke Layout-->Page Elements dan klik "Add a gadget".
6.Pilih "html/java script" dan letakkan kod dibawah ni didalamnya,dan save =)
<div id='catmenucontainer'>
<div id='catmenu'>
<ul>
<li><a href='#' title='#'>Home</a></li>
<li><a href='#' title='#'>Web Design</a>
<ul class='children'>
<li><a href='#' title='#'>HTML</a></li>
<li><a href='#' title='#'>CSS</a></li>
<li><a href='#' title='#'>JavaScript</a></li>
</ul>
</li>
<li><a href='#' title='#'>Templates</a>
<ul class='children'>
<li><a href='#' title='#'>1 Column</a></li>
<li><a href='#' title='#'>2 Column</a></li>
<li><a href='#' title='#'>3 Column</a></li>
<li><a href='#' title='#'>4 Column</a></li>
</ul>
</li>
<li><a href='#' title='#'>Subscribe</a>
<ul class='children'>
<li><a href='#' title='#'>Email</a></li>
</ul>
</li>
<li><a href='#' title='#'>News</a></li>
<li><a href='#' title='#'>Google</a>
<ul class='children'>
<li><a href='#' title='#'>Yahoo</a></li>
<li><a href='#' title='#'>MSN</a></li>
</ul>
</li>
<li><a href='#' title='#'>About</a></li>
<li><a href='#' title='#'>Contact</a></li>
<li><a href='#' title='#'>PrivacyPolicy</a></li>
</ul>
</div>
</div>
<div id='catmenu'>
<ul>
<li><a href='#' title='#'>Home</a></li>
<li><a href='#' title='#'>Web Design</a>
<ul class='children'>
<li><a href='#' title='#'>HTML</a></li>
<li><a href='#' title='#'>CSS</a></li>
<li><a href='#' title='#'>JavaScript</a></li>
</ul>
</li>
<li><a href='#' title='#'>Templates</a>
<ul class='children'>
<li><a href='#' title='#'>1 Column</a></li>
<li><a href='#' title='#'>2 Column</a></li>
<li><a href='#' title='#'>3 Column</a></li>
<li><a href='#' title='#'>4 Column</a></li>
</ul>
</li>
<li><a href='#' title='#'>Subscribe</a>
<ul class='children'>
<li><a href='#' title='#'>Email</a></li>
</ul>
</li>
<li><a href='#' title='#'>News</a></li>
<li><a href='#' title='#'>Google</a>
<ul class='children'>
<li><a href='#' title='#'>Yahoo</a></li>
<li><a href='#' title='#'>MSN</a></li>
</ul>
</li>
<li><a href='#' title='#'>About</a></li>
<li><a href='#' title='#'>Contact</a></li>
<li><a href='#' title='#'>PrivacyPolicy</a></li>
</ul>
</div>
</div>
Dah siap,kalau korang buat dengan betul,korang akan dapat lihat menu yang macam ni pada template korang:
6 ulasan
kenape ea..kalau saya letak html tu dkt header dia x kuar sub menu nye??
Reply@Kamil ace[tm] Buat kt dlm edit html ke?
Replybwt ikut mcm kt ats tu..
Replyhmm, xpe la, sbb ni tgh nk tkr domain pulak,
kalau jd la..
anyway thnx, selalu je amek tutorial kt sini..
aidil.. saye suke bace tutorial kat sini... start saye buat blog dulu lagii.. boleh tak saye nak tanye.saye dah buat css ni. die jadi. tapi kat atas tu die tulis home etc..macam mane nak buat macam blog awk yg ade blog tutorial, drawing tutorial tu sume...
Replylagi satu nak tanye, macam mane nak letak kaler dekat kotak shoutbox, gaye tulisan, kalendar tu sume... awk letak dlm kotak warne itam tu. mcm mane erk. saye nak letak dalam kotak macam blog awk
@za petrelliThanks =).Oh,yang tu,senang je,awk tuka Home etc kepada nama yang awk nak,lepas tu yang a href='#',gantikan je simbol # dengan link cnthnya http://blogspot.com.
ReplyWidget gaya tulisan(saya ada letak kat label widget),shoutbox plak ada kat tutorial.Cara letak: Layout-->Page Element-->Add a gadget-->html/javascript dan letak kod widget yang awak nak.
Harap membantu^^
@za petrelliP/S: Semasa langkah 6,awak ada letak gadget html/javascript kan,awk tukar nama Home,Web Design etc kat dlm kod tu^^
ReplyNota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.