Cara Membuat Spoiler Slide Panel

Setelah sebelumnya memposting cara membuat spoiler keren pada blog, sekarang saatnya Kang AP memberikan trik bagaimana cara membuat spoiler slide panel. Untuk fungsinya sebenarnya sama saja dengan spoiler-spoiler lainnya, yaitu untuk menyembunyikan teks/deskripsi yang terlalu panjang. Oke tanpa membuang waktu lagi, berikut cara membuat spoiler slide panel. Mangga disimak !!

1. Login ke Blogger

2. Bikin postingan baru

3. Pilih HTML bukan Compose

Baca juga :
» Cara Mudah Memasang Widget Ganti Background Blog
» Cara Membuat Tombol Share Valid HTML5 Pada Blog
» Cara Membuat Spoiler Keren Terbaru Pada Blog

4. Masukkan kode berikut diantara teks/deskripsi yang mau anda sembunyikan

<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/AVvXsEjCg3deRurHGRhXNJVJtIB3sJlT0g6dDQ_hJZRxGQyD9ILmWjTc_nQh6T63bdGUvks01DRVWTBDIYPiBOQlUUwXmS2fke91GlEFgSa7oYdANxk4fJk1LkHUzqng4lhQik0A9Ev1abW-zGuB/s154/Faceblog+Evolutions.png) no-repeat center top; } .btn-slide { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPpTXf2PM2DOXPW17TH_oWN_DueFsARNXBDZaeaz4_JJ9-wDfMRbTkNC6bb8axeh73vX4K_Rr-lXzdIpyMdUe_VQmXmDZ46BrYVwd4ibEkMobAVRk9fybDr2wxrQ08Y8wmVpjWaJM7knO9/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 SOBAT INGINKAN </div> <p class="slide"><a href="https://ap-thea.blogspot.com" class="btn-slide">Slide Panel</a><small><a href="https://goo.gl/Uze1T6" target="_blank">Salam Blogger</a>

Note. Tulisan yang berwarna biru adalah teks/deskripsi yang mau anda sembunyikan


5. Sekarang pilih HTML, lalu Publikasikan

6. Lihat hasilnya

Demikian cara membuat spoiler slide panel, semoga bermanfaat.

Please Share » » Facebook Google+ Twitter