Bismillahirrohmanirrokhim .. Selamat Malam Sobat semua ....
Malam" begini ngapain enaknya .. Hmm .. Bingung Gue .. dari pada gue jadi lebih Bingung lagi .. lebih baik Gue Posting sesuatu yg mungkin ada manfaatnya buat sobat .. Yaitu "Tutorial Membuat Navigasi Dropdown Menu" .. tutor ini akan membikin sedikit Repot sobat sekalian .. Cman hasilnya .. hmmm .. bisa meringkas banyak Menu" yg ada di Blog sobat .. dan yg pastinya akan membuat blog sobat Terlihat semakin ekslusif ... hehehe ..
Bentuknya kaya gini ..
Dan Bila di sentuh .. contoh salah satunya kaya gini ..
Gimana .. ?.. Bila sobat tertarik .. silakan ikuti tutoral di bawah ini ..
"Tutorial Membuat Navigasi Dropdown Menu"
1. Login ke Blogger sobat ==> Dasbor ==> Template ==> edit HTML ==> Lanjutkan dan centang kotakan kecil di atasnya ...
2. Pencet F3 atau Control F untuk mengeluarkan kotak pencarian [ini memudahkan sobat untuk mencari kode kode HTML yg Rumit]
3. Tulis /Copas Kode ]]></b:skin> di kotak pencarian [sebelah kanan atas] ==> bila sudah muncul di kerimbuanan kode" HTML di bawahnya dan biasanya di tandai dengan sebuah warna ==> bila belum muncul tekan enter ..
4. Bila sudah ketemu .. Letakkan kode di bawah ini , tepat di atas Kode ]]></b:skin>
.nav .select a:hover,
.nav .select li:hover a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiALUP6FrFp8nhfIKDm-EF9ZG-TQQh-mOVrwaIBRnCoYSyvAq42FMx4r3Tes5YpnV7H6FUoooAx-yHkPUWU-wzeBFxDDLs2j71QjgeoxFd1ItU5M3zMQUpXoaAdFA8VhrfAW1sXfycSlR2/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/AVvXsEhiALUP6FrFp8nhfIKDm-EF9ZG-TQQh-mOVrwaIBRnCoYSyvAq42FMx4r3Tes5YpnV7H6FUoooAx-yHkPUWU-wzeBFxDDLs2j71QjgeoxFd1ItU5M3zMQUpXoaAdFA8VhrfAW1sXfycSlR2/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/AVvXsEj8f4XSx3Tn3s6Bwyzoj7JF04_REs446z7yyEOuSGOhUlsBPlae0zRCPeuK-18jhwLPmT_ISi-f4l2R9mIH2QfJmEYo4s-hJzb1HekD6ovXPfsDVg7SlM8dSGVK-vsVCER9IHisfdS4Skg0/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;
}
<!--[if IE]>
.nav ul {display:inline-block;}
.nav ul {display:inline;}
.nav ul li {float:left;}
.nav {text-align:center;}
.nav .select a:hover b,
.nav .select li:hover a b {float:none;}
<![endif]-->
5. Setelah itu Copas lagi Code <div id='header-wrapper'> atau <div class='header-outer'> dalam kotak pencarian , setelah salah satu code tersebut Muncul .. maka letakkan Code di bawah ini, tepat bawahnya ..
Untuk melihat file Click Spoiler
<div class="nav">
<div class="table">
<ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</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="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</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="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</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="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
6. Click Prantinjau untuk melihat hasil sementara .. bila tidak terjadi Error maka silakan terusin mengisi dengan file/data sobat dengan cara mengedit Tanda, angka atau huruf yg sudah saya tandai dengan warna ..
ket :
- untuk warna ungu silakan edit dengan link URL sobat
- untuk warna merah silakan edit dengan nama" file /data sobat
7. pratinjau lagi untuk memastikan tidak terjadi Error .. dan Save ..
Sumber : google
Semoga Bermanfaat untuk Kita semua ...
Dan Semoga rahmat seta Hidayah-NYA selalu tercurah untuk kita semua .. Amin ..
Posting Komentar