Skip to main content

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=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-mzWgz4PFFv1ZXe5ISF3AXRUdCyPMKn9V2JUaLpq1jQ498uk0zqU6FJ9qcdOKWxp7H79cZtJDMfMWq27GFb5zo8uIiczi3CDQRIjcf4xZ19xtB8K_xX5tYNOe6UKsSmKLrXEOtaIAyjb4/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!
Labels:

Comments

Post a Comment

Popular posts from this blog

Sherlock Holmes

Penampilan terbaru dari tokoh terkenal karya Arthur Conan Doyle, Sherlock Holmes berkisah tentang petualangan terbaru Holmes (Robert Downey Jr.) dan mitra setianya Watson (Jude Law) Mempertunjukkan kepandaiannya sebagai seorang intelektual, Holmes bertarung lebih hebat dari sebelumnya untuk menjatuhkan musuh barunya dan mengungkapkan sebuah rencana berbahaya yang dapat menghancurkan Negara tersebut Jenis Film : Drama/adventure Produser : Joel Silver, Susan Downey, Lionel Wigram Produksi : Warner Bros. Pictures Homepage : http://sherlock-holmes-movie.warnerbros.com/ Durasi : 139 Pemain : Robert Downey Jr. ...
Post a Comment
Read more

Cara Mengetahui Malware Pada Blog

Mengetahui Malware Pada Blog – Blog yang disusupi malware sangat berbahaya bagi pembaca yang mengunjunginya. Karena dengan malware yang berada di blog tersebut, bisa saja malware yang berada dalam sebuah blog yang kita kunjungi berbalik menyerang komputer yang sedang kita gunakan untuk mengakses sebuah blog yang terkena malware. Akibatnya, komputer kita menjadi bermasalah dan tidak mampu lagi melakukan fungsi kerja secara maksimal. Malware merupakan sebuah program jahat yang digunakan untuk mendeteksi kelemahan sebuah software atau sistem operasi tertentu. Ketika sebuah blog terkena malware maka sebenarnya blog tersebut sedang diteliti di mana celah kelemahannya. Selain itu, malware juga melakukan aktivitas tertentu yang berbahaya lainnya seperti mengirimkan pesan informasi tertentu mengenai blog kita tanpa sepengetahuan kita sebagai admin. Sumber penyebab munculnya malware pada blog kita sebagian besar berasal dari penggunaan script yang bermasalah. Pada kondisi tertentu, script ter...
Post a Comment
Read more

SUAMI ISTRI PUAS

WWW.KANGJAMALBISNIS.BLOGSPOT.COM PENGOBATAN IMPOTENSI dan untuk kepuasan batin silakan klik di sini Berikut ini kami akan memberikan beberapa macam cara atau beberapa langkah-langkah efektif yang dapat digunakan untuk mengatasi gangguan kejantanan atau juga untuk pengobatan impotensi. 1. RAMUAN AJAIB ( KUAT SEX ) Bahan : Kuning telur ayam kampung 1 butir, pati kunyit, lada hitam, minyak wijen, bawang putih, madu. Ket. : Semua bahan adalah 1 takaran ( satu ukuran ), misal : satu sendok besar, ya sama semua ukurannya. Untuk kunyit, lada hitam dan bawang putih, masing-masing telah diparut / dihancurkan. Caranya : campurkan semua bahan, minum selama 3 hari ( Rabu, Kamis, dan Jum’at ). Tiap sore / malam. 2. JANTAN PERKASA ( KUAT SEX SEMALAM SUNTUK / ANTI EJAKULASI DINI / KEPERKASAAN KUAT 4 JAM LEBIH ) Caranya : Pada pagi hari anda beli sepotong/sedikit daging kambing yang warnanya paling merah diantara sekian daging yang ada ditubuh kambing yang anda beli tadi. Pada malam...
Post a Comment
Read more