Tips cara membuat menu di blog

Pada tips kali ini, saya akan mencoba menerangkan cara membuat menu di blog dengan mudah dan sederhana. Tips ini mungkin sudah biasa atau bisa dibilang mudah untuk para senior, tapi mungkin juga terasa sulit bagi pemula. Tapi saya membuat artikel ini sesederhana mungkin agar kalian yang masih pemula dapat mengikuti dengan mudah.

Cara Membuat Menu di Blog 

Pada umumnya menu pada blog terletak diatas, bisa juga di atas header ataupun di bawah header (judul blog) dan nantinya menu terlihat memanjang kesamping.

Pertama yang harus kalian lakukan adalah masuk ke menu blog kalian. Disebelah kiri halaman kalian klik "Tata Letak. Setelah itu kalian tinggal klik "+Tambah Gadget" dan akan muncul jendela baru. Setelah jendela baru muncul, kalian bisa klik "HTML/JavaScript"

Pada kolom konten, kalian tinggal masukkan kode css dibawah, (tinggal copy- paste aja). 

<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 12px 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 > 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: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:#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:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#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>
<li><a href="#">About</a></li>
<li><a href="#">Daftar Isi</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Login Admin</a></li>
<!-- Mulai Area Menu Dropdown -->
<li><a class="sub" href="#">Menus</a>  <ul class="menus">
<li><a href="#" title="Menus">Menus 1</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Menus2</a></li>
<li><a href="#">Menus 3</a></li>
<li><a href="#">Menus 4</a></li>
<li><a href="#">Menus 5</a></li>
</ul>
</li>
<!-- Area Dropdown Selesai-->  </ul>
</nav>
<!-- Area Menu Selesai--> 

Setelah semua code di paste, kalian klik "simpan".

Dan Taraaaaa !!

Sekarang menu horizontal di blog  kalian sudah selesai. Dan kalian bisa merubah tampilan-nya sesuai dengan keinginan kalian. Untuk tips merubah tampilan menu akan saya lanjutkan ditulisan saya berikutnya.

Semoga membantu, Trims.

 

Sumber : http://www.blogbacatulis.com