Cara Membuat Efek (Spoiler) Auto Hide di Blog

Oleh Kang Genji

Sabtu, 21 Februari 2015

Bagikan :

Tweet

Cara Membuat Efek (Spoiler) Auto Hide di Blog - Efek auto hide yang sering kita jumpai pada saat membuka kode html atau file yang penting dalam blog biasanya menggunakan tombol BUKA dan TUTUP.

Spoiler auto hide berfungsi untuk meringkas halaman agar terlihat simple dan menarik. dengan cara ini anda bisa memiliki halaman yang dapat dibuka dan ditutup sesuai dengan kebutuhan. untuk Memasang Efek (Spoiler) Auto Hide di Blog ternyata cukup mudah. namun sebelum memasang kita lihat dulu contohnya dibawah ini: 

Web Mastah - Tutorial Blog Gratis dan Lengkap:

Manfaat Spoiler Auto Hide?

Spoiler auto hide bisa anda gunakan untuk keperluan posting diantaranya:

1. Posting tentang kode html/css

2. Posting gambar

3. Posting Puisi, kata-kata, kebijakan Dll.

Cara Membuat Efek (Spoiler) Auto Hide di Blog

Ikuti langkah-langkah dibawah ini sampai selesai:

1. Login ke akun blogger anda.
2. Buat Entri Baru/New Post (Membuat postingan blog)
3. Silahkan anda Pilih mode penulisan HTML (Bukan Compose) Keterangan: Jika dipasang pada Mode Compose maka tidak akan berfungsi code scriptnya.
4. Lalu Copy Script dibawah ini pada Paste Pada postingan Mode HTML yang akan dipasang auto hide.

<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, Link Gambar Atau Video <br>
</div>
</div>
</div>

         5. Klik Publikasikan dan lihat hasilnya.

Note:

• Judul Spoiler: adalah judul halaman spoiler seperti contoh diatas adalah Web Mastah - Tutorial Blog Gratis dan Lengkap.
• Letakkan teks atau kode script, Link Gambar Atau Video: Tempat anda meletakkan teks, atau kode. bisa juga dengan url gambar jika ingin memasukkan gambar atau dengan url video jika ingin memasukkan video.

 

Update: 

Modifikasi Spoiler Show And Hide dari KompiAjaib.com

Berikut Kodenya:

<div style="text-align: center;">
<div style="margin: 1px;">
<div class="smallfont" style="margin-bottom: 1px;">
<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 = 'Hide Content'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show Content Click Here'; }" style="font-size: 14px; margin: 0px; padding: 0px; width: auto;" type="button" value="Show Content Click Here" /></div>
<div class="alt1">
<div style="display: none;">
<br />
<div style="text-align: center;">

KONTEN DI SINI

</div>
</div>
</div>
</div>
</div>

Untuk modifikassi button-nya silahkan tambahkan kode CSS di bawah ini:

.smallfont{background:#b0130d;border:1px solid #fff;padding:6px 8px 4px;transition:all 400ms ease-in-out;display:inline-block;box-shadow:1px 1px 5px #c3c3c3}
.smallfont input[type=button]{background:none}
input[type=button]{outline:none;display:inline-block;cursor:pointer;font:bold 12px Georgia;text-decoration:none;text-shadow:1px 1px #000;color:#fff;border:none;border-radius:2px;background:#b0130d;transition:all 400ms ease-in-out}
.smallfont:hover,input[type=button]:hover{background:#E02424}
input[type=button]:active,button:active{position:relative;top:1px;left:1px}

Sekian dulu informasi kali ini, anda bisa dapatkan Tutorial Blog Gratis dan Lengkap dengan cara mengunjungi blog sederhana ini Web Mastah.

Jika anda masih kebingungan silahkan tinggalkan komentar di kolom yang sudah tersedia.

Tag : Blog