Friday 13 April 2012

Membuat Menu pada Blog


Rasanya ngak afdol kalau tidak ada menu di blog. Dengan adanya menu membantu pembaca untuk dapat  menelusuri artikel blog lebih efektif.

Dengan ilmu HTML yang terbatas saya coba belajar dari artikel blogger lainnya yang mudah untuk diterapkan. Akhirnya ketemu blog.ahmadrifai.net, keliatannya mudah untuk diimplementasikan. Terima kasih nihh..sharing ilmunya.

Script HTML nya saya kutip dari blog tsb :

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

Selanjutnya masuk ke blog yang dituju, masuk ke desain, pilih tata letak. Arahkan kursor ke widget dibawah Header. Kemudian isi HTML nya dengan script di atas.

Data yang bewarna merah anda ganti dengan alamat http nya dan yang bewarna biru diganti dengan nama menunya.

Selamat mencoba.

No comments:

Post a Comment