Cara Buat Spoiler Blogspot - Blogger

Spoiler! He ... eh ...! Mendengar kata spoiler, sebenarnya pikiranku jadi lebih banyak meluncur ke sebuah accecories kendaraan bermotor atau mobil. Sebuah perangkat tambahan yang berfungsi untuk menjaga kestabilan dan mengurangi gaya tarik bumi (down force), sehingga laju kendaraan juga akan bertambah cepat. Kayaknya ungkapan "spoiler" ini merupakan sebuah istilah yang "dipinjam" blogger untuk menamai sebuah fungsi javascript yang berguna untuk menyembunyikan "sesuatu" dalam posting atau widget, dan kemudian hanya akan terlihat ketika "button" trigger "pemunculan" di sentuh atau di KLIK.

Untuk membuat sebuah spoiler dibutuhkan kode html yang terdiri dari beberapa kode css dan javascript serta xHTML. Sebagian kode disimpan dibagian head dan beberapa kode yang lain digunakan dalam posting atau melalui penambahan widget. Dalam sebuah bentuk spoiler yang sederhana, bahkan semua kode bisa langsung digunakan begitu saja saat posting dilakukan.

Cara membuat spoiler blogger/blogspot

1. Login to BloGGer : Tuliskan User Name/Nama Pengguna atau Email Address kemudian lanjutkan dengan menuliskan Password (Sandi).
2. Dasboard (Dasbor) : Setelah masuk di halaman dasbor, KLIK link Layout/Tata Letak atau Design/Rancangan.
3. Layout (Design) : Kita akan menyimpan terlebih dahulu kode CSS-nya dalam template. Oleh karena itu, sesampai di tahap ini KLIK link Edit HTMl.
4. Copy-Paste : Copy Kode CSS kemudian letakkan di atas kode ]]></b:skin>. Gunakan Ctrl+F untuk mencari kode di atas.
5. SAVE Template (Simpan Template) : Setelah kode CSS di letakkan pada posisi yang benar, KLIK SAVE Template/Simpan Template.

Kode CSS Spoiler

.bgsGR-boksSpoiler{margin:5px 20px;background:#CCCCCC;padding:5px; border:4px solid blue;-moz-border-radius:20px;border-radius:20px;-webkit-border-radius:20px;-goog-ms-border-radius:20px;}
span.bgsGR-Spoiler{font-family:helvetica enue;font-size:16px;font-weight:bold;padding:4px 8px 4px 8px;color:blue;}

Kode HTML dan Javascript yang digunakan di ruang posting

<div style="width:410px;"><div class="bgsGR-boksSpoiler" align="center"><div style="margin:5px 10px;">
<span class="bgsGR-Spoiler">Judul Spoiler</span><br />
<input style="padding:2px 10px;margin-top:15px;font-weight:bold;font-size:16px;color:#990000; background:#00CCFF;" value="Show" 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"/></div>
<div style="float:left;margin:5px 0;"><div style="display:none;">
Di sini posting yang akan disembunyikan (bisa gambar, teks atau yang lain)
</div></div></div></div>

Catatan/Keterangan

1. Semua kode di atas digunakan saat posting dilakukan.
2. Selain untuk posting dapat juga digunakan pada widget (melalui Add Gadget/Tambah Gadget di Page Element/Elemen Laman).
3. Penting! : Saat digunakan di halaman posting, karena kode yang digunakan dalam bentuk kode DIV, maka seluruh kode harus dibuat dalam bentuk rapat/padat. Jangan sampai ada spasi di antara tag yang digunakan.
Contoh :

<div style="......"><div style="..."><img src="...."/></div></div>

Jangan dalam bentuk terpotong/terputus spasi seperti :

<div style="......">
<div style="...">
<img src="...."/>
</div>
</div>

Bagian posting yang akan disembunyikan dan hanya akan ditampilkan ketika button spoiler di KLIK diletakkan pada bagian yang bertuliskan : Di sini posting yang akan disembunyikan (bisa gambar, teks atau yang lain).
5. Sampeyan bisa coba spoiler ini dengan menggunakan beberapa gambar yang sudah terbentuk dalam kode HTML di bawah ini. Letakkan seluruh kode pada bagian yang bertuliskan seperti kata tersebut di atas (warna merah).

Contoh isi spoiler

<div style="float:left;padding:4px;margin:4px;border:4px solid brown;-moz-border-radius:10px;"><img src="https://sites.google.com/site/gubhugreyotproject/img-post/gr/gr-gadisku-01.jpg" style="width:150px;height:150px;" /></div><div style="float:left;padding:4px;margin:4px;border:4px solid brown;-moz-border-radius:10px;"><img src="https://sites.google.com/site/gubhugreyotproject/img-post/gr/gr-gadisku-02.jpg" style="width:150px;height:150px;" /></div><div style="float:left;padding:4px;margin:4px;border:4px solid brown;-moz-border-radius:10px;"><img src="https://sites.google.com/site/gubhugreyotproject/img-post/gr/gr-gadisku-04.jpg" style="width:150px;height:150px;" /></div><div style="float:left;padding:4px;margin:4px;border:4px solid brown;-moz-border-radius:10px;"><img src="https://sites.google.com/site/gubhugreyotproject/img-post/gr/gr-gadisku-05.jpg" style="width:150px;height:150px;" /></div><div style="float:left;padding:4px;margin:4px;border:4px solid brown;-moz-border-radius:10px;"><img src="https://sites.google.com/site/gubhugreyotproject/img-post/gr/gr-gadisku-06.jpg" style="width:150px;height:150px;" /></div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «

Penggunaan table, DIV dan ol, ul serta li dalam posting harus selalu dibuat dalam bentuk rapat tanpa ada pemutusan setiap tag yang digunakan. Cara seperti ini membuat seluruh posting menjadi sangat rapat sekali sehingga sering sedikit merepotkan (sulit), tetapi apabila sudah terbiasa tidak terlalu banyak kendala yang akan dihadapi. Semoga berguna dan serta bisa dimanfaatkan dengan sempurna.