Membuat Menu Blog

Setelah kita berhasil membuat blog tentu kita pengen punya menu juga kan, selain membuat tampilan blog lebih menarik, menu juga sangat membantu para pengunjung blog kita untuk mencari materi dengan mudah lewat menu dan submenu.
Berikut langkah - langkah nya . . .


1. Buka > browser dan > masuk ke akun blogger.
2. Klik TEMA dan klik EDIT HTML. (tanda merah).

3. Cari kode "<div class='main-outer'>", untuk ,memudahkan pencarian gunakan (ctrl+f). lalu copas scrift di bawah ini tepat diatas kode "<div class='main-outer'>".

<style type='text/css'>

/*CSS MENU*/

#menu{background:#343434;color:#eee;height:35px;border-bottom:4px solid #eeeded}

#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}

#menu ul{height:35px}

#menu li{float:left;display:inline;position:relative;font:bold 11px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}

#menu li:first-child{border-left: none}

#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}

#menu li:hover &gt; a,#menu li a:hover{background:#111}

#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}

#menu label{font:bold 30px Arial;display:none;width:35px;height:30px;line-height:30px;text-align:center}

#menu label span{font-size:12px;position:absolute;left:35px}

#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}

#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}

#menu li:hover ul.menus{display:block}

#menu a.home {background: #c00;}

#menu a.sub{padding:0 27px 0 14px}

#menu a.sub::after{content:&quot;&quot;;width:0;height:0;border-width:3px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:10px}

#menu ul.menus a:hover{background:#333;}

</style>

<!-- Mulai Area Menu -->

<nav id='menu'>

<input type='checkbox'/>

<label>=Navigation</label>

<ul>

<li><a class='home' href='/'>Home</a></li>

<!-- Mulai Area Menu Dropdown -->

<li><a class='sub' href='#'>Menu1</a>  <ul class='menus'>

<label>=Navigation</label>

<li><a href='#' title='Menus'>Menu1</a></li>

<li><a href='#'>Menu2</a></li>

</ul>

</li>

<!-- Area Dropdown Selesai-->  </ul>

</nav>

<!-- Area Menu Selesai-->

4. Klik Simpan tema :)

Catatan : Untuk menambah atau mengurangi menu kita bisa copas atau hapus

scrift ini :

<!-- Mulai Area Menu Dropdown -->

<li><a class='sub' href='#'>Menu10</a>  <ul class='menus'>

<li><a href='#' title='Menus'>Menu1</a></li>

<li><a href='#'>Menu2</a></li>

<li><a href='#'>Menu3</a></li>

<li><a href='#'>Menu4</a></li>

</ul>

</li>

5. untuk mengganti nama kita tinggal ganti kata "Menu1"  dengan kata yang kita inginkan 

contoh : 

<li><a href='#'>Menu1</a></li>     Menjadi    <li><a href='#'>Buat Menu Blog</a></li>.

Selesai dan selamat mencoba :-)