Membuat Spoiler pada postingan Blog


   Assalamualaikum....

Ok,  Pada kesempatan kali ini saya akan bagi-bagikan tips bagi kalian semua tentang cara membuat Spoiler pada Postingan Blog, Bagi yang belum tahu apa yang di maksud Spoiler ini, kini akan saya Jelaskan.

  Spoiler adalah Cara/Trik untuk menyembunyikan Teks,Video,Gambar,maupun Code-Code Script, yang bertujuan untuk menghemat ruang Postingan Blog. Contoh sebuah Spoiler bisa anda Gambar di bawah ini:

                       

 Ok, Sekarang adalah cara membuatnya, Perhatikan Baik-Baik:

 1. Login Ke Blogger
 2. Kemudian Tulis Postingan Baru (Untuk ujicoba)
 3. Ganti Tab Compose dengan Tab HTML
 4. Terus Masukkan Kode Script Di Bawah ini:


<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Klik Spoiler Berikut</b>: <input value="View" 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 = 'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'View'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Letakkan teks / gambar atau script anda disini
<br />
</div>
</div>
</div>

 Ganti Tulisan Warna Merah Sesuai Kesukaan Anda, bisa di ganti tulisan View atau Open (Terserah)
 Ganti Tulisan Warna ungu dengan Konten yang ingin anda sembunyikan, bisa kode script, dll

 Ini dia Contoh hasilnya:

View:
Contoh tes Spoiler
Mudah kan, sekian dulu postingan saya kali ini, semoga bermanfaat, Wassalanualaikum Wr. Wb

0 komentar:

Posting Komentar

Diberdayakan oleh Blogger.