Semua pasti sudah tahu apa itu spoiler kan? Spoiler itu kaya gini contohnya
Spoiler Contoh:
wow:
Diatas tadi adalah contoh spoiler,
fungsi utama spoiler adalah mengurangi beban loading page, biasanya yang
dimasukin ke dalam spoiler adalah image dengan resolusi besar, jadi
dengan spoiler image tidak akan diload secara langsung yang dapat
mempercepat waktu loading. Fungsi lainnya tentu dengan spoiler kita
dapat menghemat space dan posting terlihat lebih rapi. Sekian dulu
basa-basinya, langsung saja kita lihat bagaimana cara membuat spoiler
dibawah ini:
caranya mudah sekali, tinggal masukin saja kode html berikut ini
caranya mudah sekali, tinggal masukin saja kode html berikut ini
Cara Membuat Spoiler :
<div style="margin: 5px 20px 20px;"><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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Masukkan isi spoiler disini, dapat diisi gambar, kode html, paragraf dan lain2
</div>
</div>
</div>
<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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Masukkan isi spoiler disini, dapat diisi gambar, kode html, paragraf dan lain2
</div>
</div>
</div>
ARTIKEL TERKAIT:
membuat spoiler
tips blog
- Cara Membuat Efek Glow pada Teks atau Link Blogger
- Cara Membuat Div Styles dan Macam-Macamnya
- Cara Membuat Tombol di Blogspot dan Wordpress
- CARA MEMBUAT HIDDEN CHAT BOX
- Memberi Komentar di HTML
- Cara Edit HTML dan Expand Widget Templates Terbaru 2014
- Cara Membuat Artikel Terkait (Related Post) Di Bawah Setiap Postingan/Artikel
- CARA MENGATASI LINK BLOG YANG DICEKAL OLEH ROBOTS.TXT PADA GOOGLE
- CARA MENAMBAHKAN VIDEO YOUTUBE PADA BLOG
- CARA MEMBUAT BURUNG TWITTER BETERBANGAN DI BLOG
- Cara Membuat Gambar Batman Berjalan di Sudut Halaman Blog
- Cara Mengganti Background Blog dengan Sambaran Petir
- Cara Membuat Efek Lipatan Kertas pada Pojokan Blog
- Cara Membuat Tombol Go To Top atau kembali ke atas di Blogger
- 10 Situs Download Gambar Untuk Blog & Desain
- Cara Mengganti Kursor atau Mouse pada Blog
- Cara Memproteksi Postingan Agar Tidak Bisa di Copy-Paste
- Cara dasar membuat Link secara manual
- Cara membuat Dropdown menu
- Cara Menambah Ikon Status Off/Online Yahoo Messenger
- Senilai Berapakah Harga Blog Kamu?
- Cara Membuat Menu Secara Horizontal
- Cara Mengganti Navigasi "Older Post" atau "Newer Post" Menjadi Berbentuk Angka
- Cara Membuat Shoutbox atau Chat Box pada Blogspot
- cara memasang translator:google translate pada blogspot
trik blog
- Cara Membuat Efek Glow pada Teks atau Link Blogger
- Cara Membuat Teks Berjalan atau Marquee Teks
- Cara Membuat Div Styles dan Macam-Macamnya
- Cara Membuat Tombol di Blogspot dan Wordpress
- CARA MEMBUAT HIDDEN CHAT BOX
- Memberi Komentar di HTML
- Cara Edit HTML dan Expand Widget Templates Terbaru 2014
- Cara Membuat Artikel Terkait (Related Post) Di Bawah Setiap Postingan/Artikel
- CARA MENGATASI LINK BLOG YANG DICEKAL OLEH ROBOTS.TXT PADA GOOGLE
- CARA MENAMBAHKAN VIDEO YOUTUBE PADA BLOG
- CARA MEMBUAT BURUNG TWITTER BETERBANGAN DI BLOG
- Cara Membuat Gambar Batman Berjalan di Sudut Halaman Blog
- Cara Mengganti Background Blog dengan Sambaran Petir
- Cara Membuat Efek Lipatan Kertas pada Pojokan Blog
- Cara Membuat Tombol Go To Top atau kembali ke atas di Blogger
- 10 Situs Download Gambar Untuk Blog & Desain
- Cara Mengganti Kursor atau Mouse pada Blog
- Cara Memproteksi Postingan Agar Tidak Bisa di Copy-Paste
- Cara dasar membuat Link secara manual
- Cara membuat Dropdown menu
- Cara Menambah Ikon Status Off/Online Yahoo Messenger
- Senilai Berapakah Harga Blog Kamu?
- Cara Membuat Menu Secara Horizontal
- Cara Mengganti Navigasi "Older Post" atau "Newer Post" Menjadi Berbentuk Angka
- Cara Membuat Shoutbox atau Chat Box pada Blogspot
No comments:
Post a Comment