Cara Mudah Membuat Menu According

Hai sobat kali ini saya ingin berbagi tutorial Blog tentang Cara Membuat Menu According yaitu menu yang bersembunyi dan muncul ketika di klik.Nah menu ini sangat simple dan sangat elegant karena bisa di katakan menu ini hanya memakan tempat halaman blog hanya sedikit saja apalagi dalam menu ini dapat di isi dengan berbagai content seperti social media,berita terbaru dan sebagainya.Nah bagi sobat ingin memasang menu seperti pada gambar dibawah ini.Silahkan simak Tutorial dibawah.

Cara Membuat Menu Hidden Show :

1.Pertama silahkan sobat login terlebih dulu di Blogger.com

2.Pilih Layout > Add a Gadget.

3.Pilih HTML/Java Script.

4.Kemudian Copy Code dibawah ini :

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMykCBIZ36XRwrjWkxwwR6wZH8PJx5-8cbWY1XiYWY5KYo0vnrvasGbm1xnxp04Sw-GoC_otA7CFk4d98BjlYeJQa-cpOJyI9T1jjkY4Jnux7sOloa_7jdH2bEqdXzRXWKigu2jhpJyVI/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZhnN0pp8yrZG6yWHNX9hLq3LeqMrUQmJE-c7S_KckdkcnkDGr_GPqObIHXmgT2l_RHRpFYgdHwAowVYpFez1RaZ06i0VRMMSUgAQ3nGQngPIFsfZ2UKI5npd081XiOTO8GIElLf6ppbw/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>
Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>
Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>
Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>
Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>
Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div>
</div>
</div>
</div>
</div>

5.Pastekan code no 4 pada HTML/Java Script.

6.Save Template.

#Catatan :
-Pada Title silahkan sobat ganti dengan judul yang di inginkan
-Pada Isi Content silahkan sobat isi dengan widget,iklan ataupun yang lainnya

Gimana sobat mudah bukan ? Ok sobat sekian Tutorial Cara Membuat Menu Bersembunyi di Blog dari saya,baca juga Tutorial lainnya klik disini.