Cara Mudah Membuat Spoiler Keren Gambar Di Posting Blog

Table of Contents
Maulnotes.blogspot.com-Cara Mudah Membuat Spoiler Keren Gambar Di Posting Blog

Assalamualaikum.wr.wb
Maul Notes-Selamat sore para pengunjung Maul Notes, sore ini saya akan share artikel Cara Mudah Membuat Spoiler Di Posting Blog. ok check this out!!!

Spoiler?? mungkin kalian sudah pada tau apa itu spoiler, kali ini saya akan memberikan tips membuat spoiler gambar kalo kalian pernah buka kaskus pasti sering melihat gambar-gambar dala berbentuk spoiler dan akan terlihat gambarnya setelah kita klik buka. nah kali ini kita akan membuat seperti itu.

Selain membuat tampilan posting lebih simple, cara ini juga mampu mempercepat loading suatu post karena tidak langsung memuat gambarnya. bagi yang belum tau, berikut contoh spoiler yang akan kita buat :


Spoiler:
ok langsung kita praktekan, berikut langkah-langkahnya :
1. Buat post baru -> Pilih HTML
2. copy code berikut dan paste di HTML pada posting blog


<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>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;">
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUM0BsxYez-sLtbBTQ4MLirdORGbciC5pmBpiXqsx73Fd6VFysKV3BsUo_SoMpZHDwG8DTT34ORxqhxcgjiwu0vZhOEReKj57YpqEDvDBKqx4dzz0dwTbsgbs7zAcv68jXqq7CfqVo0gw/s1600/spoiler-compressed.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUM0BsxYez-sLtbBTQ4MLirdORGbciC5pmBpiXqsx73Fd6VFysKV3BsUo_SoMpZHDwG8DTT34ORxqhxcgjiwu0vZhOEReKj57YpqEDvDBKqx4dzz0dwTbsgbs7zAcv68jXqq7CfqVo0gw/s1600/spoiler-compressed.jpg" /></a><img border="0" /></div>
</div>
</div>
3. Ganti teks yang berwarna merah dengan link gambar yang akan ditampilkan.
4. Ganti teks yang berwarna hijau untuk judul spoiler
5. Ganti teks yang berwarna kuning untuk tulisan yang ada di tombol spoiler
5. Jika sudah, coba kalian posting dan lihat bagaimana hasilnya.

Mungkin sekian dulu artikel kali ini semoga bermanfaat, jangan lupa like fanspage Maul Notes, share, dan berkomentar!! jika ingin tau update artikel terbaru di Maul Notes dapat follow blog Maul Notes dengan klik ikuti yang ada di sidebar.

Sekian semoga bermanfaat!!!




Post a Comment