Cara Membuat Tab Menu Blog

Assalamualaikum Teman..

kali ini saya akan berbagi mengenai cara membuat tab menu pada blog. Sebagai contoh, teman bisa melihat pada bagian atas blog saya tepatnya dibawah gambar header. Untuk membuat menu berjajar secara horizontal seperti demikian teman - teman cukup membuat widget baru dan mengcopy paste kode HTML yang tertera dibawah.

seperti biasa, caranya cukup mudah :)

• Pertama masuklah ke dashboard lalu klik design
• Pada menu page elements klik add a gadget
• Pilih HTML/Javascript
• Masukkan kode HTML berikut ini pada content

<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#000;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>
</ul>
</div>

• Silakan ganti karatker berwarna merah tersebut dengan kode warna yang teman inginkan. pada contoh saya menggunakan #000 yang merupakan kode warna hitam.
• Ganti karakter # dengan alamat yang teman inginkan serta edit nama Menu 1, Menu 2, dst sesuai dengan kebutuhan .
• Jika teman ingin menambah menu baru cukup dengan menggandakan kode <li><a href='#'>Menu </a></li> dan letakkan diatas </ul> .
• Klik save..
• Untuk menempatkannya posisinya diatas teman cukup menggeser widget ini tepat dibawah header atau dapat disesuaikan posisinya sesuai selera.

Bagaimana ? Mudah bukan ? :)
Apakah teman berhasil menerapkannya?

Regards,

Irfan

Berlangganan Artikel Referensi Kita

Tweet

Masukkan alamat email Anda:

Related Post: