Cara Membuat Spoiler Keren Pada Blog

Cara Membuat Spoiler Pada Blog. Sobat blogger, Spoiler yang di gunakan di blog adalah sebuah hiasan atau sebuah kotak yang di dalamnya bisa di simpan sebuah script,foto video ataupun teks, spoiler ini di gunakan biasanya untuk menghemat sebuah ruangan posting atau supaya posting lebih keren dan juga simple sangat cocok untuk blog yang menggunakan banyak gambar dan script.

Baca Juga : Cara Membuat Link Aktif Di komentar Blog

Spoiler ini biasa di gunakan sebuah web supaya terlihat lebih profesional dan juga bisa menghemat waktu loading blog karena tidak harus lama memuat atau membuka sebuah gambar, dengan format buka tutup untuk melihat gambar ataupun teks yang disimpa di dalamnya.

Contoh Spoiler gambar di bawah ini,klik "Buka"

Buka Spoiler:

Cara Membuat Atau Memasang Spoiler Pada Blog

Di bawah ini adalah kode spoiler yang nanti anda gunakan saat membuat posting.

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Judul Spoiler</b>: <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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /> </div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Letak Url Gambar atu script atau Video disini
<img border="0" /></div>
</div>
</div>

Cara Menggunakan Script spoiler

Pada saat membuat posting atau artikel selanjutnya anda bisa meletakan script tersebut di mode Html berikut dengan url gambar, scrpit, ataupun video, anda bisa meletakan di yang saya tandai merah,dan meletakan spoiler di tempat yang di kehendaki

Hingga akhirnya akan seperti di bawah ini berikut URL gambar:

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Judul Spoiler</b>: <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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /> </div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5zkPOaDUntRoMcchFKEWaWy2ATNsnuCpnHUoa9qq7FLY4xoVp5ko8hlgYzSPqAWJTaGlUhre5xb-dXtja3umUs5ZDpFFKpL8A1nObfYo2_tpPTp5Ui3Zbs5M_KVQQg3A9CzFKQq-MFxE/s1600/iml.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5zkPOaDUntRoMcchFKEWaWy2ATNsnuCpnHUoa9qq7FLY4xoVp5ko8hlgYzSPqAWJTaGlUhre5xb-dXtja3umUs5ZDpFFKpL8A1nObfYo2_tpPTp5Ui3Zbs5M_KVQQg3A9CzFKQq-MFxE/s320/iml.jpg" /></a><img border="0" /></div>
</div>
</div>

Kode yang berwarna merah adalah URL gambar, anda bisa merubahnya dengan teks,video ataupun srcript. Bagaiamana? apa sampai disini anda sudah paham, jika mengalami kendala anda bisa tanyakan di kolom komentar.

Sekian tutorial cara Cara Membuat Atau Memasang Spoiler Keren Pada Blog, lebih dan kurangnya saya mohon maaf. semoga sukses.

Share to:

Google+ Facebook Twitter