Ini langkahnya ical paparkan sedemikian detail.
1. Login ke blog
2. Pilih blog yang ingin di tambahkan menu bar
3. Pilih Template/Layout -> Edit Html (jangan lupa ceklist expand widget template)
4. Cari kode yang mirip ini :
body {
margin: 0;
text-align: center;
min-width: 900px;
background: #000000) repeat-x $startSide top;
color: $textColor;
font-size: small;
}
yang penting ada kode body nya
5. Tempat kode dibawah ini pas dibawah kode langkah 4
#navbar-iframe{display:none;height:0;visibility:hidden;}
#NavbarMenu{background:black; width:950px; height:40px; color:white; margin:0 auto; padding:0; font:bold 8px Arial,Tahoma,Verdana; text-decoration:none}
#NavbarMenuleft{width:950px; float:$startSide; margin:0; padding:0; text-decoration:none}
#nav{margin:0; padding-top:3px; padding-left:3px}
#nav ul{float:$startSide; list-style:none; margin:0; padding:0; text-decoration:none}
#nav li{list-style:none; margin:0; padding:0; text-decoration:none}
#nav li a, #nav li a:link, #nav li a:visited{color:green; display:block; text-transform:uppercase; margin-left:0; padding:9px 15px 8px; font:bold 12px Arial,Times New Roman; text-decoration:none}
#nav li a:hover, #nav li a:active{background:pink; color:green; margin:0; padding:9px 15px 8px; text-decoration:none}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:white; width:150px; color:#6699ff; text-transform:lowercase; float:none; margin:0; padding:7px 10px; border-bottom:1px solid #6699ff; border-left:1px solid #6699ff; border-right:1px solid #6699ff; font:normal 14px Georgia,Times New Roman; text-decoration:none}
#nav li li a:hover, #nav li li a:active{background:#6699ff; color:#fff; padding:7px 10px; text-decoration:none}
#nav li{float:$startSide; padding:0; text-decoration:none}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0; text-decoration:none}
#nav li ul a{width:140px; text-decoration:none}
#nav li ul ul{margin:-32px 0 0 171px}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto}
#nav li:hover, #nav li.sfhover{position:static}
6. Setelah itu cari kode seperti ini:
<body>
7. Tempatkan kode dibawah ini, tepat dibawah kode langkah 6
<div id='NavbarMenu'>
<div id='NavbarMenuleft'><script type='text/javascript'>
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener("load",
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='rss.xml'>Site Map</a></li>
<li><a href='http://icalcell.blogspot.com/search/label/Tutorial%20Blog?max-results=999'>Tutorial Blog</a></li>
<li>
<a href='#'>EDIT MENU INI</a>
<ul>
<li>
<a href='#'>EDIT SUB MENU INI    »</a>
<ul>
<li><a href='EDIT URL UNTU SUB SUB MENU ' target='_blank'>EDIT SUB SUB MENU INI/a>
</li>
</ul>
<li><a href='http://icalcell.blogspot.com/2009/11/program-ptc.html'>Program PTC</a></li>
</li>
<li><a href='http://icaltogel.blogspot.com' target='_blank'>Togel Mania
</a></li>
</ul>
</li>
<li><a href='#'>Download</a></li>
<li><a href='#'>Tukar Link</a></li>
<li><a href='#'>Hubungi Saya</a></li>
<li><a href='#'>Ke</a>
<ul><li><a href='http://www.google.com' target='_blank'>Google</a></li>
<li><a href='http://www.yahoo.com' target='_blank'>Yahoo</a></li>
<li><a href='http://www.youtube.com' target='_blank'>Youtube</a></li>
<li><a href='http://www.facebook.com' target='_blank'>Facebook</a></li>
</ul>
</li>
</ul>
</div>
</div>
Setelah itu preview, setelah tampilan bagus baru di save.
NB:
Untuk penyesuaian dengan warna template yang kamu gunakan silahkan edit kode pada langkah 5.
Untuk mengedit Menu-menu dan sudmenu apa saja yang ingin ditampilkan silahkan edit kode pada langkah 7
tes
BalasHapusterimakasih kode css dan html nya. tapi ada yang kurang tuh ketikannya, so ga bisa instan, harus di oprek lagi dah... by http://ddxrp.blogspot.com
BalasHapusThanks to post, udah lama aku nyari cara yang beginian ... baru dapat di blog ini..!!! sedikit koreksi ada sedikit kesalahan dari kode tersebut!!!
BalasHapustapi kok nama linknya yg ada link blog u?
BalasHapusleh di ganti gk link blognya jadi http://dragons-rfdragons.co.cc/
saatnya mencoba !
BalasHapusmakasih gan tutornya..
BalasHapustapi ane mau nanya gan.. gimana cara geser menunya kebawah??
ThxB4
@All-In-One - geser menu apanya sob,,kalo sekarang ical lagi gak pake sob, coz ganti tema, ntar deh ical terapin lagi , hehehe
BalasHapusMAkasih atas ilmunya...
BalasHapusgood post bro
BalasHapusane mau coba
he...he...he
Thank's gan !!
BalasHapusgan , di langkah 4 ga ketemu tuh yang sama ...
BalasHapusgmana tuh kalo gitu ???
O.o
untuk upload/nulis artikel untuk sub menu gimana...??? saya sudah mencoba, tetapi artikel tersebut hanya muncul di menu utama (Home/beranda).
BalasHapusWah, nice info banget gan.
BalasHapusDitunggu ya kunjungan baliknya www.stev-lim-teddy.blogspot.com