Membuat Horizontal Dropdown Menu di Blog Dengan Jquery

Waktu itu saya memang sempat membagikan dropdown menu, eh tahu2nya option menu di blog, contohnya seperti gambar saya diatas. selain untuk mempermudah akses blog, cara ini juga dapat mempercantik blog kita yang tadinya usang dan jadul menjadi modern hehe. oke caranya begini sob.

1. Login ke blogger.

2. Pilih Rancangan --> Edit HTML --> Klik juga Expand Template Widget. (Back Up dulu template kalian !)

3. Cari kode </head> Gunakan Ctrl+f untuk mempercepat pencarian dan masukan Kode dibawah ini.

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){


$(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav


$(&quot;ul.topnav li span&quot;).click(function() { //When trigger is clicked...


//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(&quot;ul.subnav&quot;).slideDown(&#39;fast&#39;).show(); //Drop down the subnav on click


$(this).parent().hover(function() {
}, function(){
$(this).parent().find(&quot;ul.subnav&quot;).slideUp(&#39;slow&#39;); //When the mouse hovers out of the subnav, move it back up
});


//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass(&quot;subhover&quot;); //On hover over, add class &quot;subhover&quot;
}, function(){ //On Hover Out
$(this).removeClass(&quot;subhover&quot;); //On hover out, remove class &quot;subhover&quot;
});


});
</script>
<style type='text/css'>
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 100%;
background: #222;
font-size: 1.2em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6aqRJZ-rNZ4JNyKOvCyoJT1USsO4JiyEC6FEkSfLHyqhtAc2Tl0PX9uEa8dF1GafvAxQ4zFgTW09bPeBPeFrTqQ_yq5dh3vGXc1vI5GgFsDFutztJ3AfyjydKGJRdnGSSiXr50wzNIPbD/) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5KmyJJvYVC7Lwrk7w8XF6VUyGJJmBLWRrgcqPeK3eeoO-QpdsNNuNrHCeqI-pqEySdcg7ScFY0ajWzxNnf6mxWKpzylQY1qPKZpnAN7NxV1QiUNzKWP1XpKBVkZ0di0hcwhSHfe5DIus4/) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvCMTFp7OS-XqTanYoHMLkk6D1E02njKTYA7sJgMdetJrlIT1ldzOOusLq8q3S_pbAqdPHquR-SDPwwsuMKx0c2KOFI9EQLBfeO_VRg3HmNzMiaBgLdDjRtpXp3UtxQwYmrF97gGVlekgz/) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifkDzFE35XdSRyGkTorEOXD8Xe8DgP_INhvhF0lF-7Bg6CDPTDFuunsu6y7p9vnztcrlxuFFgE4217bFVOrzEsB-kDx5A5P-3llb6OwbZCunNbP9cacjRcbDoBWFouLiFmduwBcUN9fuDl/) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifkDzFE35XdSRyGkTorEOXD8Xe8DgP_INhvhF0lF-7Bg6CDPTDFuunsu6y7p9vnztcrlxuFFgE4217bFVOrzEsB-kDx5A5P-3llb6OwbZCunNbP9cacjRcbDoBWFouLiFmduwBcUN9fuDl/) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}
</style>

4. Simpan Template.

*Gunakan file Hosting untuk menyimpan file gambar kalian sendiri, kalian juga bisa mengubah lebar dan tingginya di kode yang berwarna biru

5. Klik Rancangan --> Elemen Laman --> Tambah Gadget

6. Pilih HTML/Javascript dan masukan Kode dibawah ini. 

<ul class="topnav">


<li><a href="http://hzndi.blogspot.com">Home</a></li>
<li>
<a href="#">Tutorials</a>
<ul class="subnav">
  <li><a href="#">HTML Tutorials</a></li>
  <li><a href="#">CSS Tutorials</a></li>
  <li><a href="#">PHP Tutorials</a></li>
  <li><a href="#">SQL Tutorials</a></li>
  <li><a href="#">jQuery Tutorials</a></li>
 </ul>
</li>
<li>
<a href="#">Templates</a>
 <ul class="subnav">
   <li><a href="#">1 Column</a></li>
   <li><a href="#">2 Column</a></li>
   <li><a href="#">3 Column</a></li>
   <li><a href="#">4 Column</a></li>
   <li><a href="#">Premium</a></li>
   <li><a href="#">Buy Now</a></li>
  </ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Contact Us</a></li>


</ul>


7. Ganti kode yang berwarna Biru dengan Url Kalian dan yang berwarna hitam dengan nama yang ingin kalian ingin kan.

kurang lebih hasilnya seperti ini

8. Simpan Template, Thanks to http://bdlab.blogspot.com dan Lasantha Barbara

Baca juga Membuat Sharing Dock di Blog dan Mengganti Cursor Blog

Postingan Terkait:

Posted in: Drop Down Menu