Tutorial Membuat Spoiler di Blogger Kayak Kaskus

Klik untuk melihat:

Hai semua ^_^ Kembali lagi sama mimin yang selalu ceria, Admin K di KNK Blog. Kali ini mimin bakal kasih tutorial gimana sih cara ngebikin spoiler kayak kaskus yang bisa dibuka-tutup? Contohnya kayak di atas tuh. Nah, daripada banyak basi-basi mari kita mulai.



Ingat! Tips ini hanya berlaku untuk Blogger, bagi yang lain entahlah.

Langkah 1
Tulislah postingan seperti biasa, contohnya ente pengen buat cerita abal, tulislah seperti biasa. Kalo ente pengen tambah gambar juga gak masalah. Yang pasti semua hal baik tulisan, gambar, bahkan video bisa dimasukin ke dalam spoiler. Bagi yang nggak ngerti HTML tulislah hal-hal yang pengen ditaroh di spoiler aja. Jangan tulis seluruh postingan kalo ada yang mau ditaroh di luar spoiler.

Langkah 2
Gantilah mode dari mode compose ke mode HTML. Silahkan liat aja di kiri atas di sebelah tombol undo.

Langkah 3
Setelah ganti ke mode HTML, mungkin ente puyeng melihatnya. Yap, inilah postingan ente yang tertulis dalam kode HTML. Kalo ente ngerti bahasa HTML mungkin gak masalah tapi yang nggak ngerti kasian banget. Setelah terbuka, cut-lah kode yang memuat tulisan atau gambar ente yang pengen ente masukin ke spoiler ke dalam notepad. Bagi yang nggak ngerti HTML mungkin bisa tulis terlebih dahulu hal-hal yang pengen di taroh di spoiler sebelum menulis seluruh postingan. Setelah itu cut kode HTML-nya. Ingat! Faktanya seorang blogger harus bisa ngerti HTML walau dikit karena mungkin aja fasilitas penyedia layanan Blogging masih kurang sehingga membutuhkan sedikit kemampuan coding biar blog-nya makin keren.

Langkah 4
Masih pada mode HTML, copy-lah kode berikut

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Klik untuk melihat</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="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" />
</div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div class="separator" style="clear: both; text-align: center;">
Blablabla
<br /></div>
</div>
</div>
</div>

Langkah 5
Perhatikan tulisan yang warnanya berbeda yang terdapat dalam kode yang di atas. Itu adalah bagian yang bisa ente rubah sesuka ente. Coba liat aja spoiler yang mimin punya di paling atas. Ente bisa mengganti tulisan "Klik Untuk Melihat", "Tutup", sama "Buka" menjadi tulisan laen sesuai keinginan ente. Tinggal ganti deh tulisannya. Nah, dibagian "Blablabla" yang tulisannya merah itulah objek-objek yang bakal dimasukin ke spoiler. Hapus tulisan "Blablabla" dan diganti dengan kode yang ente masukin ke notepad tadi. Copy yang ada di notepad lalu Paste-kan. Nah, akhirnya ente pun berhasil membuat spoiler, hore. Setelah itu ente mungkin pengen buat spoiler lagi, silahkan, kalo nggak, ya lanjutin post-nya. Eh, balikin ke mode Compose biar ente bisa ngeliat dimana posisi spoiler-nya lalu mulai lanjutin post-nya.

Okey, gitu aja, mungkin ente jadi susah tidur buat mikirin kode HTML-nya diatas. Ane juga masih nubi dalam pengkodean HTML. Kalo gak berhasil tolong komen ya, kalo kodenya ada yang salah, plis komen mungkin aja mimin salah ketik atau salah hapus. Sekian aaand goodbye V(^_^)


Jangan lupa juga

Baca tentang huruf Kanoka
Baca tentang cara memperbanyak pengunjung di Blog
Bosan? Mari kesini