Berlanggan Via Email

Enter your email address:

My Friend

Home» Blog tutorial» cara mudah membuat menu horizontal blog

cara mudah membuat menu horizontal blog

<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>
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 :
Label:

12 komentar:

bisnis online paling murah mengatakan...

ok gan akan ane praktekin...

18 Februari 2013 pukul 03.40
blog rangga mengatakan...

silahkan gan....

18 Februari 2013 pukul 07.38
Raka Lee mengatakan...

gan,.. klo ganti warna nya gimana??

10 Maret 2013 pukul 23.19
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....

11 Maret 2013 pukul 21.48
Ice Breaks In Your Life mengatakan...

terima kasih sharenya....

28 Maret 2013 pukul 00.43
bicara bisnis online mengatakan...

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

28 Maret 2013 pukul 00.44
blog rangga mengatakan...

sama-sama gan.....

28 Maret 2013 pukul 01.31
Unknown mengatakan...

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

14 April 2013 pukul 19.20
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 ........

15 April 2013 pukul 03.59
Ananda mengatakan...

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

1 Juni 2013 pukul 06.50
blog rangga mengatakan...

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

3 Juni 2013 pukul 09.54
satkoryon siman mengatakan...

http://pulsareog.blogspot.com/

16 Oktober 2013 pukul 09.20

Posting Komentar

Silakan Berikan Komentar Dengan:

1. Bahasa yang baik dan sopan .
2. Tidak disarankan menaruh link aktif .
3. Tidak mengandung unsur SPAM, SARA dan POR*O.

Langganan: Posting Komentar (Atom)

Blog Rangga Template Created by Hengky Saelah.