Bebicara mengenai menu pada deretan atas dibagian Header suatu halaman blog atau situs, pastinya ketika kita memasangkan template, para pengembang Template telah menyediakan baris menu yang terdiri dari Menu1, Menu2, Menu3 dan ada pula yang menunya akan menampilkan sub menu, sub menu itu jika diklik akan memunculkan menu baru Contohnya seperti dubawah ini:
Supaya mempermudah para SEO Blog yang tinggal mengisi link dan mengganti nama menu tersebut. Akan tetapi jika template yang anda pasang tidak memiliki menu dan submenu Header, maka kebetulan sekali karena disinilah tujuan saya membuat artikel ini, yaitu untuk membantu para bloger membuat menu dan sebmenu di bagian Header. Ada dua tipe cara yang akan saya bagikan, yaitu melalui Widget Blog dan kode Template HTML. Pada langkah Widget Blog, Template harus memiliki Baris kolom atas seperti gambar dibawah dan kebanyakan adalah template bawaan Blogger. Sedangkan yang melalui HTML bisa diterapkan pada hampir semua Template dan suport submenu. Oke dah berikut tutorialnya.
Cara Memasang Menu Header Via Widget
1. Buka Dashboard Blogger > pilih menu 'Tata Letak' > Pilih Tab
2. Pada kolom atas biasanya dibawah header seperti gambar diatas, lalu pilih 'Tambahkan Gadget' > lalu pilih Widget 'Laman'.
3. Pada widget Laman, anda bisa menambahkan dafta menu dengan me klik 'Tambahkan Tautan Eksternal'. Anda bisa menambahkan menu apasaja beserta link halamannya.
4. Lalu setelah itu Save, lalu coba kunjungi blog anda untuk memastikan semua berjalan sesuai keinginan.
Cara Memasang Menu Header Via HTML
Karena disini kita akan mengotak atik kode templte, didalam kode templte itu ada 2 jenis kode, yaitu Kode CSS dan HTML sehingga anda akan mepaste kode yang akan saya berikan 2 kali, yaitu paste kode CSS dan Paste Kode HTML.
1. Buka Dashboard Blogger > lalu pilih menu 'Tema' > pilih 'Edit HTML'. Maka munculah kode-kode template yang ada.
2. Kemudian cari kode script <![CDATA[ atau <b:skin><![CDATA[ atau ]]></b:skin> , dengan menggunakan fitur pencarian kata pada browser caranya tekan tombol CTRL+F pada keyboard.
3. Selanjutnya letakan kode script dibawah ini tepat di atas salah satu kode yang di cari tadi.
1. Buka Dashboard Blogger > lalu pilih menu 'Tema' > pilih 'Edit HTML'. Maka munculah kode-kode template yang ada.
2. Kemudian cari kode script <![CDATA[ atau <b:skin><![CDATA[ atau ]]></b:skin> , dengan menggunakan fitur pencarian kata pada browser caranya tekan tombol CTRL+F pada keyboard.
3. Selanjutnya letakan kode script dibawah ini tepat di atas salah satu kode yang di cari tadi.
#top{margin:auto;padding: 0;width: 100%;background:#e8e7e7;border-bottom:1px solid #ddd;}
#top-wrap{margin:auto;padding: 0;width: 100%;background:#e8e7e7;}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#222;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}}
#navbar-iframe {display: none !important;}
#top-wrap{margin:auto;padding: 0;width: 100%;background:#e8e7e7;}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#222;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}}
#navbar-iframe {display: none !important;}
4. Selanjutnya silahkan anda cari kode <body> dan letakan kode dibawah ini tepat di bawah kode tersebut.
<div id=’top’>
<div id=’top-wrap’>
<div class=’topnav’>
<ul id=’topnav’>
<li><a href=’’ title=’’>Top Menu </a></li>
<li><a href=’‘ title=’’>Privacy Policy </a></li>
<li><a href=’‘ title=’’>Disclaimer </a></li>
</ul>
</div>
</div>
<div style=’clear: both;’/>
</div>
5. Save Template
Cara Memasang Menu Dan Submenu Header Via HTML
Karena disini kita akan mengotak atik kode templte, didalam kode templte itu ada 2 jenis kode, yaitu Kode CSS dan HTML sehingga anda akan mepaste kode yang akan saya berikan 2 kali, yaitu paste kode CSS dan Paste Kode HTML.
1. Buka Dashboard Blogger > lalu pilih menu 'Tema' > pilih 'Edit HTML'. Maka munculah kode-kode template yang ada.
2. Kemudian cari kode script <![CDATA[ atau <b:skin><![CDATA[ atau ]]></b:skin> , dengan menggunakan fitur pencarian kata pada browser caranya tekan tombol CTRL+F pada keyboard.
3. Selanjutnya letakan kode script dibawah ini tepat di atas salah satu kode yang di cari tadi.
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#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, "Times New Roman", Times, serif; font-style:italic; 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;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#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, "Times New Roman", Times, serif; font-style:italic; 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;}
4. Selanjutnya silahkan anda cari kode <body> dan letakan kode dibawah ini tepat di bawah kode tersebut.
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu2 a</a></li>
<li><a href='#'>Sub Menu2 b</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu3a</a></li>
<li><a href='#'>Sub Menu3b </a></li>
</ul>
</li>
<li><a href='#'>Menu4</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu4a</a></li>
<li><a href='#'>Sub Menu4b </a></li>
</ul>
</li>
<li><a href='#'>Menu5</a></li>
</ul>
</div>
<ul class='fl' id='secnav'>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu2 a</a></li>
<li><a href='#'>Sub Menu2 b</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu3a</a></li>
<li><a href='#'>Sub Menu3b </a></li>
</ul>
</li>
<li><a href='#'>Menu4</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu4a</a></li>
<li><a href='#'>Sub Menu4b </a></li>
</ul>
</li>
<li><a href='#'>Menu5</a></li>
</ul>
</div>
5. Save Template
Begitulah Cara Membuat Menu Dan Submenu Pada Header, terimakasih telah mampir di blog saya ini. Jika ada kesalahan dalam penulisan saya mohon maaf dan jika anda masih belum paham tentang cara memasukkan kode-kodenya karena mungkin terasa rumit, saya sangat senang jika anda berkomentar dan menjelaskan bagianmana yang membingungkan anda karena tentu saya akan membimbing anda dengan sebaik-baiknya. jika ingin membaca tips-tips mengenai tutorial blog jangan lupa untuk like dan share FansPageDukuntekno sekian tips blog dari Dukuntekno yang dapat saya bagikan dan Semoga berhasil.