[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

Related Posts

Previous
Next Post »

1 comments:

Write comments
1 Oktober 2012 09.34 delete

Tutorial yang bermanfaat, terima kasih..

Reply
avatar

Berkomentar lah dengan yang sopan yang tidak mengandung unsur SARA, PORNOGRAFI, Dan TIDAK diperkenankan untuk PROMOSI selain Persetujuan dari ADMIN. Jika di lakukan, Maaf komentar akan DI HAPUS.

Untuk menggunakan Emoticon Komentar, Klik Emoticon yang akan di pasang. Akan muncul kode emoticonnya. Masukkan itu pada saat berkomentar. Terima Kasih
EmoticonEmoticon