Cara Membuat Tombol Show dan Hide Keren di Blog

Saat mengunjungi suatu blog atau website, mungkin Anda pernah melihat tombol (button) show/hide ketika mengklik show akan langsung menampilkan teks yang disembunyikan dan sebaliknya jika mengklik hide maka teks akan disembunyikan.

Efek ini juga dikenal dengan spoiler yang dapat menyembunyikan teks, gambar dan javascript dalam postingan blog dengan tujuan menghemat tempat pada halaman tertentu.

Selain itu, spoiler juga membantu meringankan dan mempercepat loading halaman blog apabila anda menggunakan gambar ataupun vidio karena hal tersebut dapat mempengaruhi proses loading.

Cara membuat Tombol Show dan Hide Keren

Buka dashboard blogger > tema > edit html lalu salin css dibawah ini dan letakan diatas kode ]]></b:skin> atau </style> dan simpan.

 .spoiler{background:#AEC7D6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSMhBfiOTnoBXsqwApTZ_PVXH9Uko7vCYrOy0gTwXglhzkVzEte1_G24Dcl27WX-rENxF18va3BcO3DcYQFXLN4xxxmxtVor3zncR4YFYDPkjXSXaA7g4or6ZGCKQYWcySvmbqWKazeGY/s1600/line_back.png) repeat-x;border:1px solid #ddd;padding:3px}.spoirel{font-family:Roboto Slab;font-size:12px;color:#555;margin-bottom:0;font-weight:bold;text-align:left;margin:1px;}

Letakan kode html dibawah ini ketika membuat postingan untuk menampilkan spoilernya.

<div class="spoirel">
Titel/judul <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = 'HIDE; this.value = 'hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'show'; this.value = 'show'; }" style="color: saddlebrown; float: right; font-family: arial; font-size: 10px; font-weight: bold; margin: 2px; text-transform: uppercase;" type="button" value="SHOW" /></div>
<div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; padding: 0px; text-align: center;">
<div style="display: none;">
<br />
Masukan teks/foto/video/</div>
</div>
</div>

Tombol Show dan Hide Seperti Media 903

Buka dashboard blogger > tema > edit html lalu salin css dibawah ini dan letakan diatas kode ]]></b:skin> atau </style> dan simpan.

.post .spoilerTitle label{margin-left:auto; color:#fefefe;background-color:var(--link-bg); border-radius:2px;padding:0 15px; line-height:30px;font-size:12px;font-weight:400;font-family:var(--font-body)} .post .spoilerTitle label:before{content:'Show all'} .post .spoilerContent{max-height:0} .post .spoilerInput:checked ~ .spoilerTitle label:before{content:'Hide all'} .post .spoilerInput:checked ~ .spoilerContent{max-height:1000vh}

Letakan kode html dibawah ini ketika membuat postingan untuk menampilkannya.

/* Menyembunyikan Teks */
<div class="spoiler">
  <input class="spoilerInput hidden" id="spoiler-01" type="checkbox" />
  <div class="spoilerTitle">
    <!--[ Show/hide Title ]-->
    <b>Tek disini</b>
    <label></label>
  </div>
  <!--[ Show/hide content ]-->
  <div class="spoilerContent">
    <ol onclick="window.open('https://forgivenesspeltanalyse.com/s81xuym7?key=8bf0d7fcc55d490e3d63988086285dea')" style="text-align: left;"><li>Tuliskan teks yang ingin disembunyikan disini...</li>
<li>Tuliskan teks yang ingin disembunyikan disini...</li>
<p>Tuliskan teks yang ingin disembunyikan disini...</p>
  </div>
</div>

/* Menyembuyikan JavaScript atau Gambar */
<div class='spoiler'>
  <input class='spoilerInput hidden' id='spoiler-02' type='checkbox' />
  <div class='spoilerTitle'>
    <!--[ Show/hide Title ]-->
    <b>Teks Disni </b>
    <label for='spoiler-02'></label>
  </div>
  <!--[ Show/hide content ]-->
<div class='spoilerContent'>
<br>
script atau link gambar disini gunakan src=
</div>
<script>/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("postBody"); var midAd3 = document.getElementById("postRelated"); var showAd3 = tgt.getElementsByTagName("p"); if (showAd3.length > 0) {insertAfter(midAd3,showAd3[5]);}; /*]]>*/</script>
</div>
</div>

Mungkin Sekian pembahasan kali ini. Jika ada yang ingin ditanyakan jangan ragu untuk menuliskannya pada kolom komentar. Baca juga artikel lainnya untuk mendapatkan informasi dan tips seputar blogger.