Kemarin Abenk telah membahas bagaimana cara membut Menu Accordion dengan cara edit HTML, nah pada kesempatan kali ini akan dibahas cara Membuat Menu Accordion Tanpa Perlu Edit HTML.
(he..he.. walau jadul pembahasan nya, tapi mungkin ada sobat yang memerlukan nya )
Langsung Saja Sobat kita bahas yang satu ini.
Salah satu fungsi dari accordion menu selain memperingkas tampilan blog, juga dapat memperindah blog, seperti juga fungsi tabber atau tab view, jadi blog akan kelihatan lebih ringkas dan rapi. Tutorial ini sudah agak lama, hanya memperbaharui tampilan menunya saja. Sobat bisa letakkan menu accordion ini pada sidebar blog. Bagi yang mau mencoba, berikut ini cara membuatnya :
- Login ke Blogger dengan akun Sobat
- Masuk ke Layout, pilih HTML/Javascript
- Kemudian masukkan kode berikut ini ke dalamnya
<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{background-color:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW8K4DXCG1o_z0pAdR1N8ZrJx9xKTYamPohACBE0Pj2JSNUGxy1B3OhLdyyLT0U4_WxckjV06fl9pyxQPWK4o8Yp2c6eaDv2QD89tK1sYWr8_27GXKmYGUPs3rkLQu45tWmGYvMBZuCzE/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVh7F_efZze-mAqulUOFZp8tCWx9g8osQ9YKOI0abrtwYWgiMn6PVcsWq5y34fgnFnDjKqmgkqkJ0hQ9uF8QUcqzZUi2ud4iwvWM7zleXi-6W2mjmRnsopawrPOxMVBJ-vK48bsyIGxxI/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;font-weight:700} </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>
#accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{background-color:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW8K4DXCG1o_z0pAdR1N8ZrJx9xKTYamPohACBE0Pj2JSNUGxy1B3OhLdyyLT0U4_WxckjV06fl9pyxQPWK4o8Yp2c6eaDv2QD89tK1sYWr8_27GXKmYGUPs3rkLQu45tWmGYvMBZuCzE/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVh7F_efZze-mAqulUOFZp8tCWx9g8osQ9YKOI0abrtwYWgiMn6PVcsWq5y34fgnFnDjKqmgkqkJ0hQ9uF8QUcqzZUi2ud4iwvWM7zleXi-6W2mjmRnsopawrPOxMVBJ-vK48bsyIGxxI/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;font-weight:700} </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>
| DEMO |
Silahkan Memberikan Komentar Jika Ada Hal Yang Kurang Dipahami Dengan Topik Yang Telah Sobat Baca. Biasakan Berkomentar Dengan:
۞ Sopan dan Bahasa Yang Mudah Dipahami.
۞ Tidak Memasukkan Link Aktif Dalam Form Komentar.
۞ Berkomentar Sesuai Artikel Atau Postingan.
۞ Berilah Informasi, Jika Script Atau Link Yang Tidak Berfungsi Dan Mati.
۞ komentar Jorok / Kasar / SARA / PORNO Anggap Sebagai SPAM.
No comments :
Post a Comment