Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Spoiler Simple Slide Panel di Blog

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(http://2.bp.blogspot.com/-ILC7hPpRAEo/UdBt_OueMHI/AAAAAAAAFZc/C0qEMo4sCG4/s154/Faceblog+Evolutions.png) no-repeat center top; }
.btn-slide {
background: url(http://4.bp.blogspot.com/-H6pRaqhIXoE/UdBuFtz0VLI/AAAAAAAAFZk/FE4NE_yMfXo/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

Berlangganan artikel via email

18 Response to "Membuat Spoiler Simple Slide Panel di Blog"

Petromak nyalakan dulu hehe
ini bagus untuk c-box atau fans page sob ...
top markotop lah ..ngopi ngopi sob

Balas

terimakasih sob udah berbagi....
layak untuk pemula seperti ane mempraktekannya nie...
makasi ya!

Balas

sepertinya scriptnya dikit dan gak berat nih mas..kapan2 saya coba deh..makasi mas sharingnya

Balas

save dulu mas...ntr aku terapin klw saya butuh ini. mksh yah?

Balas

bentuknya lebih bagus daripada punyaku.

Balas

ini keren gan..boleh saya praktekkan

Balas

Kebetulan dulu saya pernah pakai slide panel begini mas, tapi saya pakai buat pengganti 'hello bar'/'navbar khusus info2 singkat'. :D

Balas

gimana caranya biar bisa ditaru di samping.

Balas

masukin widget.
kalo biar bisa ditaruh belakang template coba gimana..

Balas

sangat boleh dan silahkan gan..

Balas

iya mas, panel ini jarang banget di gunain. soalnya limited editions :D
hohoho

Balas

tapi isinya lebih bagus punya bang bumi ya..

Balas

iya mba semoga bermanfaat :)

Balas

Boleh juga nih mas Andes, semakin hari totorialnya semakin bervariatif, kapan-kapan saya coba nih Spoiler Simple Slide Panelnya... sukses selalu mas :)

Balas

wajib d coba nih bang hehhe...mantap spoiler.y

sdh follow this blog abang atas nama "jiwa mati" ..polbek yaa


komen back jg yeee

Balas

warnanya di ganti bisa ga ?

Balas

nice share, must try this Pregnancies

Balas

mantapp... langsung pasang gan.

btw ada spoiler yang simple gak gann ?

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Spoiler Simple Slide Panel di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode