Membuat Menu Bar di Blog dengan menggunakan Edit HTML

Halo sobat blogger semua....?

Pada kesempatan ini saya akan berbagi bagaimana membuat Menu Bar di Blog dengan menggunakan fasilitas Edit HTML

Seperti yang kita ketahui.. menu adalah suatu yang sangat penting dalam sebuah halaman blog, menu yang sangat menarik, dan bagus akan mempunyai pengaruh yang sangat besar bagi blog kita... menu juga memudahkan pengguna untuk menjelajahi halaman blog... semakin banyak pengguna yang mengakses blog kita, tentunya akan menaikkan nilai value terhadap suatu blog..

Ada banyak jalan menuju Roma... begitu juga dalam membuat suatu Menu di sebuah halaman blog...

sebetulnya tanpa kita repot mengedit HTML... blogger sudah memberikan fasilitas pembuatan menu... namun menu tersebut masih standar...

Oke langsung aja gan ke TKP.. Bagaimana membuat Menu Bar dengan menggunakan Edit HTML

Langkahnya adalah sebagai berikut :
1.  Masuk ke halaman akun blogger anda
2.  Pilih Menu Template lalu pilih Edit HTML
     Lalu akan ditampilkan halaman Edit HTML.. lalu cari kode (script) atau tekan CTRL + F

div class='main-outer'>

Setelah itu copy paste scrip dibawah ini, lalu letakkan tepat diatas code  div class='main-outer'>

=========================================================================

<style>
/* -- Menu Horizontal + Sub Menu-- */

#cat-nav {background:#156994;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:arial, &quot;Times New Roman&quot;, Times, serif; 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='#'>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 Menu 2a</a></li>

<li><a href='#'> Sub Menu 2b</a></li>

<li><a href='#'> Sub Menu 2c</a></li>

</ul>

</li>

<li><a href='#'>Menu 3</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu 3a</a></li>

<li><a href='#'>Sub Menu 3b</a></li>

<li><a href='#'>Sub Menu 3c</a></li>

<li><a href='#'>Sub Menu 3d</a></li>

</ul>

</li>

<li><a href='#'>Menu 4</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu 4a</a></li>

<li><a href='#'>Sub Menu 4b</a></li>

</ul>

</li>

<li><a href='#'>Menu 5</a></li>

</ul>

</div>

=========================================================================

Keterangan :

- Ganti tanda  # (warna biru) dengan link/url yang anda inginkan, bisa jadi link posting atau label kategori pada blog anda

-  Ganti tulisan warna biru dengan menu dan sub menu yang anda inginkan

SEMOGA BERMANFAAT.....

Share: