Kali ini saya mau ngesare tentang bagaimana cara untuk membuat spoiler seperti di kaskus.us. OK lah langsung ke topik saja gan.
Banyak sekali inovasi-inovasi baru yang di tawarkan oleh kaskus yang bisa di masukan dalam blogspot, dan itu ternyata lebih bisa membuat menarik blog kita. Pada dasarnya spoiler berfungsi sebagai alat untuk meminimalkan space yang berisi gambar maupun teks yang sangat banyak dari laman.
Spoiler ini sebelumnya lebih sering dipakai oleh pecinta kaskus. Namun kali ini Spoiler lebih banyak sering juga digunakan pada blogger. Fungsinya bisa sebagai alat untuk membuat penasaran kepada para pembaca untuk mengetahui ada apa sih yang disembunyikan itu, dengan cukup menekan tombol yang tersedia maka object akan bisa terlihat. Jika ingin melihat samplenya bisa dilihat di sini gan.
Kayaknya sudah cukup untuk teorinya ya, cara untuk membuatnya pun tidak sesulit dengan apa yang kita bayangkan. OK gan langsung keTKP saja.
Disini saya sediakan scripnya :
<div style="margin: 5px;"><br /> <div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul spoiler</span></i><input value="tombolKalian bisa ganti teks yang tercetak tebal, dengan keinginan temen-temen, tentunya dengan masing-masing konten ya.
spoiler" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/><br /> </div><br /> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><br /> <div style="display: none;"> masukan konten yang temen-temen inginkan</div></div></div>
Setelah itu teman-teman masuk ke dasbor kalian, klik Tab Posting kemudian klik Entri Baru kemudian klik Edit HTML, dalam bahasa inggris gini gan Posting Tab > New Post > Edit HTML.
Ini saya kasih hasil dari script diatas :
Contoh Spoiler
OK gan seperti itu dulu tutorial yang bisa saya share, jangan lupa tinggalkan komentar ya. Mau berangkat Kuliah dulu ya,,,Have nice day,, seeee yaaaa ;)
0 comments:
Post a Comment