Salam blogger mania sobat..udah lama nieh cyber man gak menyapa cyber mania semua..kemaren sibuk merayakan hari raya jadinya gak sempet posting dech..hehe tapi untuk menjaga trafic blogger harus terus posting kan..hehe baiklah kali ini cyber man ingin share ke cyber mania semua tentang bagaimana cara membuat top menu atau link menu di atas header blog. Kalau kalian bingung kalian bisa tilik dech contoh nya di http://www.akuntanmaniak.co.cc/ atau bisa juga di http://www.jendelamusikindonesia.co.cc/ dech. Bagaimana apakah sudah paham maksud top menu itu..?kalo udah langsung dech capcus.
1. Login di blogger dengan ID Cyber Mania
2. Klik menu Layout
3. Klik Tab Edit HTML
4. Centang Expand Template Widget agar code dapat terlihat semua
5. Masukan code berikut
/*The top Menu*/
#top{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
border-bottom:1px solid #373127;
}
#top-wrap{
margin:auto;
padding: 0;
width: 960px;
background:#000000;
}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: georgia; font-weight:bold; font-size:10px;display:block;padding:10px 10px;color:#fff;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}
/*The top Menu*/
#med{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
}
#med-wrap{
margin:auto;
padding: 0;
width: 960px;
}
.mednav ul {list-style:none;margin:0;padding:0px; float:left;}
.mednav li {float:left;margin:0;text-align:center;}
.mednav li a {font-family: georgia; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#000000;text-decoration:none; text-transform:lowercase;}
.mednav li a {background:none; }
.mednav li a:hover, li a:focus, li a:active {text-decoration:underline; color:#000000;}
#navbar-iframe {
display: none !important;
}
#top{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
border-bottom:1px solid #373127;
}
#top-wrap{
margin:auto;
padding: 0;
width: 960px;
background:#000000;
}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: georgia; font-weight:bold; font-size:10px;display:block;padding:10px 10px;color:#fff;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}
/*The top Menu*/
#med{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
}
#med-wrap{
margin:auto;
padding: 0;
width: 960px;
}
.mednav ul {list-style:none;margin:0;padding:0px; float:left;}
.mednav li {float:left;margin:0;text-align:center;}
.mednav li a {font-family: georgia; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#000000;text-decoration:none; text-transform:lowercase;}
.mednav li a {background:none; }
.mednav li a:hover, li a:focus, li a:active {text-decoration:underline; color:#000000;}
#navbar-iframe {
display: none !important;
}
taruh tepat dibawah code <b:skin><
thank you...saya udah praktekkan tutorialnya yang ini...terima kasih banyak sobat...ardi: www.psychologymania.co.cc
tank... infonya. klo bisa.. bagaimana cara tips membuat menu utama yang lagi belajar permulaan..
aanansori6@gmail.com
untuk web faporit science maaf baru dibalas karena saya baru sempet online nieh..hwhwh wah itu kamu harus memahami komponen html di edit html bro..gampang kok nanti saya terbitkan tutorialnya..
ok tapi bingung ey,w pengen menu buaat home,about,atau link gimana brow..???
tutorial'a udh d coba, berhasil. thanks ya :)
makasih berguna banget nih ..
form : http://www.egileonhart.co.cc
numpang link ya
www.hiduppunk.blogspot.com
AKu Suka Gan,.....Salam System Of bLog
makasih gan atas tips nya
makasih gan atas tips nya
numpanng link gan ya.?
Mas koq jd dibawah si menunya??? saya bingung
www.ekailaika.blogspot.com
gan maasih yaaa :D
wah bagus mas tutor'a, tapi klo boleh saya saran, coba sekalian tampilin contoh atau DEMOnya.
soalnya saya pemula di blogger jadi kurang faham..