Cara Membuat Tombol Show Hide Di Blog Website

---

Terkadang artikel Blog yang terlalu panjang membuat pengunjung blog enggan membaca seluruh konten pada salah satu postingan blog kita, nah, salah satu cara mengakalinya adalah dengan menggunakan tombol Show - Hide agar konten pada postingan blog kita terlihat lebih singkat.

Tombol show - hide atau disebut dengan tombol spoiler tidak mengurangi kualitas SEO, karena tetap dapat di crawl oleh robot google, sehingga konten blog tetap terindex di mesin penelusuran Google, Yahoo dan Bing.

Sama persis dengan menempatkan sebuah gambar atau text anda di wadah bingkai yang sering di lihat di web atau blog yang gambar pada artikel nya di sembunyikan dan kalau kita ingin melihat gambar nya kita di suruh klik pada suatu tombol..kira-kira begitu. Anda bisa melihat contoh tombol Show - hide ada pada bagian akhir postingan blog ini

Nah bagaimana cara membuat tombol spoiler Show- Hide, cara memasang tombol show - hide untuk menyembunyikan konten berupa teks dan gambar, saya akan jabarkan di bawah ini : Silahkan login di Situs Blogger seperti biasa. Buka postingan baru, buka menu edit HTML (bukan pada bagian halaman posting text). Copy paste kode dibawah ini : (1). Spoiler tampilkan/sembunyikan <div><input value="Tampilkan" style="margin: 0px; padding:0px;width:auto;font-size:10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Sembunyikan&#39;; } else{ this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Tampilkan&#39;; }" type="button" /></div><div class="alt2"><div style="display: none;"><div style="background:#000000;text-align:left;padding:10px;color:#ffffff;">Masukkan text-nya disini. Gambar juga bisa.</div></div>
NB :
Huruf berwarna biru bisa anda ganti dengan kata lain kaya: SILAHKAN DI BUKA/SILAHKAN DI TUTUP atau kata kata yang lain yang anda sukai. Huruf yang berwarna merah sobat bisa memasukan pesan atau gambar (2). Spoiler SHOW/HIDE <div><div style="margin: 20px; margin-top:5px"><div style="margin-bottom: 2px;" class="smallfont"><input style="margin: 0px; padding: 5px; width: auto; " value="Show" 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 = ''; this.value = 'Hidden'; }else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }"type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">DISINI LETAK KONTENT ANDA</div></div></div></div></div>
NB :
Huruf berwarna biru bisa anda ganti dengan kata lain kaya: SILAHKAN DI BUKA/SILAHKAN DI TUTUP atau kata kata yang lain yang anda sukai. Huruf yang berwarna merah sobat bisa memasukan pesan atau gambar. (3). Spoiler OPEN / CLOSE <div><div style="margin: 5px;"><div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;">Judul Spoiler</span><input value="Open" style=" margin:5px;padding: 0px; width: 80px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39; Close..&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39; Clik Here&#39;; }" type="button" /></div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">ISI SPOILER</div></div></div>
NB :
Huruf warna ungu (judul spoiler) bisa di ganti dengan kata yang lain nya. Huruf berwarna biru bisa anda ganti dengan kata lain kaya: SILAHKAN DI BUKA/SILAHKAN DI TUTUP atau kata kata variasi lain nya yang anda sukai. Huruf yang berwarna merah sobat bisa memasukan pesan atau gambar. Baca Juga : Cek Tips Blogger Lainnya yang bermanfaat
Semoga cara ini berhasil anda terapkan, jika berhasil silahkan berkomentar dan share ke medsos. Semoga bermanfaat
Penelusuran yang terkait dengan Cara membuat tombol Show - Hide di Blog/Website cara membuat show hide di html ini cara ampuh yang dapat sobat lakukan adalah menyembunyikan dengan tombol show dan hide maka konten dan gambar akan tersematkan, tersembunyi dengan membuat tombol show hidden, cara mudah membuat tombol show dan hidden membuat show hide dengan jquery cara membuat tombol show dan hide atau tombol spoiler keren, bagus dan terbaik yang bermanfaat untuk kalian semua, silahkan saja coba disini cara memasang tombolnya cukup mudah, lakukan sekarang juga maka tombol akan show dan hide, cara menyembunyikan konten dengan tombol show hide, coba saja ya ampuh lho cara membuat spoiler keren di blog Sumber : Adhea Putra

---