Traveling

06 January 2017

Cara Membuat Spoiler Auto Hide di Postingan Blog

Cara Membuat Spoiler (Auto Hide) di postingan Blog_


Spoiler adalah posting konten (teks, foto atau video) tersembunyi yang bisa dilihat jika pembaca meng-klik tombol. Pembaca juga bisa menyembunyikan kembali posting dengan menekan ulang tombol tersebut. Sementara fungsi spoiler itu sendiri adalah untuk menghemat space (tinggi) posting, mempercepat loading halaman, dan menghemat kuota pembaca

Spoiler adalah tombol yang diguanakan untuk menyingkat tempat atau menyembunyikan konten (teks, foto atau video) dengan buka tutup

Alasan kenapa membuat Spoiler Auto hide di postingan Blog
1. Membuat penasaran pembaca (pengunjung) blog terhadap konten yang di sembunyikan
2. Menghemat ruangan pada postingan blog biar lebih simpel dan keren
3. Mempercepat atau menghemat waktu loading halaman blog
4. Blog agar terlihat lebih profesional dan keren
5. Menghemat Kuota pengunjung

Cara Membuat Spoiler di Postingan Blog
1. Login ke Blogger
2. Klik Pos klik Entri Baru atau New post seperti menbuat postingan biasa
3. Pilihlah mode HTML bukan Compose 
4. Lalu Copy dan Pastekan kode di bawah ini pada postingan blog sobat

<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>
**Ket : silahkan ganti Tulisan warna merah sesuai keinginan sobat
5. Klik Publikasikan dan lihat hasilnya

Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : Cara Membuat Spoiler Auto Hide di Postingan Blog