Cara membuat menu di bawah heder Versi II

Bila kita kemaren sudah belajar cara membuat menu Harizontal, sekarang kita akan belajar tentang cara membuat menu dibawah header versi II. saya pikir vesrsi ini akan lebih menarik dibanding versi I kemaren. terus terang saya tidak menjamin sukses dalam pemasangannya, tapi jangan kwatir insyaallah 99,99% bisa sukses dalam memasang menu ini.

Kemaren dalam versi I masih banyak yang tidak sukses sayapun tidak mengerti kenapa tidak sukses makanya saya memberikan lagi yang versi II Semoga dalam versi ini semua yang mau mencoba, semua yang ingin memiliki blog yang terpasang menu dibawah headernya bisa sukses sebagaimana yang diharapkan.

Nah bagaimana cara membuat menu menurut versi II ini, kita simak dan kita ikuti langkah-langkah berikut:

• Masuk account blog kita pilih rancangan lalu EDIT HTML
• Jangan lupa centang “Expand Widget Templates ” 
• selanjutnya Cari code ]]></b:skin>, gunakan CTRL+F untuk lebih cepatnya dalam pencarian code tersebut
• Jika sudak ketemu dengan code ]]></b:skin> masukkan Code berikut tepat diatas code ]]></b:skin>

#catmenucontainer{ height:33px; width:1000px; margin:0 auto; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibTah9dKEfkdzXTEJVupMsVGDHNlY5l6N3_ZZBn-5aC6IthDxnVBbGvIMUYAyaNKKWz_AXydyb3bHMgRSJMIWGPKeinCgcTNzOPrVyaKuZ_fabEH_zeej3i8Q1zrcqR-AODL2d6M4s_DG8/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/AVvXsEiMMAMoR3nYi2NbGj3vRMEJjRo0kqqCV_rup4ypqD4VWkb77mHl4J-PXhQHIWCzPcBOPpaf_mauPzKeh4wMC99F9I9nrz6DCysJ6Z6kScdCm-Y94NiW7o2qhubi6sN0ZpN3x9Cz3ek332Er/) 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/AVvXsEhf5mn3i6sHlLH9JVqscvFzrnZfv-PsZuzl-3icdd6_gY8yq475cRWDmxf5f3LmOTLEgfWtTUrq68K-91GJpghig0ClCcekzLYifDsmpQeLN_Jo2F5iY7jEmUXFHF_DXRoDcYoV4Fzu1XEX/) 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/AVvXsEhf5mn3i6sHlLH9JVqscvFzrnZfv-PsZuzl-3icdd6_gY8yq475cRWDmxf5f3LmOTLEgfWtTUrq68K-91GJpghig0ClCcekzLYifDsmpQeLN_Jo2F5iY7jEmUXFHF_DXRoDcYoV4Fzu1XEX/) 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; }

• Apabila hal diatas sudah dilakukan, selanjutnya cari code <div id='content-wrapper'> Lalu copas code berikut di bawah code  <div id='content-wrapper'>

<div id='catmenucontainer'> <div id='catmenu'> <ul> <li><a href='http://mhdyani73.blogspot.com/'>Home</a></li> <li><a href='http://mhdyani73.blogspot.com/p/download' title='Download'>Download</a> <ul class='children'> <li><a href='http://mhdyani73.blogspot.com' title='software'>software</a></li> <li><a href='http://mhdyani73.blogspot.com' title='Ebook'>Ebook</a></li> <li><a href='http://mhdyani73.blogspot.com' title='video dan Mp3'>video dan Mp3</a></li> </ul> </li> <li><a href='http://mhdyani73.blogspot.com' title='Muara Enim'>Muara Enim</a> <ul class='children'> <li><a href='http://mhdyani73.blogspot.com' title='benakat'>benakat</a></li> <li><a href='http://mhdyani73.blogspot.com' title='Ujan Mas'>Ujan Mas</a></li> <li><a href='http://mhdyani73.blogspot.com' title='Gunung Megang'>Gunung Megang</a></li> <li><a href='http://mhdyani73.blogspot.com' title='Muara Enim'>Muara Enim</a></li> </ul> </li> <li><a href='http://mhdyani73.blogspot.com/p/about' title='about'>about</a></li> <li><a href='http://mhdyani73.blogspot.com/p/contact' title='contac'>contact</a></li> </ul> </div> </div> <div class='clear'/>

Catatan 
silahkan anda lihat hasilnya dulu baru diedit, karena saya yakin akan lebih mudah dipahami atau dimengerti width=1000px; pun bisa anda ganti disesuaikan dgn panjang menu blog anda
url berikut silahkan ganti dengan url anda sendiri http://mhdyani73.blogspot.com/p/download dan seterusnya.
nama download dan seterusnya juga diganti sesuai keinginan anda.

Posted in: