Cara Memasang Widget Slide pada Sidebar Blog

Hallo sahabat blogger kali ini saya akan berbagi tentang cara memasang widget di blog yaitu membuat tampilan slider pada sidebar widget guna menambah menu yang lebih keren pada blog.
Hal ini dapat membantu sobat agar isi dari konten atau widget sobat menjadi minim dan tidak terlalu melorot kebawah,intinya agar isi konten bisa lebih hemat tempat.Caranya sama dengan dengan menambah widget pada tata letak dasbor sobat Baiklah sobat berikut langkah-langkahnya :

• Pertama sobat login terlebih dahulu ke blog sobat
• Kemudian Pilih Tata Letak - Edit HTML/Javascript
• Kemudian masukan kode di bawah ini 

<style type="text/css">

#accordion{width:100%;margin:auto;border:1px solid white}

#accordion h2{padding:5px 10px;background-color:#0000ff;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKo4zWDhSexaruDafoC4tGiclap03dc5G1jKCC-YSu9y4w-Ylk51Xha7BnC1mPVODgp4IGmqrV9vq9AjXAz_hpn4uGDPanMgjykEnHz9tcg6Xk0wSTAuGZHKWBfZ5WkLc-LLGUTLqTx0Q/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/AVvXsEjs6w3c47Lnz6N7Bc5JQzRkech6q_y7INU03FjczfPOkQKoLGPLbsbbMPzlPIGYSxJuagcE8jqAPW0chJaSnazTV80Vbl6Isae3GlNv9PzfFyoolV4WXQ9gmakKf98Aat_8OY7IQFCIWL0/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">

Isi Konten Sobat

</div>

<div id="accordion">

<h2>Menu 2</h2>

<div class="content">

Isi Konten Sobat

       

</div>

<div id="accordion">

<h2>Menu 3</h2>

<div class="content">

Isi Konten Sobat

</div>

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

Keterangan : Huruf yang berwarna merah ganti dengan judul yang anda ingin kan, sedangkan huruf yang berwarna biru ganti dengan konten yang mau anda tampilkan