|Welcome To Get Different Info |
http://hitskin.com/themes/13/47/58/i_icon_mini_index.png http://i62.servimg.com/u/f62/15/92/31/14/fb_gro10.png http://jcb-bag.com/images/categories-icon.png https://lh5.googleusercontent.com/-v4JoRoL0vm8/TXnB_75cDTI/AAAAAAAAAA8/JMzsSnPY3ac/backlink.jpg

Selasa, 28 Februari 2012

0 Cara Membuat Menu horizontal di Blog

Kali ini saya akan membuat postingan tentang cara membuat Menu horizontal di blog.Ini adalah salah satu cara untuk membuat blog kita lebih bagus lagi,jadi ini adalah salah satu cara untuk mempercantik blog kamu.
Mau tahu caranya ?Ikuti petunjuk 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
  6. Klik Save / Simpan
  7. Selesai.
Itu adalah salah satu cara untuk membuat menu horizontal di blog
tambahan --> Letakkan gadget di tempat yang sesuai (biasanya di bawah gadget header)
Berikut kode menu horizontal yang harus di masukkan pada gadget HTML/JavaScript (no:4 - 5)

<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>
Keterangan.
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.

0 komentar:

Posting Komentar