Cara Membuat Multi Spoiler di Blogspot

Cara Membuat Multi Spoiler di Blogspot
Cara Membuat Multi Spoiler di Blogspot
Cara Membuat Multi Spoiler di Blogspot - Tutorial ini adalah untuk blog yang isi artikelnya panjang atau banyak gambar, spoiler ini sangat dibutuhkan. nah apakah spoiler itu?, dan bagaimana cara memasangnya spoiler di blogspot?, Bagi ente yang sering ngaskus , bukan ngakus yah..., nah kaskus itu adalah situs forum yang ada di internet, sudah pasti mengenal ini, nah apa fungsinya ?, fungsi nya adalah untuk menyembunyikan gambar atau teks tertentu yang baru akan muncul setelah di klik.

multi spoiler di blog

Selain itu fungsi lainnya adalah untuk menghemat tempat posting halaman, agar tidak terlalu panjang, biar enak bacanya.
Spoiler ini cocok digunakan untuk :
  1. Blog atau situs yang berisi tentang pertanyaan dan jawaban, dimana jawaban akan terbuka jika diklik
  2. Jika kita posting dengan banyak gambar atau gambar yang ukurannya besar, tapi gambar tersebut tidak dimunculkan dahulu, untuk menghemat tempat dan untuk loading blog biar ga lambat, jadi pembaca jika ingin melihat gambarnya dengan mengklik tombol spoiler

Contoh spoiler 1


Contoh spoiler 2



Sobat juga bisa melihat contoh artikel saya yang menggunakan spoiler lebih dari satu disini

Cara membuatnya adalah, dengan menambah kode HTML dibawah ini pada menu HTML di kolom posting bukan pada menu COMPOSE.

<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Spoiler</button>
<br/>
<div id="spoiler" style="display:none">
ISI SPOILER YANG HENDAK DISEMBUNYIKAN
</div>

Kode diatas adalah untuk satu spoiler saja, nah apabila ingin membuat lebih dari satu spoiler, maka cukup rubah kode yang telah saya tandai dibawah ini dengan menambahkan angka dibelakangnya, misal : spoiler01, spoiler02, spoiler03 dan seterusnya.

<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Spoiler</button>
<br/>
<div id="spoiler" style="display:none">
ISI SPOILER YANG HENDAK DISEMBUNYIKAN
</div>

Nah untuk merubah bentuk tombol spoiler kita tinggal tambahkan kode CSS dibawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*button spoiler*/
button,button[disabled]:active{border:none;font-size:14px;font-weight:700;border-radius:3px;padding:10px 15px;text-decoration:none;background:#b6c472;color:#fff;display:inline-block;transition:all 0.5s linear;cursor:pointer;width:100%;text-transform:uppercase}
button:hover{background:#a0ad64;color:#fff;transition:all 0.2s linear}
button:active{background:#a0ad64;color:#fff}
button[disabled],button[disabled]:active{background:#a0ad64;border-bottom:2px solid #8b9656;color:#fff;cursor:default}
</style>
</b:if>

Silahkan atur kembali tampilan tombol spoilernya, dengan selera ente.

Sekian Cara Membuat Multi Spoiler di Blogspot ini, semoga bermanfaat, terima kasih.
Baca juga:

Artikel Menarik Lainnya :

Comment Policy: Silahkan tinggalkan komentar Sobat sesuai dengan topik artikel di halaman ini. Komentar yang berisi Link tidak akan ditampilkan.
Buka Komentar