Cara Mengganti Menu Bar Bawaan Blogspot

Menu dan Sub-menu Bar sangat dibutuhkan guna mencari informasi berdasarkan pada kategori atau sub menu, perhatikan tampilan Arsenio.com, menu dan sub bawaan blog telah saya ganti dengan cara menghapus menu bawaan blogspot. Disini saya akan berbagi pengalaman dalam mengganti menu bawaan blogspot dengan menu baru yang berisi sub menu. Artikel ini saya buat karena saya kesulitan dalam membuat sub menu dari menu bar yang sudah ada. Ok langsung saja menuju ke lokasi. Sebelum sobat mengikuti langkah - langkah dibawah ini, silahkan sobat backup dulu template nya. 
Cara Mengganti Menu Bar Bawaan Blogspot
Langkah - langkanya :
- Klik  Desain
- Pilih  Template lalu pilih  Edit HTML
- Pilih/klik  Lanjutkan
- Pilih/klik  Expand Template Widget

Cari scrift berikut :
<div class='main-outer'>  atau
<div id='main-wrapper'> atau
<div id='main'>


Agar lebih mudah, klik F3 atau ctrl + F pada keyboard lalu pilih salah satu scrift diatas. Setelah dapat, copas scrift berikut tepat diatas scrift yang dicari tadi :

<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#e55300;width:1000px;margin:0 0px;padding:0;height:44px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #e55300;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, &quot;&quot;Times New Roman&quot;&quot;, Times, serif; font-style:regular; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; }
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='http://www.rud-arsenio.com'>Home</a></li>
<li><a href='http://www.rud-arsenio.com/search/label/Fakta%20Menarik'>Fakta Menarik</a></li>
<li><a href='#'>Techno</a>
<ul id='sub-custom-nav'>
<li><a href='http://www.rud-arsenio.com/search/label/Windows'>Windows</a></li>
<li><a href='http://www.rud-arsenio.com/search/label/Android'>Android</a></li>
<li><a href='http://www.rud-arsenio.com/search/label/PC%2FLaptop'>PC/Laptop</a></li>
</ul>
</li>
<li><a href='http://www.rud-arsenio.com/search/label/Tips%20%26%20Trik'>Tips n&#39; Trik</a></li>
<li><a href='#'>Ragam</a>
<ul id='sub-custom-nav'>
<li><a href='http://www.rud-arsenio.com/search/label/Berita'>Berita</a></li>
<li><a href='http://www.rud-arsenio.com/search/label/Berita'>Inspirasi</a></li>
<li><a href='http://www.rud-arsenio.com/search/label/Kisah%20Hikmah'>Kisah Hikmah</a></li>
<li><a href='http://www.rud-arsenio.com/search/label/Musik'>Musik</a></li>
</ul>
</li>
<li><a href='http://www.rud-arsenio.com/p/disclaimer-for-arsenio.html'>Disclaimer</a></li>
<li><a href='http://www.rud-arsenio.com/p/privacy-policy-for-arsenio.html'>Privacy Policy</a></li>
</ul>
</div>


Keterangan :
Untuk warna kuning silahkan sobat pilih salah satu karena antara templete dan lainnya bisa berbeda.
Untuk warna hijau silahkan sobat ganti dengan blog sobat, atau hapus link yang tidak digunakan. Bisa saja sobat menambahkan menu atau sub menu dengan mengcopy nya.
Saya menghapus menu bar bawaan blogspot, untuk mengetahui kode apa yang dihapus, saya menggunakan Inspect Element yang ada di browser. Setelah mengetahui  apa saja script yang menyusun menu bar, saya menghapusnya dengan mengganti script diatas.

Itulah cara bagaimana mengganti menu bar bawaan blogspot versi saya, semoga membantu. Baca juga mengenai Membuat New Tab Menu dan Sub Menu

1 Komentar untuk "Cara Mengganti Menu Bar Bawaan Blogspot "

Kami Hadir dengan Semangat dan Kebanggaan untuk selalu menjadi yang terbaik!!! ^^
Mari Bergabunglah Bersama MandiriQQ, menawarkan Berbagai Jenis Permainan Menarik.
1 ID untuk 6 PERMAINAN

Dapatkan Berbagai Bonus Menarik..!!!
- Bonus TurnOver 0.5% tiap Minggunya
- Bonus Referral 20% Dibagikan Setiap Minggunya.
- Minimal Deposit hanya 20 Ribu
- Minimal Withdraw hanya 50 Ribu
Untuk info lebih lanjut Silahkan hubungi Cs MandiriQQ PIN BBM : 2BE2B4BA
http://qqmandiri.net/app/Default0.aspx?lang=id

New Coming !!! Di coba ya Guys ^^
NEW GAME ( GAME TERLARIS SAAT INI )
FISH HUNTER ( TEMBAK IKAN ) ===> www.gg626.com
COCK FIGHT ( SABUNG AYAM ) ===> www.s1288.net

Terima kasih sudah berkunjung, silahkan meninggalkan komentar yang sopan, Copy paste harap disertai link sumber.