Cara Membuat Menu di Bawah Header Blog

Gimana.??? Sobat tertarik dan ingin membuat nya.!!!
Oke sobat, mari kita langsung menuju ke TKP, hehehehe...
Langkah-Langkah yang harus sobat lakukan adalah:

1. Login ke blog sobat >> klik Menu rancangan >> Edit HTML

2. Beri centang pada >> “Expand Widget Templates ”

3. Lalu sobat cari kode ]]></b:skin>
gunakan CTRL + F , untuk memudahkan pencarian.
kemudian taruh script di bawah ini tepat diatas nya ]]></b:skin>

#catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfUHlwU9REE7mIHm2D7xEduQ05PaqT_uN-rQ_ixFqGiZe0vSmxAn1il7bEASGrHwNbVz7ipZLrec_gT3Hx4vuChRSIY3yOV2w6GLjzeGlef8NkvG4W2xfxZEoxlbtvymCUxb_uAXmsdg3D/s1600/2.gif) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}
#catmenu{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHqlzZW7FX7M4rz2g_SyIpAD-K0LRRm-0qlvL9FqbyOcN2nFTYU5tP3scqWzCNaOAZmH7-kf14zG-pg2hEgEtrDCTKJGJNH-a4lA6NSX8r-luWtAJksmfDyDBZ8mzl4bO-GpyHvBYO9hSA/) repeat-x;
height:33px;
}

#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}

#catmenu li a:hover, #catmenu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghEbeFg5h-_lpP2PX25uPjPCPTZ6IgDxi4UBiRZ2nAoohyYOR5Qng1pnyIhU4LiDaiOI75SNWgpwGU4nAaZevcJKx72qFlqlL4XzC0NDFHpoF5WI-2fiE6bF2aX_nsDW24agkCNlM56J41/) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;

}

#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghEbeFg5h-_lpP2PX25uPjPCPTZ6IgDxi4UBiRZ2nAoohyYOR5Qng1pnyIhU4LiDaiOI75SNWgpwGU4nAaZevcJKx72qFlqlL4XzC0NDFHpoF5WI-2fiE6bF2aX_nsDW24agkCNlM56J41/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}

#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#catmenu li li {
}

#catmenu li ul a {
width: 140px;
}

#catmenu li ul a:hover, #catmenu li ul a:active {
}

#catmenu li ul ul {
margin: -34px 0 0 170px;
}

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}

#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}

#catmenu li:hover, #catmenu li.sfhover {
position: static;
}

4. Lalu sobat cari kode <div id='content-wrapper'>

5. kemudian copy kode dibawah ini dan paste kan tepat dibawah kode tersebut.

6. Jika sudah, sobat Pratinjau/Preview dulu sebelum di SAVE template nya, lalu lihat hasilnya.
jika sudah berhasil dan cocok seperti yang sobat inginkan, Jangan Lupa di Save/Simpan yach...

Keterangan :
Edit Your-Link-Here,Link-Title, dan Link-Name. Ganti dengan link dan title link yang sobat inginkan.

NB:
Jika sobat tidak menemukan kode yang dicari, berarti Cara ini tidak berlaku untuk template yang sobat gunakan.
Namun sobat masih bisa memasang nya.
Cara nya :
Masuk >> Rancangan >> Elemen Laman >> Tambah Gadget >> pilih HTML/JavaScript >> taruh kode script yang ke dua di dalam nya.
>> Save dan Lihat Hasil nya.

Semoga Berhasil...

Judul : Cara Membuat Menu di Bawah Header Blog
Deskripsi : Gimana.??? Sobat tertarik dan ingin membuat nya.!!! Oke sobat, mari kita langsung menuju ke TKP, hehehehe... Langkah-Langkah yang harus so...

2 komentar untuk "Cara Membuat Menu di Bawah Header Blog"

Unknown11 Juli 2012 pukul 23.01
makasih sob ane simpen dulu tipnya
BalasHapus
Balasan
dOi lucky13 Juli 2012 pukul 06.56
Waw baru tau saya kalo bisa buat menu,,
langsung saya coba gan...

terimakasih atas tutorial bermanfaat nya... :D
BalasHapus
Balasan

Tambahkan komentar

Pengunjung Yg Bijak Adalah Pengunjung Yg Selalu Mengungkapkan UNEG-UNEG.nya Untuk Postingan Ini.
Berkomentarlah Yg baik,
NO SPAM, NO JUNK