Cara Membuat Menu Tabview Accordion Di Blog

Cara Membuat Menu Tabview Accordion Di Blogspot

Widget ini hampir mirip dengan widget tab view atau tabber, salah satu fungsi dari widget accordion menu selain memperingkas tampilan blog, juga dapat memperindah blog, seperti juga fungsi tab view, jadi blog sobat akan kelihatan lebih ringkas dan rapi dan menarik. Anda bisa letakkan menu accordion ini pada sidebar blog atau dimanapun anda suka. Bagi sobat-sobat blogger yang mau mencoba, berikut ini kode scriptnya dan tutorial singkatnya :

Login ke Blogger anda.
Masuk ke Layout, Add A Gadget pilih HTML/Javascript.
Kemudian tambah widget dan masukkan kode di bawah ini ke kolom yg tersedia.
<br /> <style type="text/css"> #accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(http://1.bp.blogspot.com/-qtI_UsPdZwc/Tmzg5K8eADI/AAAAAAAABrU/ScrT9X8fBBY/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(http://2.bp.blogspot.com/-9If6SXYDklM/Tmzg4W8YwuI/AAAAAAAABrQ/XlCiTeVqtq0/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;} </style><br /> <script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script><br /> <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><br /> <div id="accordion"> <h2> Title 1</h2> <div class="content"> Isi konten 1<br /> </div> <div id="accordion"> <h2> Title 2</h2> <div class="content"> Isi konten 2<br /> </div> <div id="accordion"> <h2> Title 3</h2> <div class="content"> Isi konten 3<br /> </div> <div id="accordion"> <h2> Title 4</h2> <div class="content"> Isi konten 4<br /> </div> <div id="accordion"> <h2> Title 5</h2> <div class="content"> Isi konten 5<br /> </div> </div> </div> </div> </div> </div>
Terakhir simpan dan lihat hasil menu accordion pasti akan lebih menarik dari sebelumnya.

Untuk "Title 1 sampai dengan 5" isi sesuai dengan nama script atau link yang sobat masukkan. Misalnya di title 1 sobat ingin membuat Buku Tamu, maka title 1 di ganti dengan nama Buku Tamu atau c-box, dan di isi konten 1 sobat masukkan kode script dari c-box atau buku tamu tersebut, dan seterusnya untuk title dan isi konten berikutnya terserah sobat mau memasukkan script atau link apa di dalamnya, apakah recent post, coment post atau link iklan semua terserah selera sobat blogger. Untuk warna dan desain background sobat juga bisa mengeditnya sesaui selera sobat.

Menu accordion diatas untuk blog yang mempunyai background warna terang. Bagi sobat yang mempunyai blog warna gelap atau hitam, tinggal diganti kode css-nya. Lebih lengkapnya seperti kode di bawah ini :

<br

/>
<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white} #accordion 
h2{background-color:#5f5e5e;background-image:url(http://2.bp.blogspot.com/-w2rXmKKoIWw/TyAHgaAoNyI/AAAAAAAAEvo/EQb_qVUputU/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right

center;color:#d0cfce;font:normal 11px Tahoma;border-bottom:1px solid 
#323333;cursor:pointer;padding:5px 10px} #accordion .content{font:normal
 11px Arial;background:#333;padding:5px 10px} #accordion .content 
li{background-image:url();background-repeat:no-repeat;background-position:left

center;text-indent:0;border-bottom:1px dotted 
#595959;line-height:1.3em;margin:0;padding:2px 0 3px} #accordion 
.content li a:hover{text-decoration:none;color:#ff3c00} #accordion 
h2.active{background:#5f5e5e;background-image:url(http://3.bp.blogspot.com/-DAMBJVFbFmM/TyAHg2YnFAI/AAAAAAAAEvs/n6uvhcqO7V8/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right

center;font-weight:700} </style><br />
<script type="text/javascript" 
src="http://yourjavascript.com/121511228073/accordion-menu.js"></script><br

/>
<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><br />
<div id="accordion">
<h2>
Title 1</h2>
<div class="content">
Isi konten 1<br />
</div>
<div id="accordion">
<h2>
Title 2</h2>
<div class="content">
Isi konten 2<br />
</div>
<div id="accordion">
<h2>
Title 3</h2>
<div class="content">
Isi konten 3<br />
</div>
<div id="accordion">
<h2>
Title 4</h2>
<div class="content">
Isi konten 4<br />
</div>
<div id="accordion">
<h2>
Title 5</h2>
<div class="content">
Isi konten 5<br />
</div>
</div>
</div>
</div>
</div>
</div>

semoga bermanfaat. Terima kasih http://www.maskolis.com atas kode scriptnya.

Share On :

Berlangganan artikel via email!