Membuat Spoiler Post Dengan Javascript

Holaaa, Kali ini mimin akan membagikan cara membuat spoiler posts atau biasa disebut dengan Show/Hide Posts. Kode spoiler ini sangat simple digunakan dan cocok bagi kalian yang mempunyai website Download.

Membuat Spoiler Posts Dengan Javascript

1. Buka blogger > tema > Edit HTML

2. Letakkan Css berikut kedalam <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>

Baiklah, demikian untuk tips kali ini tentang Cara Membuat Spoiler Posts Di Blogger. Semoga bermanfaat dan wassalam.