Berlanggan Via Email

Enter your email address:

My Friend

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

Klik tombol berbagi :

12 komentar:

bisnis online paling murah mengatakan...

ok gan akan ane praktekin...

blog rangga mengatakan...

silahkan gan....

Raka Lee mengatakan...

gan,.. klo ganti warna nya gimana??

blog rangga mengatakan...

Ganti ja background ini adalah kode warna backgroud :#333 dan ini adalah warna teks nya gan color:#fff , itulah sedikit cara merubah nya gan....

Ice Breaks In Your Life mengatakan...

terima kasih sharenya....

bicara bisnis online mengatakan...

akhirnya ketemu juga.. nih dia mantap gan...

blog rangga mengatakan...

sama-sama gan.....

Unknown mengatakan...

makasih banyak gan atas infonya
tapi cara ngedit isi menunya gimana y gan?

blog rangga mengatakan...

maaf untuk mengubah anchor teks nya memang tidak saya kasih perbedaan dengan kode tapi kalau sobat memperhatikan anchor teks gampan di cari , contoh nya home bisa sobat ganti dengan beranda atau sebagai nya , dan untuk kode yang saya tandai dengan warna merah adalah link yang ingin sobat pasang , terima kasih atas komentar dan kunjungan nya ........

Ananda mengatakan...

Ok, siap untuk dicoba gan... :) Trims infonya... :)

blog rangga mengatakan...

sama-sama atas kunjungan dan komentar nya gan ......!!!

satkoryon siman mengatakan...

http://pulsareog.blogspot.com/