Free Download Software Full Version With Crack, Patch, Serial: Cara Membuat Sub Menu Horizontal Pada Blog Melalui Widget

Thursday, May 10, 2012

Cara Membuat Sub Menu Horizontal Pada Blog Melalui Widget

Awalnya saya bingung untuk membuat sub menu pada blog, tetapi setelah saya mencoba berkali-kali dan akhirnya saya menemukan juga cara yang lebih mudah.

Caranya sebagai berikut :
1. Login ke dashboard blogger
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 HTML/Javascript
5. Kemudian masukkan kode menu horizontal yang saya tulis 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.

** Letakkan gadget di tempat yang sesuai (biasanya di bawah gadget header)

NB :
Ganti tanda ( @ ) 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 teman inginkan.

Semoga Bermanfaat . :)

No comments:

Post a Comment