Deloiz.com -  Spoiler dalam sebuah situs web atau blog berfungsi untuk menyembunyikan dan menampilkan baik itu tulisan, gambar, maupun video. Keuntungan lainnya menggunakan spoiler ini yaitu supaya blog kelihatan lebih simple sehingga tidak banyak menyita banyak space di postingan Anda. Selain itu bermanfaat juga untuk mengurangi beban load blog, karena isi dari spoiler ini tidak akan di load sampai kita mengklik untuk menampilkanya.
Cara Membuat Spoiler di Blog
Buat spoiler di blog
Apabila masih penasaran bagaimana hasilnya, silahkan lihat yang dibawah ini
Contoh
Deloiz.com Deloiz.com Deloiz.com Deloiz.com Deloiz.com Deloiz.com

Sebenarnya ada beberapa cara yang dapat digunakan untuk membuat spoiler ini. Kalau Anda tertarik untuk mencoba dan membuatnya, berikut admin akan berikan dua cara yang paling mudah. Tutorial lengkapnya ikuti cara berikut ini:

Cara Pertama

1. Masuk Dasbor Blogger.
2. Buat postingan baru.
3. Beralih dari tab Compose ke HTML.
4. Masukkan kode berikut:
<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul</span></i><input value="Buka" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
isi spoiler disini
</div></div></div></div>
5. Silahkan masukkan konten yang akan disembunyikan dengan cara ganti tulisan berwarna merah.

Cara Kedua

Setelah mengikuti cara 1 sampai 3 diatas, masukkan kode berikut:
<div id="spoiler" style="display:none">
isi spoiler disini
</div>
<button title="Klik untuk buka/tutup" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Buka/Tutup</button>
Sekian trik blogging kali ini tentang cara membuat spoiler di blog atau website. Apabila ada pertanyaan seputar topik, silahkan tinggalkan komentar dan jangan lupa ikuti kami untuk mendapatkan informasi terbaru lainnya.

Loading...
loading...

Post a Comment Blogger

 
Top