Cara Bikin Menu Drop Down Keren Di Blog

Eitssss lihat dulu gambar diatas... Heeeyyy!!! liatnnya biasa aja dunk. hehehe.... yaa... kira-kira seperti diatas menu dropdown yang akan kita buat saudara... ^_^

Okee next, karena sering mendapat pertanyaan dari saudara blogger tentang cara membuat menu dibawah nama blog alias menu drop down yang saya pake di blog Bosen Gaptek ini, sekarang saya akan berikan cara untuk membuat menu drop down yang tentunya lebih keren dari blog saya ini.. hehehe,, langsung saja simak Cara Bikin Menu Drop Down Keren Di Blog di bawah ini....

Seperti biasa, langkah yang pertama yaitu login dulu ke akun blogger anda..
kemudian pilih Rancangan>>Edit HTML>> Centang Expand Template Widget

Download/backup dulu template anda untuk menghindari kesalahan pada pengeditan ,Kemudian cari kode ]]></b:skin>,lalu copy dan paste kode dibawah ini tepat di atas kode ]]></b:skin> :

.nav {
height:35px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhls_SpUVpfYHk0utAnOYYRXj2mh8O0ZyM2mHnAbjbP95vuD_41emVkkL-WpH2cDzulPrQ4EGcVgLZI0UrAiaL2eZaUuwQY93WkRdoLwl0N2QgqkuF_MzojHNjrZ4jvjiKVRGOn30GxKno/s1600/bg.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:100;
margin:0;
padding:0;
}

.nav .table {
display:table;
margin:0 auto;
}

.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}

.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}

.nav .select a {
display:block;
height:35px;
float:left;
font-weight:bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhls_SpUVpfYHk0utAnOYYRXj2mh8O0ZyM2mHnAbjbP95vuD_41emVkkL-WpH2cDzulPrQ4EGcVgLZI0UrAiaL2eZaUuwQY93WkRdoLwl0N2QgqkuF_MzojHNjrZ4jvjiKVRGOn30GxKno/s1600/bg.gif);
padding:0 30px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#2b3238;
}

.nav .select a:hover,
.nav .select li:hover a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRspbY1P255FMXP8omb8MfEqbfGVZ1uzrWVWjmfq_gDyjqHP1m87-tlH7PJQSL7AUXHCHMC_hyOPs_wXTWqppP6FXLUYDph4VnJwK7HN5whOZP8V8ntrMgKVMtkhsAMdzcK7c5jYNIBV4/s1600/hover.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#2b3238;
}

.nav .select a b{
    font-weight:bold;
    }

.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 30px 0 15px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRspbY1P255FMXP8omb8MfEqbfGVZ1uzrWVWjmfq_gDyjqHP1m87-tlH7PJQSL7AUXHCHMC_hyOPs_wXTWqppP6FXLUYDph4VnJwK7HN5whOZP8V8ntrMgKVMtkhsAMdzcK7c5jYNIBV4/s1600/hover.gif) right top;
cursor:pointer;
}

.nav .select_sub {
display:none;
}

/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}

.nav .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}

.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#2b3238;
}

.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqhzTDbVcUQ1FkkeTURUjUsjBp8EunIxD34pAfpMWiU1aHS0EAs2BB8oCmSL7KVbzgHeRIvHzICin0EPuTOPQuBQKjijyxUHwsIv5WGtKlA2tKeR4aVvjX4glgkKinn9wNzFph1ZhuF3c/s1600/back.gif);
padding:0;
z-index:100;
left:0;
text-align:center;
}

.nav .current .show {
z-index:10;
}

.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 10px 0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#2b3238;
}

.nav .current .sub li.sub_show a {
color:#2b3238;
cursor:default;
}

.nav .select .sub li a {
    font-weight:normal;
}

.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
color:#73a0d2;
}

Setelah itu simpan template anda.
Masuk ke bagian Rancangan>>Elemen Laman>>Tambah Gadget>>HTML/Java Script.

Kemudian copy dan pastekan kode dibawah ini kedalam HTML/Java Script tersebut
:

<div class="nav">
<div class="table">

<ul class="select"><li><a href="#"><b>Bosen Gaptek</b></a></li></ul>

<ul class="select"><li><a href="#"><b>Bosen Gaptek</b></a>
<div class="select_sub">
    <ul class="sub">
        <li><a href="#">Bosen</a></li>
        <li><a href="#">Gaptek</a></li>
        <li><a href="#">Bosen</a></li>
        <li><a href="#">Gaptek</a></li>
        <li><a href="#">Bosen</a></li>
    </ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#"><b>Bosen Gaptek</b></a>
<div class="select_sub">
    <ul class="sub">
        <li><a href="#">Bosen</a></li>
        <li><a href="#">Gaptek</a></li>
        <li><a href="#">Bosen</a></li>
        <li><a href="#">Gaptek</a></li>
        <li><a href="#">Bosen</a></li>
    </ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#"><b>Bosen Gaptek</b></a>
<div class="select_sub">
    <ul class="sub">
        <li><a href="#">Bosen</a></li>
        <li><a href="#">Gaptek</a></li>
        <li><a href="#">Bosen</a></li>
        <li><a href="#">Gaptek</a></li>
        <li><a href="#">Bosen</a></li>
    </ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
    <ul class="sub">
        <li><a href="#">Bosen</a></li>
        <li><a href="#">Gaptek</a></li>
        <li><a href="#">Bosen</a></li>
        <li><a href="#">Gaptek</a></li>
        <li><a href="#">Bosen</a></li>
    </ul>
</div>
</li>
</ul>

</div>
</div>

Ganti kode " # "dengan alamat URL yang akan ditujukan
Ganti "Bosen Gaptek", "Bosen", "Gaptek", sesuai dengan kebutuhan anda...

Setelah itu simpan, dan lihat tampilan blog baru anda, dengan menu dropdown yang kereeen dan machaaaan.... hehehehe.. sangat mudah bukan ? okee saudaraa cukupp sekian informasi dari saya semoga bermanfaat... selamat mencoba dan semoga sukses...!!

Jangan lupa juga tinggalkan komentar anda pada kotak di bawah yaa..... ^_^

Terimakasih sudah membaca artikel tentang Cara Bikin Menu Drop Down Keren Di Blog anda bisa menemukan artikel ini melalui URL http://bosengaptek.blogspot.com/2012/04/cara-bikin-menu-drop-down-keren-di-blog.html. dan saya berharap semoga artikel Cara Bikin Menu Drop Down Keren Di Blog ini bermanfaat bagi anda yang membutuhkan. Terimakasih...

Bosen Gaptek

Saturday, August 6, 2011

Cara Bikin Menu Drop Down Keren Di Blog

Baca juga yang lain :

15 comments: