Senin, 29 April 2013

Membuat Menu Horizontal dengan Tambah Widget

Ada banyak cara untuk membuat Menu/Pages horizontal dan vertikal pada blog. Tampilan pada menu/pages juga bermacam-macam bentuknya. namun pembuatanya memerlukan waktu agak lama dan agak rumit soalnya anda di tuntut untuk meng Edit HTML, salah sedikit saja maka template anda akan rusak amburadul karena itu anda dituntut untuk memBackUp template blog anda terlebih dahulu untuk antisipasi.

Cara membuat Menu/Pages berikut sangat sederhana karena anda akan memakai widget yang labih simpel. Langsung saja:
  • Log in ke blog anda
  • Home=>klik Layout/tata letak

  • Setelah muncul gambar seperti di bawah Klik Add a Gadget/tambah gadget. jangan lupa letakan gadget pada tempat yang sesuai (biasanya di bawah header)


  • Kemudian pilih HTML/JavaScript


  • Kemudian masukan kode (kode berada di bawah) pada kolom yang tersedia
  •  
  • Save/Simpan
Kode:

<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='http://ibtimain.blogspot.com/'>Home</a></li>
<li><a href='@'> Pages 1</a></li>
<li><a href='@'> Pages 2</a></li>
<li><a href='@'> Pages 3</a></li>
<li><a href='@'> Pages 4</a></li>
<li><a href='@'> Pages 5</a></li>
</ul>                      
</div>
Keterangan:

Ganti tanda ( @ ) pada kode <a href='@'> dengan link yang anda inginkan dari blog anda,  
bisa link label, postingan, atau link yang menuju ke web/blog yang lain.

ganti tulisan Pages 1 - Pages 5 dengan nama menu yang anda inginkan.