Membuat Spoiler Pada Postingan Blog

Spoiler merupakan salah satu alternatif bagi kita untuk menghemat ruang saat menampilkan konten di dalam isi postingan blog kita. Selain memiliki fungsi untuk menghemat ruang, spoiler juga dapat digunakan untuk mempercantik tampilan isi postingan blog dengan gaya yang terbilang cukup keren, karena dengan spoiler ini konten yang ditampilkan dapat dibuka tutup sesuai keinginan kita yang membuatnya tampil lebih elegan.


Bagiamana cara menampilkannya?

Cara untuk menampilkan spoiler di dalam isi postingan blog kita ini adalah dengan menggunakan kode HTML dalam menulis sebagai berikut.

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"></span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
ISI SPOILER
</div></div></div></div>

Pertama, masuk ke akun blogger kita masing-masing.
Pada saat kita ingin membuat postingan blog, jangan pilih compose tetapi pilih lah edit HTML.
Masukan kode HTML untuk menampilkan spoiler di atas.
Klik terbitkan dan selesai.
Wah, mudah bukan?


Contoh untuk Menampilkan Tulisan dengan Spoiler.

Untuk menampilkan sebuah tulisan menggunakan spoiler pada isi postingan blog kita, gunakan kode HTML untuk menampilkan spoiler sama seperti di atas.

Briptu Norman adalah seorang anggota Brimob di Gorontalo kini sedang tenar di dunia maya karena videonya yang beredar di situs berbagi youtube mengundang perhatian para pengguna internet.
Selain mendapatkan ketenaran, kini Briptu Norman juga telah mendapatkan dukungan dari pengguna jejaring sosial di dunia maya agar dia tidak dikenakan sanksi oleh atasannya, ulahnya yang sedang bernanyi lagu india secara lypsinc ketika sedang bertugas.

Bukan cuma orang biasa yang memberikan dukungan kepada Briptu Norman. Namun dia juga didukung oleh kalangan artis dan salah satunya adalah Glenn Fredly. Siapapun yg ngaku penyanyi & Lipsync mulai sekarang, kalo tidak lebih keren dr #Briptu Norman lebih baik ditindak aparat..sekian," tulis Glenn Fredly dalam akun Twitter-nya.
http://karodalnet.blogspot.com/2011/04/briptu-norman.html

Maka kode HTML untuk menampilkan spoiler di atas adalah sebagai berikut.

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"></span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Briptu Norman adalah seorang anggota Brimob di Gorontalo kini sedang tenar di dunia maya karena videonya yang beredar di situs berbagi youtube mengundang perhatian para pengguna internet.
Selain mendapatkan ketenaran, kini Briptu Norman juga telah mendapatkan dukungan dari pengguna jejaring sosial di dunia maya agar dia tidak dikenakan sanksi oleh atasannya, ulahnya yang sedang bernanyi lagu india secara lypsinc ketika sedang bertugas.

Bukan cuma orang biasa yang memberikan dukungan kepada Briptu Norman. Namun dia juga didukung oleh kalangan artis dan salah satunya adalah Glenn Fredly. Siapapun yg ngaku penyanyi & Lipsync mulai sekarang, kalo tidak lebih keren dr #Briptu Norman lebih baik ditindak aparat..sekian," tulis Glenn Fredly dalam akun Twitter-nya.
http://karodalnet.blogspot.com/2011/04/briptu-norman.html
</div></div></div></div>

Contoh untuk Menampilkan Gambar dengan Spoiler.


Maka kode HTML untuk menampilkan spoiler di atas adalah sebagai berikut.

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"></span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
<a href=”URL”><img src=”http://3.bp.blogspot.com/-L99QfFvfESs/TfTA_Nua42I/AAAAAAAAATw/e1mPA-lwIwE/s1600/Briptu+Norman.jpg”></a>
</div></div></div></div>

Contoh untuk Menampilkan Video dengan Spoiler.


Maka kode HTML untuk menampilkan spoiler di atas adalah sebagai berikut.

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"></span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
<embed autostart=”true” src=”http://www.youtube.com/watch?v=jsVW-XO9nuY&feature=player_detailpage” hidden=”true”></embed>
</div></div></div></div>

Keterangan:

Untuk menampilkan gambar dan video menggunakan tampilan spoiler, gunakan URL gambar dan video tersebut yang kemudian dikemas sebagai berikut.
  1. Untuk gambar,
    <a href=”URL”><img src=” URL Gambar ”></a>
    .
  2. Untuk video,
    <embed autostart=”true” src=” URL Video ” hidden=”true”></embed>
    .

Mudah bukan?
Ada yang sudah pernah mencobanya? Ada yang sudah berhasil mencobanya?
Jika ada pertanyaan dan tanggapan, silakan di sampaikan lewat kotak komentar di bawah ini ya kawan.
Salam blogger!

3 komentar:

  1. artikelnya keren gan, jangan lupa mampir jug ya ke http://www.sekolahforex.id/ disini agan bisa belajar forex dengan sangat lengkap. website http://www.sekolahforex.id/ berisi tentang Tutorial cara BELAJAR FOREX TRADING online gratis bahasa indonesia bagi pemula. Tempat belajar trading valas emas dan binary terbaik. tempat download ratusan ebook forex dan video tutorial forex gratis

    BalasHapus
  2. Informasi yang sangat bagus dan berguna. Ditunggu untuk informasi berikutnya. Thanks gan

    Silahkan berkunjung di intanqq

    BalasHapus
  3. [URL=http://intanqq.poker][IMG]https://imgur.com/IwUp6uB.jpg[/IMG][/URL]

    Selamat Datang Di IntanQQ

    IntanQQ Merupakan Situs Judi Bandar Poker Dan Bandar Sakong Terpercaya Di Indonesia

    IntanQQ Menyediakan 7 GAME Dalam 1 Web dan Hanya Dengan 1 ID,

    Game yang di Sediakan Oleh IntanQQ :
    - Sakong (New Game)
    - Bandar Poker (New Game)
    - BandarQ (Hot Game)
    - Poker
    - Domino
    - Capsa Online
    - AduQ

    Kelebihan Bermain Di IntanQQ :
    - BONUS TURNOVER 0.3% SETIAP HARI
    - BONUS XTRATURNOVER SETIAP MINGGUNYA
    - BONUS REFERAL 10% +10% SEUMUR HIDUP!!
    - MIN DEPO IDR 15.000 dan Proses Cepat 1 Menit
    - Bisa dimainkan di Smartphone Versi Android dan Iphone

    Info Lebih Lanjut Bisa Hubungi kami Di :

    BBM : 2AD20246
    Facebook : https://www.facebook.com/profile.php?id=100015210468567
    Phone : +855968675507
    WeChat : intan_qq
    LiveChat : www.intanqq.poker

    Link Daftar http://intanqq.poker/Register.aspx?lang=id

    BalasHapus