Cara membuat Menu Horizontal Sederhana Blogspot tanpa edit Html
Salam
blogger!!!
Bila sahabat blogger sudah mempunyai
blog tentunya untuk memudahkan pengunjung berselancar di blog sobat ada baiknya
di buat menu pada blog sobat, baik itu menu dropdown, horizontal, menu
tab, dan menu lainnya.
Untuk Contohnya bisa sobat lihat di Blog Ini...
tidak perlu panjang
lebar lagi saya akan membahas cara membuat menu Horisontal menu pada blog , langsung saja ....kali ini
saya mencoba memaparkan tentang proses pembuatn menu horizontal secara
sederhana tanpa mengedit Html lagi, langkahnya sebagai berikut :
- Login ke dashboard blog sobat
- Klik menu Design/Rancangan (Klik menu Tata Letak = untuk blogger tampilan baru menunya ada di sebelah kiri)
- Klik Add Gadget / Tambah Gadget.
- Pilih/klik opsi HTML/Javascript
- 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>
- Klik Save / Simpan
- 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.
Silakan ganti tulisan Menu 1 - Menu 5 dengan nama menu yang sobat inginkan.
Mudah bukan? Selamat mencoba !!
Tidak ada komentar:
Posting Komentar