Cara Membuat Menu Di Bawah Header Blog

Pada menu dibawah header blog yang versi ini kelebihannya 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 TERUSLAH BERUSAHA MENJADI YANG TERBAIK  ini.

Gimana.??? Sobat tertarik dan ingin membuat nya.!!!
Oke sobat, Mari kita langsung menuju ke TKP, hehehehe...
Langkah-langkah yang harus sobat lakukan untuk membuat menu dibawah header blog adalah:


1. Silahkan sobat >> Login atau Masuk ke blogger.com menggunakan akun sobat.

2. Pada Dashboard tampilan blogger baru, Pilih dan klik Menu >> Template >> Edit HTML

3. Kemudian silahkan sobat cari kode ]]></b:skin> (Gunakan CTRL + F untuk memudahkan pencarian).
Kemudian taruh Kode Script di bawah ini tepat diatas atau sebelum kode ]]></b:skin>

 #catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWTWa41kKVA4Y9LkkHVP6iZuro1jldE8A97kaeOkfellIdhs9ECKr7YMUGzJ1arKrO4oVSxZ9AKkWm6hSH6VpqaipOqiBE6mB7608bjWXMBixjdfsSf-22paXIR8crOUyyj31_87RU103Y/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/AVvXsEjfvfGH0ZkH3htk5S0EenLUSzz0jQuTUBsrPvwpSpqye7v3gMz4hiFXSlEwBYdtzSEpesFZcui6qQXHVSgfR9bNaekgX4V4tlvAkMkBw11uNoQe6DTU1UI4Y_FCD0qSu3GVpvEtd6wOy77B/) 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/AVvXsEidfEov28IEzN2K2q39c_RqJNMDWAFyvYOWEhkL-MrhNvguPhi55nICO9N_hNvn3sragtIFUQFj2KJKzUKGC1qdOqkkzruTRZlZ6rQUtLkxtNnb6LRZsxylEiMbMjcynVBoo2CndvHTz_AA/) 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/AVvXsEidfEov28IEzN2K2q39c_RqJNMDWAFyvYOWEhkL-MrhNvguPhi55nICO9N_hNvn3sragtIFUQFj2KJKzUKGC1qdOqkkzruTRZlZ6rQUtLkxtNnb6LRZsxylEiMbMjcynVBoo2CndvHTz_AA/) 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;
}

Catatan:

• width:1000px; adalah Ukuran Lebar menu, Silahkan sobat ganti nilainya agar sesuai dengan ukuran lebar template blog sobat.

4. Jika sudah, Masih dalam Edit HTML Template, Silahkan sobat cari lagi kode <div id='content-wrapper'> (Gunakan CTRL+F untuk mempercepat pencarian).

5. Kemudian copy kode dibawah ini dan paste-kan tepat di bawah atau sesudah kode <div id='content-wrapper'>

 <div id='catmenucontainer'>
<div id='catmenu'>


<ul>
<li><a href='http://NAMA LINK BLOG ANDA'>Home</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>
</ul>
</div>
</div>
<div class='clear'/>

Catatan:

• Your-Link-Here Ganti dengan Link target tujuan isi menu sobat.
• Link-Title Ganti dengan title yang sobat inginkan.
• Link-Name Ganti dengan Nama menu sobat yang ingin di tampilkan.

6. Setelah sobat selesai mengedit, Silahkan sobat klik >> Pratinjau atau Preview dulu sebelum di SAVE template-nya, Lalu lihat hasilnya. Jika sudah berhasil dan cocok seperti yang sobat inginkan, Jangan Lupa di Save atau Simpan yach...

NB:
Jika sobat tidak menemukan kode yang dicari template blog sobat, Berarti cara di atas tidak berlaku untuk Template blog yang sobat gunakan. Namun sobat masih bisa memasangnya di blog sobat.

Caranya:

• Masuk >> Dasboard >> Tata letak >> Tambah Gadget >> pilih >> HTML/JavaScript >> Taruh semua kode script yang ke dua diatas di dalam kotak HTML/JavaScript >> Simpan dan lihat hasilnya.

Semoga artikel tutorial blog yang membahas tentang Cara Membuat Menu Di Bawah Header Blog, Bisa sangat bermanfaat bagi sobat KUCOPAS semua. selamat Berkarya...

Posted by : dewinurfauziyah009.blogspot.co.id October 04, 2017 Tags : Tips and Trik Blogger

Subscribe by Email

Follow Updates Articles from This Blog via Email