Membuat Show/Hide Post Dengan Javascript

Cara membuat spoiler post atau disebut juga membuat show/hide post dengan javascript, fungsi ini sering digunakan untuk membuat konten menjadi lebih terlihat sedikit namun ada pemicu atau tombol yang bila ditekan akan menampilkan konten yang disembunyikan tersebut.

Tampilan Show/Hide Post Dengan Javascript, kali ini hampir mirip dengan fansub gantzid, namun lebih simple tanpa ada iconnya. Artikel ini saya hanya memberikan Cara Membuat Show/Hide Post Dengan Javascript, tanpa ada tambahan seperti isi dari post yang di hide tersebut.

Demo

Membuat Show/Hide Post Seperti gantzid Dengan Javascript

1. Buka blogger > tema > Edit HTML
2. Letakkan CSS berikut ke dalam <b:skin><![CDATA[/ .... ]]></b:skin> atau <style>...</style>

/* Spoiler Post seperti gantzid by arlethdesign
 ============================================== */
.ISHide a{display:block;padding:10px;text-align:center;width:fit-content;justify-content:center;margin:auto;-moz-box-shadow:inset 0 1px 0 0 #54a3f7;-webkit-box-shadow:inset 0 1px 0 0 #54a3f7;box-shadow:inset 0 1px 0 0 #54a3f7;background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#007dc1),color-stop(1,#0061a7));background:-moz-linear-gradient(top,#007dc1 5%,#0061a7 100%);background:-webkit-linear-gradient(top,#007dc1 5%,#0061a7 100%);background:-o-linear-gradient(top,#007dc1 5%,#0061a7 100%);background:-ms-linear-gradient(top,#007dc1 5%,#0061a7 100%);background:linear-gradient(to bottom,#007dc1 5%,#0061a7 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1',endColorstr='#0061a7',GradientType=0);background-color:#007dc1;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #124d77;color:#FFF;cursor:pointer;text-decoration:none;text-shadow:0 1px 0 #154682;text-transform:none;letter-spacing:normal;font-weight:normal}.ISHide a:hover,.ISHide a:focus{color:#FFF;background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#0061a7),color-stop(1,#007dc1));background:-moz-linear-gradient(top,#0061a7 5%,#007dc1 100%);background:-webkit-linear-gradient(top,#0061a7 5%,#007dc1 100%);background:-o-linear-gradient(top,#0061a7 5%,#007dc1 100%);background:-ms-linear-gradient(top,#0061a7 5%,#007dc1 100%);background:linear-gradient(to bottom,#0061a7 5%,#007dc1 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7',endColorstr='#007dc1',GradientType=0);background-color:#0061a7;outline:none;text-decoration:none}.ISProductBody{clear:both;padding:10px 0}



3. Kemudian Simpan Javascript berikut diatas </body>

<b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'>
<script type='text/javascript'>//<![CDATA[
//Spoiler Post seperti gantzid by arlethdesign
$(".hideLink").on("click",function(){if($(this).text()=="Show"){$(this).text("Hide")}else{$(this).text("Show")}$(".ISProductBody").toggle();return false});
//]]></script>
</b:if>



4. Jika Sudah save tema.
5. Langkah terakhir, buatlah post menggunakan HTML berikut

<div class="ISHide"><a href="#" class="hideLink">Show</a></div>
<div class="ISProductBody" style="display: none;">
<center>

Isi DOWNLOAD BOX/Konten DISINI

</center>
</div>

Kalian juga bisa menambahkan Isi kontennya seperti Download box, isi sinopsis anime atau yang lainnya.

Sekian tutorial cara membuat spoiler post seperti gantzid dengan javascript, & sampai jumpa di artikel selanjutnya, thanks.