[Tutorial] Cara memasang Tombol Spoiler di postingan blogger

-[Tutorial] Cara memasang Tombol Spoiler di postingan blogger

Salam sobat blogger...
Tetap semangat nge-blog sobat?
Mari kembali memanjakan si pembaca dengan Widget baru.

Ada berbagai cara untuk meningkatkan pengunjung yang sering membaca postingan suatu blog atau situs.  Selain dengan mempercantik blog juga dengan cara yang satu ini. Cara nya sangat gampang untuk diterapkan.

Yaitu dengan [Tutorial] Cara memasang Tombol Spoiler di postingan blogger. Dengan menambahkan tombol spoiler, para pembaca dapat membaca isi postingan dengan nyaman, karena isi spoiler dapat disembunyikan atau di tampilkan. Keuntungan lainnya adalah isi postingan lebih tertata rapi.

Judul Spoiler: 

Diatas adalah beberapa contoh spoiler. Sedangkan untuk Gadgetnya dapat melihat langsung pada Halaman beranda Blog ini. Untuk membuat Spoiler seperti diatas cukup mudah, karena dengan hanya menyisipkan script telah terbentuk suatu spoiler. Tertarik untuk membuatnya??

Langsung aja ikuti langkah-langkah [Tutorial] Cara memasang Tombol Spoiler di postingan blogger :

1. Log in akun Blogger milik sobat. 

2. Kemudian masuk ke Dashbor => TATA LETAK => Add Gadget => HTML/JavaScript

3.  Copy kan kode berikut pada kolom HTML/JavaScript

-Untuk kode menyembunyikan Teks :

=====================================================================

<div><div style="margin-bottom: 2px;"><i><b><small> Judul Spoiler  </small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px;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;Hide&#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;show&#39;; }" type="button" /></div><div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">

Masukkan Teks/Script di sini

</div></div></div>

=====================================================================



-Untuk kode menyembunyikan Gambar :

=====================================================================

<div style="margin: 5px;"> <div class="smallfont" style="margin-bottom: 2px;"><input style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button" value="Show" /></div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;"> <div style="display: none;"><img class="aligncenter" src="URL GAMBAR SOBAT" alt="monyet" width="300" height="280" /></div> </div> </div>

=====================================================================

Catatan :
Sobat juga bisa mengganti  : 

-Judul Spoiler : Ganti dengan judul spoiler yang sobat inginkan
-Masukkan Teks/Script di sini : Ganti dengan Teks yang sobat inginkan
-URL GAMBAR SOBAT : Ganti dengan URL gambar yang hendak disembunyikan

4. Lagkah terakhir SIMPAN perubahan,

Dan lihat hasilnya,
Jika terjadi kesalahan mohon beritahu kepada kami dengan mengomentari artikel ini.
Demikian [Tutorial] Cara memasang Tombol Spoiler di postingan blogger
Selamat mencoba dan Semoga berhasil...

Share this

Author : Salman Syuhada

Related Posts