Membuat Spoiler Simple Slide Panel di Blog

Membuat Spoiler Simple Slide Panel di Blog – tombol spoiler pada blog sekarang memang sudah sangat jarang digunakan, dan pada tutorial yang sebelumnya saya juga sudah pernaha membahas mengenai tombol spoiler pada tutorial yang berjudul membuat push down panel dengan CSS3 di blog. Tombol spoiler biasanya digunakan oleh para blogger untuk beberapa membuat suatu artikel posting supaya lebih ringkas dan tidak memakan banyak ruang posting jika pada halaman artikel tersebut memang merupakan halaman dengan isi konten posting yang panjang dan biasanya fungsi dari tombol spoiler ini digunakan untuk memecah halaman tersebut agar menjadi lebih ringkas, seperti jika terdapat banyak gambar maka pada gambar tersebut dapat ditampilkan didalam spoiler agar jika terdapat banyak gambar maka bisa kita tampilkan dan juga bisa kita hide atau tutup. Jadi pada dasarnya tombol spoiler ini merupakan tombol show hide atau dengan kata lain yakni suatu tombol yang dapat menampilkan maupun menyembunyikan suatu konten atau artikel di dalam blog. Untuk lebih jelasnya tombol spoiler ini bisa dilihat pada demo, dan untuk membuat tombol spoiler ini maka berikut adalah tutorial cara Membuat Spoiler Simple Slide Panel di Blog.

1. Login ke akun blogger.
2. Lalu copy kode dibawah ini.

<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery.gallery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});   
});
</script>
<style type="text/css">
#panel { color:#000; background: #E9FBE9; height: 200px;  padding: 10px; display: none; }
.slide { margin: 0; padding: 0; border-top: solid 5px #52e052;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIo8hfMHM-bx2tT5VON39wdZb4d1IuzLyK0klj8-rrOoD_NJdEmKzPfFn59z58yLcmfZsjgFjEw3PyfvniwjcD3R7vHZtAoj9Nl51b4Vxmd6llQLaAVqy55rd1sU_ciy-sKbI4xlUjHTDv/s154/Faceblog+Evolutions.png) no-repeat center top; }
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXcBVU2l7wEiYm0uriT4cV0JbSqA1gnapdcYFKDTHpRncRiYj7f_mgboeMVUXkORGRoSNeVcPSDpSBAXmPl3ZS-uHvwgEkh4g7dwVzcsUb0OpbmXaCOl51lC72RJUZnQMVO62u5_bVjFxq/s70/white-arrow.gif) no-repeat right -50px;
text-align: center; width: 144px; height: 31px;
padding: 10px 10px 0 0; margin: 0 auto; display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #000; text-decoration: none; }
.active { background-position: right 12px; }
</style>

<div id="panel">
GANTI DENGAN TEKS/DESKRIPSI YANG DI INGINKAN
</div>
<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>

3. Selanjutnya paste kode tersebut kedalam posting mode HTML. Selanjutnya klik Publikasikan.

DEMO:

GANTI DENGAN TEKS/DESKRIPSI YANG DI INGINKAN

Slide Panel