.::Selamat Datang Di Blog Ini..Semoga Bermanfaat::.

Membuat Spoiler Blogspot

Senin, 19 Maret 2012

Hay kawan, selamat pagi, ,
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="tombol
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>
Kalian bisa ganti teks yang tercetak tebal, dengan keinginan temen-temen, tentunya dengan masing-masing konten ya.

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
contoh spoiler itu seperti ini

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 komentar:

Poskan Komentar

 

Pengikut

Waktu Sholat Kebumen

Pengunjung