cara mudah membuat menu horizontal blog

Menu horizontal pada suatu blog sangat berguna untuk pengujung blog untuk mempermudah pencarian isi artikel  dalam blog tersebut yang juga hampir fungsi nya dengan label pada suatu blog , tidak itu saja menu horizontal pada blog juga berguna untuk merapikan tampilan pada blog tersebut .
   Bagi sobat yang ingin mencoba untuk membuat menu horizantal secara mudah bisa mengikuti cara nya dibawah ini yaitu cara mudah membuat menu horizontal  blog  dengan langkah-langkah nya sebagai berikut ;

• pertama sekali login dulu dengan acount blogger sobat .
• pilih tambah gadget yang ada diatas header blog , kalau belum ada silahkan sobat ikuti cara menambah gadged diatas header blog disini .
• kalau sudah masuk pada halaman tambah gadget lalu pilihlah HTML/JavaScript .
• silahkan copy paste kode di bawah ini ke halaman HTML/JavaScript blog sobat .

<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#00FF00;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='/'>Home</a></li>
<li><a href='http://www.blogger.com/profile/00974608774985824028'> admin profil</a></li>
<li><a href='#'> kontak</a></li>
<li><a href='http://dunialagump3.blogspot.com/2011/01/blog-post.html'> tukar link</a></li>
<li><a href='http://dunialagump3.blogspot.com/2012/01/mp3-streaming-online-dunia-lagu.html'>play list</a></li>
<li><a href='http://quranflash.com/en/quranflash.html'> islami</a></li>
<li><a href='#'>tentang</a></li>
<li><form action="http://dunialagump3.blogspot.com/search" id="searchthis" method="get" style="display: inline;">
<input id="b-query" maxlength="255" name="q" size="20" type="text" /> <input id="b-searchbtn" type="submit" value="Search" /></form></li>
</ul>                     
</div>

• Lalu simpan untuk melihat hasil nya di blog sobat .

   keterangan :  kode warna merah silahkan ganti dengan kode link sobat.


SELAMAT MENCOBA

Posted in: Tutorial Blog