Bloggotutorialblogspotdotcom-Bagaimana Cara Memasang Widget Multi Slide Yang Simple Tanpa Edit HTML? Setelah sharing mengenai Tim Google doodle, oia masih ingat siapa itu pimpinan doodle google? Yupz, semoga bermanfaat saja. Oia hampir lupa menyapa para pembaca……., Selamat siang para pembaca dimanapun anda berada semoga selalu dalam keadaan sehat. Pada kesempatan kali ini saya akan share tentang ‘’Widget’’, widget ini bernama Multi slide widget, gunanya untuk memperindah dan merapikan blog sobat, inilah image dari widget multi slide nya
Tuh kan keren, bagaimana tertarik bukan, jika tertarik silahkan pasang/ install dengan mengikuti tutorial dibawah ini;
Pertama-tama sobat Login dulu ke blogger, Terus Menuju dasbor/rancangan pilih Tata Letak, Kemudian Add Gadget dan Pilih HTML/Javascript dan Selanjutnya silahkan sobat copy kode dibawah ini pada HTML/Javascript
<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/AVvXsEgiLsYOdPoxfpqYwgTnj49k7f-cuEffi3S79T0n8ow_7qAR1b_PLuQC_L81yAHqLbO9HudsT_GrKuBXv4aO_cOz-QkoobJg-Had3AmS_YhX3G-WvNbBs5YPeMKbKQyootTVcYH_BsYDZ3o/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/AVvXsEjXQZ6mHYNfC0xabv9E07oTBUHVUzoCRfhjhge7Cg23Mh6DXQBdRrXcnePuoQYius5cfyuYFZg_Ak_d62M-5ZOOq-PJN8E4YP40SdIroA00ZeCblspuRr8IM1PCykgZw78T0jCYSCJ5I8Q/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. |
Selesai deh, Silahkan sobat lihat bagaimana hasilnya?
Semoga bermanfaat.
Salam
Post a Comment