Cara membuat Menu Horizontal Sederhana tanpa edit Html

Salam hangat para blogger!!!

Bila sobat sudah mempunyai blog tentunya untuk memudahkan pengunjung berselancar di blog sobat ada baiknya di bikin kan menu pada blog sobat, baik itu menu dropdown, horizontal, menu tab, dan menu lainnya.

Baiklah tidak perlu panjang lebar lagi membahas kegunaan menu pada blog , langsung saja ke TKP....kali ini saya mencoba memaparkan tentang proses pembuatn menu horizontal secara sederhana tanpa mengedit Html lagi, langkahnya sebagai berikut :

1. Login ke dashboard blog sobat
2. Klik menu Design/Rancangan (Klik menu Tata Letak = untuk blogger tampilan baru menunya ada di sebelah kiri)
3. Klik Add Gadget / Tambah Gadget.
4. Pilih/klik opsi HTML/Javascript
5. Kemudian masukkan kode menu horizontal seperti di bawah ini :

<style>

/*---------------------------------------------------------------------------------*/

/* CATEGORY MENU */

/*---------------------------------------------------------------------------------*/

#cat-menu { background:none; height:35px;}

/* category navigation */

.nav { background:#f5f5f5;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='#'> Menu 1</a></li>

<li><a href='#'> Menu 2</a></li>

<li><a href='#'> Menu 3</a></li>

<li><a href='#'> Menu 4</a></li>

<li><a href='#'> Menu 5</a></li>

</ul>                     

</div>

6. Klik Save / Simpan
7. Selesai

Catatan : ganti tanda pagar ( # ) pada kode <a href='#'> dengan link yang teman inginkan, bisa link label, postingan, atau link yang mengarah kesitus lain.
Silakan ganti tulisan Menu 1 - Menu 5 dengan nama menu yang sobat inginkan.

Sederhana bukan? Selamat mencoba !!

Sumber :  Cara membuat Horizontal Sederhana tanpa edit Html

NOTE : Silahkan sobat copy paste dan menyebarluaskan postingan ini dengan ketentuan sebagai berikut :  

• Sebelum malakukan copy paste sebaiknya sobat sedikit merubah kalimat pembuka atau yang lainnya di postingan sobat , agar tidak Menjadi Duplikat Content 
• Atas perhatian dan kunjungannya saya ucapkan terima kasih, dan jangan lupa beri kritik dan saran pada kotak komentar ya....

Related Post: