Cara Memasang Spoiler di Blog Dengan Mudah
Baiklah pada kesempatan kali ini saya akan membahas mengenai spoiler yang biasanya anda sering jumpai dalam sebuah halaman website atau blog.
Bagi anda yang belum tahu apa itu spoiler dan cara pembuatanya silahkan anda simak artikel ini dengan jelas sampai selesai.
Sebelum saya jelaskan mungkin anda tertarik untuk membaca artikel saya yang lain tentang cara menambahkan google map pada sebuah postingan blog.
Jadi spoiler adalah sebuah tombol yang apabila disentuh akan keluar sesuatu seperti gambar video teks maupun yang lainya.
Jadi salah satu keuntungan menggunkan spoiler adalah untuk menghemat tempat dalam sebuah postingan blog.
Selain berguna untuk menghemat tempat juga untuk membuat pengujung blog anda menjadi penasaran karena konten utamanya di sembunyikan, seperti contoh di bawah ini.
Baiklah langsung saja saya akan tunjukan caranya kepada anda,
Pertama silahkan anda masuk ke akun blog anda dan kemudian silahkan anda masuk ke menu postingan dan pilih postingan baru.
Setelah itu silahkan anda pilih mode html pada dashboard postingan dan copy code di bawah ini lalu pastekan di dasboard tersebut.
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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;">
</div>
</div>
</div>
Setelah itu silahkan anda klik save dan jangan lupa kode yang saya blod dan garis bawah silahkan anda ganti sesuai selera anda.
Sedangkan utuk menambahkan gambar silahkan anda masukan koede html gambar atu video yang akan anda masukan atau hanya sebatas teks.
Baiklah mungkin cukup sekian pembahasan yang bisa saya bahas kali ini semoga bermanfaat saya, dan selamat mencoba.
Baca juga : Perbedaan link do follow dan no follow
Bagi anda yang belum tahu apa itu spoiler dan cara pembuatanya silahkan anda simak artikel ini dengan jelas sampai selesai.
Sebelum saya jelaskan mungkin anda tertarik untuk membaca artikel saya yang lain tentang cara menambahkan google map pada sebuah postingan blog.
Jadi spoiler adalah sebuah tombol yang apabila disentuh akan keluar sesuatu seperti gambar video teks maupun yang lainya.
Jadi salah satu keuntungan menggunkan spoiler adalah untuk menghemat tempat dalam sebuah postingan blog.
Selain berguna untuk menghemat tempat juga untuk membuat pengujung blog anda menjadi penasaran karena konten utamanya di sembunyikan, seperti contoh di bawah ini.
Judul Spoiler:
Baiklah langsung saja saya akan tunjukan caranya kepada anda,
Pertama silahkan anda masuk ke akun blog anda dan kemudian silahkan anda masuk ke menu postingan dan pilih postingan baru.
Setelah itu silahkan anda pilih mode html pada dashboard postingan dan copy code di bawah ini lalu pastekan di dasboard tersebut.
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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;">
Letakkan teks atau kode script (gambar atau video) di sini
<br></div>
</div>
</div>
Setelah itu silahkan anda klik save dan jangan lupa kode yang saya blod dan garis bawah silahkan anda ganti sesuai selera anda.
Sedangkan utuk menambahkan gambar silahkan anda masukan koede html gambar atu video yang akan anda masukan atau hanya sebatas teks.
Baiklah mungkin cukup sekian pembahasan yang bisa saya bahas kali ini semoga bermanfaat saya, dan selamat mencoba.
Baca juga : Perbedaan link do follow dan no follow
Add Comment
comment url