Cara Mudah Membuat Menu Dropdown Diblogspot

by
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 **

 

11 thoughts on “Cara Mudah Membuat Menu Dropdown Diblogspot”

  4. Your оwn write-up prοvideѕ proven beneficіal to us.
    It’s quite eduсationаl and you're naturally quite educated in this field. You get popped my personal eye to be able to different opinion of this specific subject along with intriguing, notable and strong articles.

    Reply

Leave a Comment