Latest News

Cara Membuat Spoiler Di Blog

//
Salam Sejahtera Selalu!

Kalau kita sering blusukan ke blog atau web forum, pasti selalu menjumpai tombol Buka/Tutup Ini, atau Lihat Ini, Buka Spoiler Ini, ketika kita klik tombol tersebut maka akan terbuka berupa gambar yang besar sebuah photo atau bisa berupa screenshoot. Karena keseringan melihat yang seperti ini saya jadi penasaran, ini tombol apa namanya dan bagai mana buatnya. akhirnya saya baru tau kalau ini namanya Spoiler. Yang penasaran dan pengen tau cara membuat spoiler di blog, yuk kita sharing!.


Apa Itu Spoiler


Kata Spoiler pada istilah aksesoris mobil sudah lama kita tau, yaitu berupa wing atau sayap yang biasanya ditemplelkan bada body mobil bagian belakang di atas bemper. Spoiler yang seperti ini berfungsi untuk pengontrol atau memberikan efek tekanan pada mobil terhadap angin, jadi kalau mobil di pacu kencang mobil akan terasa stabil dan tidak melayang.

Seperti kebanyakan pada mobil-mobil balap. Mobil bisa juga banyak yang menggunakannya untuk mempercantik tampilan mobil dan terlihat sporty. Sudah tau kan spoiler pada mobil? mau lihat spoiler mobil dari Subaru yang anggun?

seperti dibawah;

Spolier Mobil:
spoiler mobil subaru image: responsejp.com photo spoilersubaruimageresponsejp_zpsdcb05532.jpg


Contoh lain Image Spoiler

Spoiler menyembunyikan gambar:
spoiler open and close photo blogger-logo-spoiler-open-and-close_zpsec73b6ec.jpg


Fungsi Spoiler Pada Postingan Blog


Spoiler pada blog adalah tobol Buka dan Tombol Tutup, dan spoiler pada blog berfungsi untuk menyembunyikan gambar atau teks ataupun berupa Video sehingga dapat menghemat ruang halaman blog, dan kalau kita menggunakannya di tengah-tengah postingan artikel, membuat kesan postingan menjadi lebih rapi dan mengurangi efek ramai warna dengan aneka gambar. Spoiler juga dapat mengurangi beban loading blog kita.

Okey, Mari kita membuat spoiler pada blog

Langsung menuju Login di akun blogger

Pilih New Post atau Entri Baru

Pilih HTML Mode Bukan Compose, dan

Copy Code di bawah dan paste-kan di antara paragraf posting-an artikel, sesuaikan saja.


<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;">
DISINI TEKS ATAU CODE SCRIPT GAMBAR ATAU VIDEO
<br>
</div>
</div>
</div>


Note : Kita bisa mengganti, seperti;

  1. Judul Sopiler (sesuai dengan tema yang akan ditamplilkan)
  2. Buka Dan Tutup (merobah kata, misal: Open - Close)
  3. Width: ...px dan Font-Size: ...px (sesuaikan ukuran)

Yup, thats all friend, sekarang kita sudah tau apa itu spoiler berikut fungsinya dan manfaatnya, juga cara membuat spoiler di blog. Saatnya sobat mempraktekkan dan membuatnya sendiri.

Ada hal menarik ketika saya jalan-jalan ke blog temen, blog walking-an lah, dan jumpa spoiler yang pada tombolnya bertuliskan gambar "sexy banget lagi mandi", setelah saya klik ehh, ternya gambar kucing kurus mandi di papan :-D di bo'ongin, kena deh 1 - 0 !
Nah, apa sobat mau membuatnya seperti itu, Asyiik.

Salam Ngeblog Asyiik



0 Response to "Cara Membuat Spoiler Di Blog"