Cara Membuat Menu Horizontal Dropdown

Salahsatu menu navigasi horisontal dengan script css yang bisa dijadikan alternatif untuk dipasang di blog adalah menu navigasi horisontal dropdown. Membuatnya pun tidak terlalu sulit.


    * Login ke Blogger.com
    * Kemudian Tata Letak
    * Pilih Edit HTML
    * Centang Expand Widget
    * Cari kode berikut "]]></b:skin>"


Di bagian atas kode tersebut masukkan kode berikut

menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font: 67.5% "Arial", Arial;

font-size:14px;

font-weight:bold;

}

.menu ul{

background:#333333;

height:35px;

list-style:none;

margin:0;

padding:0;

font-size:14px;

font-weight:bold;

}

.menu li{

float:left;

padding:0px;

}

.menu li a{

background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;

color:#cccccc;

display:block;

font-weight:normal;

line-height:35px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover, .menu ul li:hover a{

background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;

color:#FFFFFF;

text-decoration:none;

}

.menu li ul{

background:#333333;

display:none;

height:auto;

padding:0px;

margin:0px;

border:0px;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;

}

.menu li li {

background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

}

.menu li:hover li a{

background:none;

}

.menu li ul a{

display:block;

height:35px;

font-size:12px;

font-style:normal;

margin:0px;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover, .menu li ul li:hover a{

background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;

border:0px;

color:#ffffff;

text-decoration:none;

}

.menu p{

clear:left;

}

Simpan template

Pada gadget html/javascript, masukkan kode berikut:

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a>
<ul>
<li><a href="#">Windows Tricks</a></li>
<li><a href="#">Internet</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Microsoft Excel</a></li>
<li><a href="#">Microsoft Word</a></li>
<li><a href="#">Data recovery</a></li>
<li><a href="#">Antivirus</a></li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul>
<li><a href="#">Blog Tips</a></li>
<li><a href="#">SEO Tips</a></li>
<li><a href="#">Adsense</a></li>
<li><a href="#">Feed</a></li>
</ul>
</li>
<li><a href="#">Artikel Photoshop</a>
<ul>
<li><a href="#">Phone Secret Codes</a></li>
<li><a href="#">Phone Screenshot</a></li>
</ul>
</li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Artikel Komputer</a></li>
<li><a href="#">Panduan SEO</a></li>
</ul>
</li>

<li><a href="#">Photoshop Tutorial</a></li>
<li><a href="#">Free Translator</a></li>
<li><a href="#">Link Exchange</a></li>
</ul>
</div>

Ganti "#" dengan alamat blog kalian.
Ganti Teks berwarna "Hijau" dengan keyword link-nya

Simpan template

cat: untuk pasang script link diatas sebaiknya dipasang di widget header. Buat yang templatenya belum ada widget header sebaiknya dibuat terlebih dahulu, karena link diatas akan di pasang di widget header. untuk membuatnya bisa kalian lihat disini

Related Posts:

Tweet