Home » » Cara Membuat Spoiler di Postingan Blog.

Cara Membuat Spoiler di Postingan Blog.

Ditulis oleh Rizqi Kautsar pada Minggu, 04 Oktober 2015 | 07.15

Cara Membuat Spoiler di Postingan Blog | Dapur Tutorial

Ada beberapa cara yang dapat dilakukan untuk mempercepat loading sebuah postingan yang panjang dan berisi banyak gambar. Salah satunya adalah dengan menggunakan fitur spoiler. Karena dengan fitur tersebut, kita bisa memangkas sedikit banyak waktu loading sebuah blog. Bagi sebagian dari kita yang sering membuka forum Kaskus, pasti sudah sangat familiar dengan fitur ini. 

Spoiler adalah sebuah fitur yang dibuat dengan menggunakan gabungan fungsi Javascript, HTML dan CSS untuk tampilannya. Adapun berikut langkah-langkah yang harus dilakukan untuk membuat sebuah spoiler dalam postingan yang kita inginkan.

1. Saat menulis sebuah postingan, pastikan kita berada dalam mode HTML seperti yang ditandai dengan kotak merah pada gambar di bawah ini.
Cara Membuat Spoiler di Postingan Blog | Dapur Tutorial

2. Salin kode HTML yang ada di bawah ini :
<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><span style="font-size: x-small;">Demo Spoiler</span><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 dir="ltr" style="text-align: left;" trbidi="on"> ISI TULISAN KALIAN DI SINI </div></div></div></div>

Keterangan : Tulisan berwarna oranye dapat kalian rubah sesuai dengan keinginan. 

3. Maka hasil spoiler pun akan menjadi seperti ini :
Demo Spoiler
ISI TULISAN KALIAN DI SINI

Sekian tutorial kali ini. Semoga bermanfaat...

----------------
Catatan : Bila gambar ada yang tidak muncul, video tidak dapat diplay atau tutorial sudah tidak relevan, mohon beri komentar pada kolom di bagian bawah postingan ini. Terima kasih. 

0 komentar:

Posting Komentar