Membuat Multi Slide Widget Tanpa Edit HTML

Coretan Bang Dadan on

Saturday, January 5, 2013

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

---

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2GfGbW49fgPsixHEOewCC5XMgdY98SY_k3AWGF4oqtBf_RhjQXzmpwLb786NjWnHKgWHlUEy8YynWuu9kLh0yH8BdLWeCXPpFhnDC4btB8TU6seidzGlgJUWvVRZJdxg252aNmaH_yII/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/AVvXsEhUZriErKXTsyrx7Miv9GGiNyBTt8V2HHoeeK5T16zLDhmiMYOGYWDH_LL9G-DDPPP9R2kFprocEYxf7g_6EbK5_ASyG2Rz5gdH6UEnFNgQ2wngePG89SGoyxcajsJWkUaY7AFX0cQumgs/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg86_nhIVSDMP2ZGXbd_Cswtr_3vVb_3QxjRX00tHwodwrinw6cZO01j84CtL1kDVDDYjdm9fJypwg4pM2ON5m84nQ-lqrXyNDtC9cP3zJEaNiB6_2sf7aaVGVTQPgd5MEIa-9NaudtO-E/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/AVvXsEj9aYwSpw5pJS94NRC43YOLW0S3tlQGqHg4F-AqMhPIXo9jHN4VSwtsNlfWUbcpbmuJyV7na5__0FhrP9tW9lpVTGRGYZRvWWA6HgH0pCAW3YtYABm59sk6X2fTkKnk6R5GjlvMRLr4g5c/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...!