Cara Mudah Membuat Tombol Spoiler Di Blogspot
Pada kesempatan kali ini saya akan mengulas tentang cara membuat spoiler, diantara teman-teman blogger terutama teman-teman yang baru mulai masuk ke dalam dunia blog saya yakin pasti ada yang belum paham apa yang di maksud dengan spoiler? Oke, saya akan menjelaskan terlebih dahulu tentang pengertian dari spoiler.
"Spoiler adalah postingan konten (bisa berupa teks, foto atau video) tersembunyi yang bisa dilihat jika pembaca mengklik tombol. Pembaca juga bisa menyembunyikan kembali posting dengan menekan ulang tombol tersebut. Sementara fungsi spoiler itu sendiri adalah untuk menghemat space (tinggi) posting, mempercepat loading halaman, dan menghemat kuota pembaca."
Masih agak bingung? Jangan khawatir saya akan tunjukkan apa itu spoiler, dibawah ini adalah beberapa contoh tombol spoiler, silahkan anda tekan tombol "BUKA" dibawah ini agar anda lebih paham.
1. Contoh Tombol Spoiler Terlempar Kebawah
2. Contoh Tombol Spoiler Dengan Judul
3. Contoh Spoiler Tanpa Tombol (Hanya Mengunakan Tulisan "Show-Hide")
[Show]
Sudah paham kan? Pasti sudah dong hehehe, di dalam blog anda tidak akan menemukan menu untuk membuat tombol spoiler, maka dari itu kita perlu kode khusus untuk membuatnya, kita mulai saja caranya bagaimana membuat tombol spoiler pada blogspot.
Cara membuatnya:
Catatan: Ganti kalimat yang berwarna MERAH dengan konten yang anda inginkan (baik itu berupa kode, teks, gambar atau video). Ganti kalimat yang berwarna BIRU sesuai keinginan anda, setelah itu masuk ke compose dan binggo! Spoiler anda sudah siap.
Jika Ingin Membuat Banyak Spoiler pada Satu Postingan
Jika anda mau menggunakan beberapa spoiler dalam satu postingan buat saja nama spoiler yang berbeda pada setiap kode spoilernya. Contohnya seperti dibawah ini: (perhatikan kalimat yang berwarna HIJAU)
~Kode Spoiler Pertama:
<div id="spoiler" style="display: none;">
Letak Konten Isi Spoiler (Text/Gambar/dll)</div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" style="background: red; border: 1px solid blue; color: white; padding: 5px 50px 5px 50px;" title="Klik untuk membuka spoiler" type="button">Buka</button>
~Kode Spoiler Kedua:
<div id="spoiler1" style="display: none;">
Letak Konten Isi Spoiler (Text/Gambar/dll)</div>
<button onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}" style="background: red; border: 1px solid blue; color: white; padding: 5px 50px 5px 50px;" title="Klik untuk membuka spoiler" type="button">Buka</button>
~Kode Spoiler Ketiga:
<div id="spoiler2" style="display: none;">
Letak Konten Isi Spoiler (Text/Gambar/dll)</div>
<button onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}" style="background: red; border: 1px solid blue; color: white; padding: 5px 50px 5px 50px;" title="Klik untuk membuka spoiler" type="button">Buka</button>
Dan Seterusnya...
"Spoiler adalah postingan konten (bisa berupa teks, foto atau video) tersembunyi yang bisa dilihat jika pembaca mengklik tombol. Pembaca juga bisa menyembunyikan kembali posting dengan menekan ulang tombol tersebut. Sementara fungsi spoiler itu sendiri adalah untuk menghemat space (tinggi) posting, mempercepat loading halaman, dan menghemat kuota pembaca."
Masih agak bingung? Jangan khawatir saya akan tunjukkan apa itu spoiler, dibawah ini adalah beberapa contoh tombol spoiler, silahkan anda tekan tombol "BUKA" dibawah ini agar anda lebih paham.
1. Contoh Tombol Spoiler Terlempar Kebawah
2. Contoh Tombol Spoiler Dengan Judul
Judul Spoiler:
[Show]
Sudah paham kan? Pasti sudah dong hehehe, di dalam blog anda tidak akan menemukan menu untuk membuat tombol spoiler, maka dari itu kita perlu kode khusus untuk membuatnya, kita mulai saja caranya bagaimana membuat tombol spoiler pada blogspot.
Cara membuatnya:
- ~Login ke blogger
- ~Buat entri baru
- ~Pergi ke mode HTML
- ~Copy paste kode spoiler dibawah ini:
▶Kode spoiler contoh pertama
<div id="spoiler" style="display: none;">
Ganti kalimat ini dengan teks yang anda inginkan (anda juga bisa menaruh gambar, video, dan kode tertentu disini)</div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" style="background: red; border: 1px solid blue; color: white; padding: 5px 50px 5px 50px;" title="Klik untuk membuka spoiler" type="button">Buka</button>
▶Kode spoiler contoh kedua
<div style="margin: 5px 10px 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Judul Spoiler</b>: <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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="background: red; border: 1px solid blue; color: white; font-size: 12px; padding: 5px 50px 5px 50px;" type="button" value="Buka" /></div>
<div class="alt2" style="background: cyan; border-left-color: lightblue; border-left-style: solid; border-left-width: 10px; color: blue; padding: 5px 2px;">
<div style="display: none;">
Ganti kalimat ini dengan teks yang anda inginkan (anda juga bisa menaruh gambar, video, dan kode tertentu disini)
</div>
</div>
</div>
▶Kode spoiler contoh ketiga
<a id="show_id" onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';">[Show]</a><span id="spoiler_id" style="display: none;"><a class="link" onclick="document.getElementById('spoiler_id').style.display='none'; document.getElementById('show_id').style.display='';">[Hide]</a><br />Ganti kalimat ini dengan teks yang anda inginkan (anda juga bisa menaruh gambar, video, dan kode tertentu disini)</span>
▶Kode spoiler contoh ketiga
<a id="show_id" onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';">[Show]</a><span id="spoiler_id" style="display: none;"><a class="link" onclick="document.getElementById('spoiler_id').style.display='none'; document.getElementById('show_id').style.display='';">[Hide]</a><br />Ganti kalimat ini dengan teks yang anda inginkan (anda juga bisa menaruh gambar, video, dan kode tertentu disini)</span>
Catatan: Ganti kalimat yang berwarna MERAH dengan konten yang anda inginkan (baik itu berupa kode, teks, gambar atau video). Ganti kalimat yang berwarna BIRU sesuai keinginan anda, setelah itu masuk ke compose dan binggo! Spoiler anda sudah siap.
Jika Ingin Membuat Banyak Spoiler pada Satu Postingan
Jika anda mau menggunakan beberapa spoiler dalam satu postingan buat saja nama spoiler yang berbeda pada setiap kode spoilernya. Contohnya seperti dibawah ini: (perhatikan kalimat yang berwarna HIJAU)
~Kode Spoiler Pertama:
<div id="spoiler" style="display: none;">
Letak Konten Isi Spoiler (Text/Gambar/dll)</div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" style="background: red; border: 1px solid blue; color: white; padding: 5px 50px 5px 50px;" title="Klik untuk membuka spoiler" type="button">Buka</button>
~Kode Spoiler Kedua:
<div id="spoiler1" style="display: none;">
Letak Konten Isi Spoiler (Text/Gambar/dll)</div>
<button onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}" style="background: red; border: 1px solid blue; color: white; padding: 5px 50px 5px 50px;" title="Klik untuk membuka spoiler" type="button">Buka</button>
~Kode Spoiler Ketiga:
<div id="spoiler2" style="display: none;">
Letak Konten Isi Spoiler (Text/Gambar/dll)</div>
<button onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}" style="background: red; border: 1px solid blue; color: white; padding: 5px 50px 5px 50px;" title="Klik untuk membuka spoiler" type="button">Buka</button>
Dan Seterusnya...
Selamat mencoba!
Komentar
Posting Komentar