Cara mudah membuat menu navigasi horisontal dengan drop down sunrise akan saya share buat kamu. Kamu bisa mempercantik tampilan blog kamu dengan menu-menu horisantal yang pas dengan warna blog kamu. Menu drop down ini akan lebih cocok bila dipasang di blog dengan background blog berwarna putih, kuning, coklat, oranje, dan hitam. Tapi juga tidak akan kelihatan jelek ketika dipasang di blog dengan backgound selain itu, jadi bisa dipasang di semua warna.
Untuk membuat menu navigasi yang keren seperti diatas, ini dia langkahnya :
1. Seperti biasa, login dulu ke akun blogger kamu.
2. Pilih menu "Template" pada dasbor.
3. Klik "Cadangkan" kemudian download backup template blog kamu, hal ini dimaksudkan agar bila terjadi kesalahan dalam mengedit html kamu bisa mengembalikan template kamu lagi.
4. Klik "Edit HTML", pilih "Lanjutkan"
5. Jangan lupa ceklist "Expand Template Widget" yang berada diatas kode html blog kamu.
6. Cari kode ]]></b:skin>, gunakan tombol ctrl+F untuk melakukan pencarian cepat.
7. Copy kode berikut dan paste tepat diatas kode ]]></b:skin>
@charset "utf-8";
/* CSS Document */
body{
padding: 25px;
}
/*^'^ Navigation Structure ^'^*/
.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(http://i48.tinypic.com/hur12s.jpg);
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}
/*^'^ Primary Items ^'^*/
#nav-container a{
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: blue;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(http://i50.tinypic.com/an25cp.jpg);
background-repeat: no-repeat;
background-position: top;
}
#nav-container a:hover{
color: #6C3600;
background: url(http://i49.tinypic.com/md1emv.jpg);
background-repeat: no-repeat;
background-position: center;
}
/*^'^ Secondary Items Container ^'^*/
#nav-container div, #nav-container ul{
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(http://i49.tinypic.com/xauknl.jpg);
background-repeat: repeat-x;
background-color: #FF9900;
border-bottom: 1px solid #CA6500;
}
/*^'^ Secondary Items ^'^*/
#nav-container div a, #nav-container ul a{
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url(http://i48.tinypic.com/14l21jb.jpg);
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}
/*^'^ Secondary Items Hover State ^'^*/
#nav-container div a:hover, #nav-container ul a:hover{
background-color: #FFFFFF;
background: url(http://i48.tinypic.com/14l21jb.jpg);
background-repeat: no-repeat;
color:#CC0000;
}
/*^'^ Secondary Item Titles ^'^*/
#nav-container .item-secondary-title{
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;
background: url(http://i47.tinypic.com/or1755.jpg);
background-repeat: no-repeat;
font-weight:bold;
}
/*^'^ Horizontal Dividers ^'^*/
#nav-container .divider-horiz{
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}
/*^'^ Vertical Dividers ^'^*/
#nav-container .divider-vert{
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}
8. Klik "Pratinjau" untuk mempreview hasilnya, hal ini dimaksudkan agar bila terjadi kesalahan dalam memasukkan / mengedit html kamu bisa mengetahuinya dan bisa mengosongkan kembali editan kamu tadi.
9. Kalau berhasil dan tidak ada masalah, klik "Simpan Template"
10. Kemudian tutup, dan sekarang kamu menuju ke "Tata Letak"
11. Klik "Add Gadget", pilih "HTML/Java Script"
12. Kemudian masukkan kode berikut di gadget baru tadi
<div class="nav-container-outer">
<img src="http://i49.tinypic.com/2rcu35h.jpg" alt="" class="float-left" />
<img src="http://i49.tinypic.com/2mww0vr.jpg" alt="" class="float-right" />
<ul id="nav-container" class="nav-container">
<li><a class="item-primary" href="#">HOME</a>
</li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Menu 2</a>
<ul style="width:150px;">
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
</ul></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Menu 3</a>
<ul style="width:150px;">
<li><a href="#">Menu 3.1</a></li>
<li><a href="#">Menu 3.2</a></li>
<li><a href="#">Menu 3.3</a></li>
<li><a href="#">Menu 3.4</a></li>
<li><a href="#">Menu 3.5</a></li>
<li><a href="#">Menu 3.6</a></li>
</ul></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Menu 4</a>
<ul style="width:150px;">
<li><a href="#">Menu 4.1</span></li>
<li><a href="#">Menu 4.2</a></li>
<li><a href="#">Menu 4.3</a></li>
<li><a href="#">Menu 4.4</a></li>
</ul></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Menu 5</a>
<ul style="width:150px;">
<li><a href="#">Menu 5.1</span></li>
<li><a href="#">Menu 5.1</a></li>
<li><a href="#">Menu 5.3</a></li>
<li><a href="#">Menu 5.4</a></li>
</ul></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Menu 6</a>
</li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Menu 7</a>
</li>
<li class="clear"> </li></ul>
</div>
Kode warna hijau : "#" diisi dengan url label/laman
Kode warna merah : "Menu.." diisi dengan nama menu yang kamu inginkan.
Sekian artikel tentang membuat menu navigasi hisontal dengan dropdown sunrise dari Mas Kenitr. Semoga bermanfaat dan bisa membantu kamu. Kalau ada yang belum jelas silakan tanyakan dikolom komentar. Bila kamu menyukai artikel ini, mohon keikhlasannya untuk follow blog ini atau sekedar berkomentar di artikel ini.
Salam,
0 comments