-->

Membuat Multi Slide Widget Tanpa Edit HTML



Cara Membuat Multi Slide Widgate Tanpa Edit HTML - Pada postingan yang lalu bang dadan pernah membahas Cara Membuat Button Social Slide disamping Blog, nah untuk kesempatan kali ini bang dadan akan membahas artikel tentang Cara Membuat Multi Slide Widgate di Blog tanpa edit HTML. Sahabat blogger mungkin pernah atau sering melihat tutorial ini di blog yang lain dan bahkan dari sobat mungkin ada yang sudah menggunakan tutorial ini, namun bagi yang belum pernah memasang widgate ini dan ingin memasang nya di blog, silahkan ikuti langkah - langkah berikut: untuk DEMO sobat bisa lihat di sidebar blog ini. atau screen shootnya seperti gambar dibawah.

Cara Membuat Multi Slide Widgate Tanpa Edit HTML

Cara Membuat Multi Slide Widgate Tanpa Edit HTML

1. Login ke akun blog
2. Menuju dasbor/rancangan pilih Tata Letak
3. Kemudian Add Gadget dan Pilih HTML/Javascript
Selanjutnya silahkan sobat copy kode dibawah ini pada HTML/Javascript

 Berikut Kodenya:

<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>
<script type="text/javascript" src="http://google-js.googlecode.com/files/labelslide.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>

Keterangan:
❞ Tulisan yang berwarna Orange adalah Judul Widgate
❞ Tulisan yang berwarna merah adalah kode widgate
Silahkan ganti sesuai keinginan anda.

4. Klik simpan, dan lihat hasilnya.

Kode HTML diatas adalah tampilan multi slide widgate berwarna Light, kalau sobat ingin berwarna Dark, silahkan copy kode yang dibawah ini:

❞ Berikut kodenya:

<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>
<script type="text/javascript" src="http://google-js.googlecode.com/files/labelslide.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>

Nah mungkin cukup sekian dulu pembahasan kita kali ini tentang Cara Membuat Multi Slide Widgate diblog Tanpa Edit HTML. referensi ini bang dadan kutif dari http://www.maskolis.com/2012/12/membuat-menu-accordion-tanpa-edit-html.html. silahkan kunjungi link tersebut jika ingin melihat langsung kepada sumbernya. Dan bang dadan ucapkan Selamat mencoba dan Semoga bermanfaat..!!!
Labels: blogger tutorial, Widget

Thanks for reading Membuat Multi Slide Widget Tanpa Edit HTML. Please share...!

26 Comments on Membuat Multi Slide Widget Tanpa Edit HTML

  1. Bagus nih widgetnya... tp menurut saya mending Cssnya di taruh bersama css lainnya di html jgn diwidget agar pembacaannya lebih cepat dan loading blogpun agak cepat :)

    Thanks atas sharingnya bang :)

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  2. widget accordionnya keren sob

    ReplyDelete
  3. Ardian Tokotua@ Terimakasih sob sarannya, nanti saya coba..!!

    Andreas Wijaya@ Terimakasih sob atas kunjungannya. salam kenal!!

    ReplyDelete
  4. accordion ya sob? css emang ga da tandingnya, hehe..

    ReplyDelete
  5. Iya sob,, emg enak pake css.. oy tksh atas kunjungan nya..!!

    ReplyDelete
  6. Iya gan, silahkan.. Semoga bermanfaat..!!!

    ReplyDelete
  7. berhasil cuy tapi susah masukin title nya. hee

    ReplyDelete
  8. Tinggal ganti aja cuy, title 1 sampai 5 nya..!!!

    ReplyDelete
  9. Hore berhasil ,
    thx infonya gan :)

    1 lagi ane boleh minta widget disamping itu gg gan ?
    kalau boleh PM ane ya gan blackkicot@gmail.com

    ReplyDelete
  10. Wiget yg mana gan ?
    yg ini mungkin ya: http://www.cbd.web.id/2012/12/membuat-button-social-slide-disamping.html

    ReplyDelete
  11. mungkin maksudnya yang jejaring sosial itu kali mas

    ReplyDelete
  12. Gan minta Code widgetnya dong , yang jejaring sosial :-d

    ReplyDelete
    Replies
    1. Oke sob, silahkan kunjungi http://www.cbd.web.id/2013/03/membuat-widget-jejaring-sosial-css.html

      Delete
  13. Wauwww, lagi-lagi artikel yang keren bangetz, matur thanks you masbro!

    ReplyDelete
  14. Terima kasih ilmunya bang..
    ane newbie belajar bikin blog

    ReplyDelete
    Replies
    1. Sama - sama sob, moga bermanfaat..!!
      Semangat ngeblognya kawan..!!

      Delete
  15. Bang, caranya memasukkan CSS ini ke template HTML gimana? Thanks...

    ReplyDelete
    Replies
    1. Gampang kawan tinggal copas aja kode cssnya ke dalam kode di atas. :)

      Delete
  16. mantap hu....lanjut ngeblognya

    ReplyDelete

Back To Top