Cara Membuat Spoiler (Show/Hide) Untuk Teks Dan Image Pada Blogspot

Browse » Home » CSS dan Javascript » Cara Membuat Spoiler (Show/Hide) Untuk Teks Dan Image Pada Blogspot

Cara Membuat Spoiler (Show/Hide) Untuk Teks Dan Image Pada Blogspot

Ditulis oleh Kang eNeS Senin, 01 Maret 2010. 09.05
Label: CSS dan Javascript komentar (21)

Tulisan ini mungkin terbilang basi karena jika kita searching di si Mbah akan muncul beragam tulisan yang memuat masalah ini. Tapi sehubungan ada saja sobat yang menanyakan masalah ini maka saya coba membahasnya, siapa tahu ada di antara sobat yang membutuhkannya juga.

Sepengetahuan saya, spoiler ini ada dua jenis (mungkin ada sobat yang ingin menambahkan/mengoreksi): Pertama, spoiler yang memakai perintah langsung, yaitu dengan menempatkannya di atas teks/image yang akan disembunyikan, seperti spoiler pada Award Valentine, dan kedua, spoiler yang menggunakan perintah tidak langsung, yaitu dengan menambahkan script dan kode CSS pada template blog, seperti "Membuat Toggle Spoiler Untuk Blok Komentar".

Spoiler Jenis Pertama
Jika kamu tertarik dengan spoiler jenis pertama ini silahkan klik tampilkan caranya di bawah ini:

Spoiler Jenis Kedua
Jika kamu tertarik dengan spoiler jenis kedua (lihat contoh pada Recent Readers dan Related Post) silahkan klik tampilkan caranya di bawah ini:

Tampilkan/Sembunyikan Caranya

Langkah-langkah membuatnya sebagai berikut:

Login ke akun Blogger kamu.
Dari halaman Dasbor, klik Tata Letak dan pilih Edit HTML.
Cari kode ]]></b:skin> (gunakan Control F atau F3):

Letakkan kode CSS berikut di atasnya:

/*-----Toggle Spoiler-----*/
.widgethidden {display:none}
.widgetshown {display:inline}

Lalu letakkan script berikut di bawah kode ]]></b:skin>:

<script type='text/Javascript'>
function togglespoiler (postid){
 var whichpost = document.getElementById(postid);
 if (whichpost.className=="widgetshown"){
 whichpost.className="widgethidden";
 }
 else{
 whichpost.className="widgetshown";
 }
}
</script>

Catatan:
Bagi yang sudah memasang CSS dan script toggle spoiler untuk blok komentar, abaikan perintah di atas.

Setelah itu, pada setiap ingin membuat spoiler, buatlah perintah seperti berikut:
```
<div style="text-align:center; margin:0px 0px; font-size:auto; font-weight:bold;">
<a href='javascript:togglespoiler ("spoiler1")' style='border:1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; padding:3px 10px; background-color:#e6e6e6;' title='Click for expand'>Tampilkan/Sembunyikan</a></div>
<div class='widgethidden' id='spoiler1'>
TULISAN/GAMBAR YANG AKAN DISEMBUNYIKAN
</div>
```
Catatan:
Jika kamu akan membuat spoiler lebih dari satu, maka pada link javascript dan id-nya ganti menjadi spoiler2, spoiler3, dst. Atau bisa juga membuat nama id sendiri, seperti: foto, puisi, kartun, dll.
Kamu dapat mengubah perataan teks, margin atas-bawah dan kanan-kiri, ukuran huruf, besaran huruf, judul link (kalimat Click for expand), dan nama link (kalimat Tampilkan/Sembunyikan) sesuai keinginan kamu.

Nah, segitu aja sob, mudah-mudahan bermanfaat. Selamat mencoba....

Referensi: Dari berbagai sumber

Cara Membuat Spoiler (Show/Hide) Untuk Teks Dan Image Pada Blogspot

Artikel Terkait Dengan CSS dan Javascript

21 komentar Posting Komentar

Tambahkan Komentar

10 Artikel Terbaru

10 Artikel Terpopuler

Blog Tutorials

Seputar SEO

HTML Tutorials

CSS dan Javascript

Komputer dan Internet

Agama

Politik

Sosial Budaya

Sekedar Coretan

Yang Baru Dari Sastra Culun

Direkomendasikan Teman Facebook

21 komentar
Posting Komentar