Cara Membuat Menu di Bawah Header Blog ~ Campur Blog

Hallo sobat, Selamat berkunjung ke blog saya KUCOPAS yang Ndeso ini. hehehe...
Setelah kemarin saya share dan posting Tips dan Trik tentang Cara buat Menu Vertikal Dengan Icon/gambar, sekarang saya Akan kasih tips dan trik lagi buat sobat semua tentang Cara membuat menu dibawah header blog.

Pada menu dibawah header blog yang versi ini kelebihan nya adalah ketika pointer mouse di arahkan, maka hasil nya akan tampil menu-menu lainnya yang mengarah ke bawah alias Menu Horisontal DropDown, seperti yang sobat lihat di gambar dan pada menu Blog KUCOPAS ini.

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/AVvXsEgzgI9GPPAs27j-ueNwwGSKJXiiPf-Pph7M561WVdb6k2-EtriIL5U34boXhjnX_c8dLPbmo0wLTSEHvBDon_ewBn0Juj3O9WmRVReN8tjghWR_5I64ZVhJ_Vj16cpDYxwvE9LZyxaUDfB_/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/AVvXsEhJckMCwNtuAIZIfx7InDMtcGCW1qjfQj0vl62m6zgTKnDWzasPcCHSHJm9tobFs-l-cGwDRE5xZmVlSMOwb3ZGwu7c_o-RCUAA8Wm6BMKizy8Z-7aOItVAJSVoxgzxcP8XAqb7cx31fJmI/) 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/AVvXsEj-P62Bm_x-Vp4hnstRJlp-CzW-zqzRhOSo5ocbCilah3uTvyOKMoBpRsYc9O1ujoFtyT4SsM70eFwTF1GZbD4wmRDI9UVowzfpHB6mzs6jVXm91oCB5j-BnNFAe8hwDh5bNSfbGgKiNShu/) 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/AVvXsEj-P62Bm_x-Vp4hnstRJlp-CzW-zqzRhOSo5ocbCilah3uTvyOKMoBpRsYc9O1ujoFtyT4SsM70eFwTF1GZbD4wmRDI9UVowzfpHB6mzs6jVXm91oCB5j-BnNFAe8hwDh5bNSfbGgKiNShu/) 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...

| Supported by http://kuc0pas.blogspot.com |