Cara Bikin Menu Drop Down Keren Di Blog

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/AVvXsEjgKN4rrjPBrODvNOZyAvobb3dXQIdpPl2ntBhoafUehD4_puoFlCB-rE_-Va1BN8oJpix83j4rTW6fnmU0-5zO_6acaLaCjqwifz_FDhW1XG21qKo4kGC3J_wb3tAK3Cmvz_F_u9chWDg/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/AVvXsEjgKN4rrjPBrODvNOZyAvobb3dXQIdpPl2ntBhoafUehD4_puoFlCB-rE_-Va1BN8oJpix83j4rTW6fnmU0-5zO_6acaLaCjqwifz_FDhW1XG21qKo4kGC3J_wb3tAK3Cmvz_F_u9chWDg/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/AVvXsEimGB5U0FhInhcTP3cvrsxoNcXzMIEpiCh_wAvNzAsIOVbaNDWJuP5cggoFr6oqFCGd-xpgBcdoTLVuYzlfKNEzXqVYQTGVFkhQgH9grnM9U9fzMVxp5liAlk9vrmSVZf2pSjKNCMvr_Cc/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/AVvXsEimGB5U0FhInhcTP3cvrsxoNcXzMIEpiCh_wAvNzAsIOVbaNDWJuP5cggoFr6oqFCGd-xpgBcdoTLVuYzlfKNEzXqVYQTGVFkhQgH9grnM9U9fzMVxp5liAlk9vrmSVZf2pSjKNCMvr_Cc/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/AVvXsEj46P70qpYOcNMpoeZHuU67C7_nZsvGYEgJix32gYB32AvFtDot3PNES4OWrP-LZwQGX4gu_Rb0B9ga3bnM20eRSXWELQkqcsKwEoNP_UI1FVJuU5UF3JU15kbAAZcpxroh8Z5G03BqJlg/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...

Posted by meiria

Tweet