------Terima Kasih Untuk Kunjungannya ------ Untuk Melihat Daftar Isi Dari Blog Ini Klik Tab Bertuliskan INDEX ------ Untuk Bertukar Link Klik Pada Tab Link Exchange ------ Untuk Yang Suka Download Dapat Melihat Di Tab Download ------ Jika Anda Ingin Memasang Iklan Pada Blog Ini Cukup Berkomentar Pada Tab Advertising ------

Rabu, 15 September 2010

Cara Membuat Spoiler Ala Kaskus di Blogger


Dilihat dari gambarnya sih spoiler mobil, tapi yang saya maksud adalah spoiler dalam blogging...hhehe maklum lah bingung mau dikasih gambar apa...
Bagi para kaskuser pasti udah tau apa itu spoiler. Bagi orang awam pasti bingung apa itu spoiler dan fungsinya untuk apa???
Fungsinya sih tidak jauh dari spoiler mobil deh kayaknya. Spoiler mobil digunakan untuk mempercantik tampilan mobil dan ada beberapa bagian mobil yang tertutup olehnya.

Yup, spoiler adalah suatu kotak untuk menyembunyikan konten ( gambar, tulisan, video dll )dalam suatu posting selain itu juga untuk mempercantik / mempersingkat isi dari postingan kita. Jadi konten tersebut tidak begitu saja muncul. Kita harus mengklik tombol terlebih dahulu barulah isi dari spoiler itu muncul. Udah, gak perlu nunggu lama - lama lagi langsung aja kita bahas cara bikin spoiler ini 


Contoh spoiler :
Spoiler buat ngintip gambar:
spoiler gambar

Bikin Spoiler untuk gambar :
1. Bikin entri baru / postingan baru
2. Kemudian masukkan kode berikut ini dalam postingan kamu

<div style="margin:5px; margin-top:3px"><br /> <div class="smallfont" style="margin-bottom:2px"><b>Spoiler</b> untuk <i>gambar</i>: <input type="button" value="Show" style="width:auto;font-size:10px;margin:0px;padding:0px;" 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'; }"><br /> </div><br /> <div class="alt2" style="margin: 0px; padding: 3px; border: 1px inset;"><br /> <div style="display: none;"><br /> <img src="ALAMAT_GAMBAR_ANDA" width="none" height="none" alt="spoiler gambar"><br /> </div><br /> </div><br /> </div>

3. Ganti tulisan ALAMAT GAMBAR ANDA dengan url dari gambar yang anda ingin masukkan ke dalam spoiler.
4. Terbitkan Postingan anda dan lihat hasilnya

Contoh spoiler


Spoiler tentang apapun




isi spoiler...

Membuat spoiler dengan isi bebas (terserah anda) :

1. Bikin entri baru / postingan baru
2. Kemudian masukkan kode berikut ini dalam postingan kamu

<div style="margin: 5px;"><br /> <div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Tentang bla..bla.bla.. </span></i><input value="Show" 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;"> isi spoiler </div></div></div>

3. Ganti tulisan isi spoiler dengan konten yang anda ingin masukkan ke dalam spoiler.
4. Terbitkan Postingan anda dan lihat hasilnya

Sekian info kali ini semoga bermanfaat :)

2 komentar:

  1. bagus sekali infonya langsung saya praktekkan, mudah2an berhasil...

    BalasHapus

Jangan Sungkan Untuk Meninggalkan Komentar Disini. Komentar yang baik adalah komentar yang sesuai dengan isi posting dan dapat berupa kritik maupun saran. Terima kasih, anda sudah meninggalkan komentar yang bermutu.

Related Posts with Thumbnails