Cara Mudah Membuat Menu Dropdown Diblogspot

Selamat sobat Blognoler, ketemu lagi ya dengan saya penggemar Blog yang masih nol ( Blognoler ). Dalam kesempatan yang baik ini Blognoler akan berbagi satu lagi tutorial, yaitu mengenai bagaimana cara mudah membuat menu dropdown diblogspot. Sebelum saya melanjutkan artikel ini, silahkan sobat lihat dulu contoh menu dropdown yang ada di bagian atas header Blognoler. Bagaimana Sob, keren kan?

  Selanjutnya mari kita langsung saja praktekkan tutorialnya dibawah ini,
 
Cara Mudah Membuat Menu Dropdown Diblogspot :
 
1. Silahkan login dulu ke Akun Blogger Sobat, yang belum tau caranya silahkan baca artikelnya DISINI.
 
2. Kemudian masuk ke menu Template sobat > klik Edit HTML > Centang Expand Template Widget.
 
3. Cari Kode dibawah ini :
    ]]></b:skin>
    untuk memudahkan pencarian Tekan Ctrl+F atau F3 langsung.
 
4. Jika sudah ketemu silahkan Sobat Copy kode dibawah ini, dan Paste tepat di atas kode ]]></b:skin> :

ul.dropmenu{
 position: relative;
 margin: 0px;
 padding: 1px 0px 0px 0px;
 background:transparent url(http://1.bp.blogspot.com/-QlNjAxBB9YE/UGck33rIUgI/AAAAAAAAFsM/EnZ0AsEggjc/s1600/navigation.png) repeat-x scroll 0 0;
 display:block;
 height: 35px;
 font-family:Verdana,Arial,Helvetica,sans-serif;
 font-size: 12px;
}
.dropmenu li{
 position: relative;
 list-style: none;
 float: left;
 margin: 0px;
 padding: 0px;
}
.dropmenu li a{
 height: 22px;
 padding: 9px 30px 0px 15px;
 display: block;
 cursor: point;
 border-right: solid 1px #4a779d;
 color: #FFFFFF;
 text-transform: uppercase;
 text-decoration: none;
}
.dropmenu li span{
 display: block;
 float: right;
 height: 10px;
 width: 10px;
 background:transparent url(http://1.bp.blogspot.com/-0mKMqQrHeUo/UGck1O8Ip6I/AAAAAAAAFr4/KUFcGh_ZnRs/s1600/arrow_up.png) repeat-x scroll 0 0;
 position: absolute;
 top: 12px;
 right: 10px;
}
.dropmenu li  a:hover span{
 background:transparent url(http://1.bp.blogspot.com/-Em6wULHcShc/UGck0F2pikI/AAAAAAAAFr0/5ASpk3CSJRI/s1600/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu li:hover ul, .dropmenu li:hover div{
 display: block;
}
.dropmenu ul{
 position: absolute;
 display: none;
 width: 140px;
 padding: 0px;
 margin: 0px;
 border-bottom: 1px solid #ccc;
 background: #FFFFFF url(http://2.bp.blogspot.com/-o7fbBa3r5K0/UGck2fvSVyI/AAAAAAAAFsE/qrcuwfBBwXM/s1600/gradient.png) repeat-x scroll 0 0;
}
.dropmenu ul li{
 border: 0;
 float: none;
}
.dropmenu ul a {
  border: 1px solid #ccc;
  border-bottom: 0;
  white-space: nowrap;
  display:block;
  color: #0657AD;
  text-decoration: underline;
  text-transform: none;
}
a.selected, a:hover{
 color: #0657AD !important;
 background: #FFFFFF url(http://2.bp.blogspot.com/-o7fbBa3r5K0/UGck2fvSVyI/AAAAAAAAFsE/qrcuwfBBwXM/s1600/gradient.png) repeat-x scroll 0 0;
}
a.selected span{
 background:transparent url(http://1.bp.blogspot.com/-Em6wULHcShc/UGck0F2pikI/AAAAAAAAFr0/5ASpk3CSJRI/s1600/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu ul a:hover {
 color:#F67A00 !important;
 text-decoration: none;
 background-color: #F0F0F0;
 background-image: none;
}
.dropmenu div ul{
 position: relative;
 display: block;
}
.dropmenu li div{
 background: #FFFFFF url(http://2.bp.blogspot.com/-o7fbBa3r5K0/UGck2fvSVyI/AAAAAAAAFsE/qrcuwfBBwXM/s1600/gradient.png) repeat-x scroll 0 0;
 border: 1px solid #ccc;
 padding: 5px;
 display: none;
 position: absolute;
}
.dropmenu li div ul{
 border: none;
 background: none;
 position: relative !important;
}
.dropmenu li div a{
 border: none;
 border-bottom: 1px solid #ccc;
}
.dropmenu li div div{
 display: block;
 position: relative;
 background: none;
 border: none;
}
.dropmenu li div div a{
 display: inline;
 border: none;
 color: #666;
 text-decoration: underline;
 padding: 0px;
 margin: 0px;
 text-transform: none;
}
.dropmenu li div div a:hover{
 color: #000;
 text-decoration: none;
}
ul.left{
 float: left;
 width: 145px;
}
ul.right{
 float: right;
 width: 145px;
}
.small{
 color: #666;
 font-size: 10px;
 padding: 10px 5px 8px 5px !important;
 display: block;
 clear: both;
}
.products{
 width: 300px;
 padding: 15px !important;
}
.products ul{
 width: 100%;
}
.products ul li{
 border-bottom: 1px solid #ccc;
 height: 40px;
 padding: 10px 0px;
}
.products h2{
 font-size: 16px;
 padding: 2px 0px 3px 0px;
 margin: 0px;
}
.products p{
 color: #666;
 font-size: 10px;
 padding: 0px;
 margin: 0px;
}
.products img{
 float: left;
 padding-right: 10px;
}
.products  ul li a{
 display: inline;
 border: none;
 color: #666;
 text-decoration: underline;
 padding: 0px;
 margin: 0px;
 text-transform: none;
}
.products  ul li  a:hover{
 color: #000 !important;
 text-decoration: none;
 background: none !important;
}
.tutorials{
 width: 300px;
}
input{
 border:1px solid #4A779D;
 padding: 3px 8px;
 margin-bottom: 8px;
 width: 164px;
}
label{
 padding: 0px 0px 4px 0px;
 display:block;
}
button{
 background: #4A779D url(http://1.bp.blogspot.com/-QlNjAxBB9YE/UGck33rIUgI/AAAAAAAAFsM/EnZ0AsEggjc/s1600/navigation.png) repeat-x scroll 0 0;
 color: #FFF;
 border:1px solid #4A779D;
 padding: 4px 10px;
 width: 180px;
}
.emailupdatesform{margin: 10px 0 5px 5px; width: 180px; float: left;}
.emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 160px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
5. Cari lagi kode seperti ini  </head> .
 
6. Kemudian Copy kode dibawah, lalu Paste diatas kode </head> .
 

<script src=’http://mybloggerlab.com/Scripts/jquery.js’ type=’text/javascript’/>
<script src=’http://mybloggerlab.com/Scripts/dropdown.js’ type=’text/javascript’/>
<script>
$(document).ready(function(){
 $(&quot;#nav-one&quot;).dropmenu();
});
</script>
7. Kemudian cari lagi kode <div id=’header-wrapper’> .
 
8. Selanjutnya Copy lagi kode dibawah, tepat diatas kode <div id=’header-wrapper’> .
 

 

<ul class=’dropmenu’ id=’nav-one’>
<li>
    <a href=’Link URL‘>HOME</a> </li><li>
    <a href=’Link URL‘>MENU TITLE 1</a>
</li>
<li>
    <a href=’Link URL‘>MENU TITLE 2</a><ul>
       <li><a href=’Link URL‘>SUB MENU TITLE 2.1</a></li>
       <li><a href=’Link URL‘>SUB MENU TITLE 2.2</a></li>
       <li><a href=’Link URL‘>SUB MENU TITLE 2.3</a></li>
       </ul>
</li>
<li>
 <a href=’Link URL’>MENU TITLE 3</a><ul>
       <li><a href=’Link URL‘>SUB MENU TITLE 3.1</a></li>
       <li><a href=’Link URL‘>SUB MENU TITLE 3.2</a></li>
       <li><a href=’Link URL‘>SUB MENU TITLE 3.3</a></li>
       </ul>
</li>
<li>
 <a href=’Link URL’>MENU TITLE 4</a><ul>
       <li><a href=’Link URL‘>SUB MENU TITLE 4.1</a></li>
       <li><a href=’Link URL‘>SUB MENU TITLE 4.2</a></li>
       <li><a href=’Link URL‘>SUB MENU TITLE 4.3</a></li>
       </ul>
</li>   </ul>
9. Silahkan Sobat ganti tulisan yang berwarna “BIRU” dengan Link yang ingin sobat tujukan. contoh Link URL = http://blognoler.blogspot.com/. Kemudian tulisan yang berwarna “HIJAU” silahkan ganti dengan Judul Menu & Judul Sub Menu, contoh = HOME|ABOUT ME|KONTAK|DLL.
 
 
10. Kemudian Coba Klik “PRATINJAU”, untuk melihat perubahan. Jika sudah berhasil Klik “SIMPAN TEMPLATE”. 
 
  Mungkin sampai disini dulu sob, tutorial kali ini. Semoga artikel Cara Mudah Membuat Menu Dropdown Diblogspot, bisa berhasil Sobat praktekkan di Blog Sobat Sendiri.
 
 
** SALAM SUKSES SELALU **
** BLOGNOLER.COM **

 

Bloger mania yang senang berbagi tutorial seputar ngeblog, SEO, Adsense, desain website, Bisnis online, Sosial media, dan informasi teknologi lainnya

You might also like
Kirim Pesan WhatsApp Tanpa Simpan Nomor: Cara Mudah dan Cepat

Kirim Pesan WhatsApp Tanpa Simpan Nomor: Cara Mudah dan Cepat

Cara Mengetahui WhatsApp Diblokir: Kenali Tanda dan Alasannya

Cara Mengetahui WhatsApp Diblokir: Kenali Tanda dan Alasannya

Contoh Artificial Intelligence: Dari Diagnosis Penyakit hingga Seni Visual

Contoh Artificial Intelligence: Dari Diagnosis Penyakit hingga Seni Visual

Memahami dan Meningkatkan Proses Bisnis: Rahasia Sukses Perusahaan

Memahami dan Meningkatkan Proses Bisnis: Rahasia Sukses Perusahaan

Customer Relation Adalah: Kunci Sukses Membangun Hubungan dengan Pelanggan

Customer Relation Adalah: Kunci Sukses Membangun Hubungan dengan Pelanggan

Open Order Artinya: Pesan Produk yang Belum Ada di Stok

Open Order Artinya: Pesan Produk yang Belum Ada di Stok