Tutorial Blog

cara menyembunyikan tulisan/teks Gambar dan Video di postingan Blog

cara menyembunyikan hide spoiler tulisan/teks Gambar dan Video di dalam postingan atau artikel Blog ~ Script Kode Html atau Javascript Hidden tulisan teks gambar video dipostingan.Pernahkah didalam membuat sebuah artikel atau postingan blog ditengah tengah tulisan kita ingin sekali menyisipkan sebuah gambar atau video atau tulisan yang ingin kita sembunyikan (hide) didalam postingan kita. Nah tehnik itu biasa dikenal dengan spoiler.

Lalu kegunaan spoiler itu sebenarnya untuk apa sih.?? Spoiler sendiri berfungsi untuk menyembunyikan teks gambar animasi maupun video yang tidak ingin kita tampilkan didalam postingan blog, kegunaan spoiler pada postingan blog Ketika file video gambar maupun animasi yang dimasukan dipostingan tidak akan memberatkan loading halaman blog sobat. Jadi intinya ketika file yang besar dimasukan kedalam spoiler loading halaman blog seperti layaknya kita tidak memasukan file apapun kedalam postingan kita Ringan seperti halnya kita hanya memposting tulisan atau teks.

Banyak lagi kegunaan spoiler bagi blog selain mempercepat halaman loading blog jika file dengan size besar masuk didalam postingan blog, spoiler juga berfungsi sebagai peringkas ruangan atau space artikel.Nah jadi bagi sobat yang artikel nya tidak ingin ditampilkan panjang panjang.maka spoiler adalah langkah yang tepat dalam menyembunyikan tulisan/teks Gambar dan Video di postingan Blog

Spoiler banyak fungsinya antara lain ialah menyembunyikan link, atau kumpulan link aktif, animasi, grafik, gambar, video, teks, tulisan, menampilkan halaman blog orang lain dan lain sebagainya.Biasanya hide spoiler ini disembunyikan oleh sebuah tombol yang nantinya tombol itu jika di klik maka akan menampilkan teks atau tulisan yang ingin kita sembunyikan Nah contoh tombolnya seperti dibawah ini :

CONTOH KALIMAT TEKS YANG INGIN DISEMBUNYIKAN

Nah Begitulah contoh spoiler didalam postingan bagaimana ?? tertarikkah sobat untuk mencobanya ??

Oke simak cara dan langkah langkahnya berikut ini :
Bukalah artikel sobat dan pilih gambar atau teks atau tulisan yang ingin sobat sembunyikan didalam spoiler .jika sudah masuk ke dalam menu HTML postingan

lalu copy kode script berikut ini

<div id="spoiler">
<div>
<input name="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'CLOSE'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'OPEN'; }" style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" type="button" value="KLIK TOMBOL INI" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; color: black; margin: 0px; padding: 7px;">
<div style="text-align: justify;">
CONTOH KALIMAT TEKS YANG INGIN DISEMBUNYIKAN</div>
</div>
<div id="hide">
</div>
</div>

KETERANGAN : GANTI TULISAN MERAH “KLIK TOMBOL INI” DENGAN NAMA TOMBOL ANDA DAN “CONTOH KALIMAT TEKS YANG INGIN DISEMBUNYIKAN” ISI DENGAN TEKS ATAU URL GAMBAR YANG INGIN KALIAN SEMBUNYIKAN.
LALU Balik kemenu COMPOSE postingan dan lihat hasilnya Mudah bukan ??

Oke jika sobat ingin membuat spoiler gambar, kode script nya berikut ini :

<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<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 = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'KLIK'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="KLIK" /></div>
<div class="alt2" style="background: #FAFAF7; border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://i0.wp.com/www.jagoankode.com/wp-content/uploads/2017/03/VDSV.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://i0.wp.com/www.jagoankode.com/wp-content/uploads/2017/03/VDSV.png" /></a></div>
</div>
</div>
</div>

KETERANGAN : Ganti URL dengan URL gambar blog sobat
Maka hasilnya akan seperti ini :

Oke sobat demikianlah Tutorial cara menyembunyikan tulisan teks Gambar dan Video di postingan Blog semoga bermanfaat 😀

About the author

Kahfie IDN

Pengetahuan adalah kebebasan, dan ketidaktahuan adalah perbudakan.

Leave a Comment

1 Comment

  • Glanz adalah tisu basah dengan cairan pembersih terbaik untuk lensa plastik dan kaca.
    Sangat dianjurkan untuk lensa yang mempunyai lapisan anti refleksi (Multi – Coated).
    Dikemas dalam kemasan sachet satuan sehingga praktis untuk digunakan dimana saja dan mudah untuk dibawa kemana saja.
    Harga promo Rp.20.000 / Box isi 30 sachet.
    Cocok untuk membersihkan :
    – Lensa Kacamata
    – LCD Laptop / Netbook
    – Lensa Teropong
    – Kaca Helm
    – Lensa Jam tangan
    – Lensa Kamera / DSLR
    – LCD Handphone
    DLL
    Untuk Pemesanan Jumlah banyak kami siap suplai
    SMS, WA, Phone 081313010103