Home » » Membuat Menu Horizontal di Blogspot

Membuat Menu Horizontal di Blogspot

Diposting Oleh Bang Dayat ; Hari Sabtu, 25 Agustus 2012 Jam 20.55

Halo sobat Bang Dayat kali ini saya ingin posting yang berkaitan dengan tutorial blogspot. Saya ingin sharing tentang Bagaimana Caranya Membuat Menu Horizontal pada Blogspot.

Banyak cara yang dilakukan untuk membuat menu horizontal salah satunya adalah dengan menambahkan elemen HTML/javascript kemudian memasukkan kode. Cara ini yang akan saya sharing disini.

Bagi sobat yang pengen mencoba saya berikan contohnya :


Kira-kira itu contohnya.

Untuk membuatnya cukuplah mudah yaitu :

1. Sobat login dahulu ke akun blogger.

2. Kemudian masuk ke tata letak.

3. Tambah gadget pilih HTML/javascript.

4. Kemudian pastekan kode berikut ini kedalam gadget tadi.


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

5. Ganti tanda pagar ( # ) 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.

6. Untuk height dan width nya bisa sobat otak atik sesuai dengan kebutuhan.

Selamat mencoba semoga bermanfaat.
Berbagi dengan artikel ini :
Ditulis oleh : Bang Dayat
Description: Membuat Menu Horizontal di Blogspot , Rating: 5
Reviewer: Bang Dayat, ItemReviewed: Membuat Menu Horizontal di Blogspot

Artikel terkait tentang

Berlangganan Artikel BD
Masukkan Email Anda:

 
Support : Bang Dayat
Copyright © 2012-2017. Bang Dayat Blog's - All Rights Reserved

Proudly powered by Blogger