√ Cara Menciptakan Spoiler Slide Panel

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

1. Login ke Blogger

2. Bikin postingan baru

3. Pilih HTML bukan Compose

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

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

<script type="text/j4vascript"> $(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/AVvXsEj2MAkV4ul71cLAHGIwKl12eXoE4ZK6eBIM4cysDCFwj16XzvPp8ttGEShpI0zLSM5pNzBcxs1V82CpvYybV16o9-rf9TJd8JTX4cxyWcZDXxUFKZFwnWX_RG-w2ZmcnUeuRCEGZrDgBwwa/s154/Faceblog+Evolutions.png) no-repeat center top; } .btn-slide { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJrYoWncIhMg84LrBuVrrEsGnsg_6JtFnL8trrIIo58jFcX8u014pIqTOSPXoX3guOQZkeRnLzLH306yMZBXwyStiglhfFRmJTu1xruoD40HmIa97AuNyFNvSA6-AC5K03f_v_xLVhbHOW/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 yaitu teks/deskripsi yang mau anda sembunyikan


5. Sekarang pilih HTML, kemudian Publikasikan

6. Lihat hasilnya

Demikian cara menciptakan spoiler slide panel, agar bermanfaat.


Sumber http://ap-thea.blogspot.com