Membuat Top Menu Di Blog

Pengalaman saat pertama kali memiliki blog di blogger, saya agak kebingungan untuk mengelola menu navigasi di blog saya yang menggunakan template bawaan blogger. Karena setelah saya perhatikan di file templatenya tidak disediakan code untuk membuat menu. Cari di dashboard juga tidak ketemu.

Setelah agak lama blusukan mencari tutorialnya di google, haaa....akhirnya ketemu juga.
Jika anda memiliki pengalaman yang sama dengan saya dan anda belum menemukan caranya maka anda saat ini berada di tempat yang tepat. hehehe...(gaya dikit) karena melalui tulisan ini saya akan membagikan langkah-langkah membuat menu di blog kesayangan anda.

Menu yang akan kita buat akan tampak seperti ini:

Langkah-langkahnya cukup sederhana dan kita hanya akan menggunakan code css juga html. Oke tanpa berlama-lama berikut adalah langkah-langkahnya. Cekidot !

1. Melalui dashboard blogger, pilih menu template->edit HTML.
2. Cari tag </header> kemudian ketikkan kode HTML berikut ini dibawah tag </header> tersebut

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Navigation</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Template Blog</a></li>
</ul>
</nav>

3. Masih di halaman html editor, letakkan kode CSS berikut ini diantara code <b:skin><![CDATA[ dan  ]]></b:skin>.

#menu{background:#ECF0F1;width:99%;margin:0 5px 0 5px;color:#2C3E50;height:35px;border-bottom:1px solid #1ABC9C}
#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 12px Lato, Arial;text-shadow: none;border-right: 1px solid #f0f0f0;border-left: 1px solid #e0e0e0;text-transform:uppercase}
#menu li:first-child{border-left: none}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#2C3E50;}
#menu li:hover > a,#menu li a:hover{background:#1ABC9C;color:#fff;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Lato, Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:12px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#ECF0F1;position:absolute;z-index:99;display:none;border:0;}
#menu ul.menus li{display:block;width:100%;font:12px Lato, Arial;text-transform:none;border-bottom:1px solid #f0f0f0}
#menu li:hover ul.menus{display:block}
#menu a.prett{padding:0 27px 0 14px}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#2C3E50 transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#1ABC9C;}

 4. Jika sudah, simpan perubahan dengan mengklik tombol Save template. 

Sekarang lihat perubahan pada blog anda dengan mengklik tombol View blog atau Preview. Harusnya anda sekarang sudah melihat menu navigasi  pada bagian atas blog anda, tepat di bawah header blog . Mudah bukan?

Jika  ada kesalahan seperti menu tidak muncul, atau tampilan menu yang tidak sama dengan gambar di atas, coba teliti lagi langkah-langkah yang sudah saya berikan sebelumnya. mungkin ada kesalah dalam menempatkan code. Jika masih juga kesulitan, jangan segan-segan bertanya di sini :)

Selamat Mencoba. :)