Salam blogger mania sobat..udah lama nieh saya gak menyapa semua..kemaren sibuk di dunia nyata jadinya gak sempet posting dech..hehe tapi untuk menjaga trafic blogger harus terus posting kan..hehe baiklah kali ini saya ingin share ke jurig jarian mania semua tentang bagaimana cara membuat top menu atau link menu di atas header blog. Kalau kalian bingung kalian bisa di blog ini tepatnya di atas header. Bagaimana apakah sudah paham maksud top menu itu..?kalo udah langsung dech capcus.
- 1. Login di blogger dengan ID blog sobat
- 2. Klik menu Layout
- 3. Klik Tab Edit HTML
Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.
- 4. Centang Expand Template Widget agar code dapat terlihat semua
- 5. Masukan code berikut
Tepat dibawah code <b:skin><![CDATA[
/*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;
}
6. Lalu sobat cari code <body> gunakan ctrl + F untuk memudahkan pencarian.
7. Lalu sobat copas code berikut tepat dibawah code <body>
<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://www.ganti dengan link sobat/'>Home</a></li>
<blink><li><a href='http://www.ganti dengan link sobat' title='Tangga Lagu'>Tangga Lagu</a></li></blink>
<li><a href='http://www.ganti dengan link sobat' title='Download MP3'>Download Mp3</a></li>
<li><a href='http://www.ganti dengan link sobat' title='Download Full Album'>Download Full Album</a> </li>
<li><a href='http://www.ganti dengan link sobat' title='Aliran Musik'>Aliran Musik</a></li>
<li><a href='http://www.ganti dengan link sobat' title='Old Pick'>Old Pick</a> </li>
<li><a href='http://www.ganti dengan link sobat' title='Request Lagu'>Request Lagu</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://www.ganti dengan link sobat/'>Home</a></li>
<blink><li><a href='http://www.ganti dengan link sobat' title='Tangga Lagu'>Tangga Lagu</a></li></blink>
<li><a href='http://www.ganti dengan link sobat' title='Download MP3'>Download Mp3</a></li>
<li><a href='http://www.ganti dengan link sobat' title='Download Full Album'>Download Full Album</a> </li>
<li><a href='http://www.ganti dengan link sobat' title='Aliran Musik'>Aliran Musik</a></li>
<li><a href='http://www.ganti dengan link sobat' title='Old Pick'>Old Pick</a> </li>
<li><a href='http://www.ganti dengan link sobat' title='Request Lagu'>Request Lagu</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
Yang perlu diperhatikan kata berwarna hijau silahkan sobat ganti sesuai keinginan sobat bloger
Semoga bermanfaat
18 komentar
Mas Apit yang baek....
Mas Apit ngasih tutorial nih ceritanya, tp kodenya ga bisa di copas. trus gmana kita blajarnya? semntara dalam penerapan kode dlm blog itu sifatnya trial n error, kalo harus di ktik aku rasa ga efektif deh. Kasian yg mau belajar, udah ketemu tutorial yg di cari, eeehh malah ga bisa di copas. Masih bnyak kok Copaser yang mau nyantumin sourcenya.
Thanks mas apit, nice share....
@Yudi Sutopo Oke Sobat maaf atas ketidak nyamannya, sekarang sobat udah bisa copy paste. hampura
kalo TOP MENU DI BAWAH HEADER GIMANA caranya?
nggak jadi gan katanya kode harus diparse kek mana ni gan....?
@serba serbiUntuk Farse kodenya coba sobat kesini . http://www.blogcrowds.com/resources/parse_html.php
thanks gan izin nyedot, bermanfaat sekali bagi mereka yang blogger pemula termasuk ane
hehehehe
terimakasih infonya mas... :D
makasih sobaaaat,,,,sukses yah
maaf, saya mw bertanya. di top menu itu kan disuru mengisikan link.. link nya to kmn ya? ke post artikelnya atao kmna??
tolong infonya..
@SMFTK link yang ada di blognya sobat.
trims ya
Manfaat gan tipsnya, salam blogger.!!
Nice info .. keep innovating :)
thank for all information...
Patut di coba...Trima kasih sahabat
Mantap tutornya sahabat. Terima kasih
trims' banyaaaaaak mas apiit....
saya berhasil membuatnya,,,, sangat bermanfaat sekali info .... sekaliii lg thanxs bangaaaaattt mastaaaa apit...
EmoticonEmoticon