Cara Membuat Tampilan Slider Pada Menu Widget

Halo sahabat blogger, kali ini saya ingin berbagi tips membuat menu widget menjadi tampilan slider pada sidebar. Sekilas tentang widget yang saya pakai saat ini. Oke berikut langkah- langkahnya :

• Pertama sobat login ke blog sobat
• Kemudian pilih tata letak - Tambahkan gedget
• Kemudian pilih HTML/Java sricpt
• Copy dan paste kan kode HTML di bawah 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/AVvXsEjXc1okVhiAqiwzBZ9g5nXOSFJmVEA8oQIq-dqTtdzjSSXS8YGCdo3RKe20KRdmX8peia8arReZeoHs06t76o2vlZtEyIWqOIG-TZW46L-YpDvLiEb5PREG5vFNwF6N1XXAXpnn_wGVfrQ/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/AVvXsEhN8dbsgKA3Xbx2Z6D5KDypOOM4LMRO14NTJhGOZ_8Aa7mGhNHKzDu5y7nGXJv2o4bwgiWLVxhOiltuQsGLv5v-au9lAzu1sDxQJcZzeIsWh_srQBp-XFwxX7-XkShK2gxwHO_DARWFpLk/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>Menu 1</h2>
<div class="content">

"Letak Disini Konten Sobat"


</div>
<div id="accordion">
<h2>Menu 2</h2>
<div class="content">

"Letak Disini Konten Sobat"



</div>
<div id="accordion">
<h2>Menu 3</h2>
<div class="content">


"Letak Disini Konten Sobat"



</div>
<div id="accordion">
<h2>Menu 4</h2>
<div class="content">

"Letak Disini Konten Sobat"


</div>
</div></div></div></div></div>

Ketrangan :

• Tulisan yang berwarna HIJAU  ganti dengan judul widget yang ingin sobat buat
• Tulisan yang berwarna MERAH ganti dengan Konten sobat (isi konten berbentuk script) misalnya bisa anda lihat contoh script untuk Arsip Blog , dan Lebel Blog
• Save dan lihat hasilnya

Demikianlah artikel mengenai Cara Membuat Tampilan Slider Pada Menu Widget  semoga artikel ini bermanfaat untuk kita semua.