Membuat spoiler di blog

widget Spoiler adalah widget yang berfungsi untuk menyembunyikan tulisan atau gambar yang ingin dishare di dalam sebuah artikel postingan. Gambar atau tulisan baru akan muncul ketika pengunjung mengklik tombol yang ada pada spoiler tersebut.

Fitur spoiler biasanya banyak digunakan di website forum dan kini sudah bisa digunakan di Blogspot secara instan tanpa mengedit template Blog. Adapun kelebihan dari penggunaan widget spoiler adalah :

1). Load dari web atau Blog akan menjadi lebih ringan jika semua gambar diletakkan di dalam spoiler, karena pada saat load pertama gambar tidak akan ditampilkan sampai pengunjung sendiri yang akan melihatnya dengan mengklik tombol spoiler.
2). Akan lebih menghemat tempat ( space) di dalam halaman artikel kita.

Caranya :
<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Spoiler </span></i><input 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'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
isi spoiler...

</div>
</div>
</div>
</div>

1). Untuk memunculkan spoiler sobat mesti menulis artikel lewat mode HTML bukan lewat mode Tulis yang biasa sobat lakukan, sobat boleh terlebih dahulu menulis dengan mode tulis biasa, namun setelah itu jika sobat ingin menyertakan spoiler sobat mesti pindah ke Mode HTML untuk menyisipkan kode-kode di bawah:


2). Lalu kembali ke mode Tulis, lihat dan coba dulu fitur spoilernya sebelum menerbitkan postingan!
Contoh Spoiler :

Membuat Judul Blog Berganti-ganti

Spoiler

Coba perhatikanjudul blog saya berganti-ganti bukan. coba yuk..... caranya gampang ikuti aja langkah berikut:

1. Buka dan Loggin Blogger
2. Masuk Ke Rancangan
3. Elemen Halaman
4. Tambah Gadget --> HTML/Java Script
5. Copaz Code saya ini.

<script language="JavaScript">
<!--
/*****JUDUL BERGANTI By. Yasir252*****/

function tb5_makeArray(n){
this.length = n;
return this.length;
}

tb5_messages = new tb5_makeArray(6);
tb5_messages[0] = "Pesan 1";
tb5_messages[1] = "Pesan 2";
tb5_messages[2] = "Pesan 3";
tb5_messages[3] = "Pesan 4";
tb5_messages[4] = "Pesan 5";
tb5_messages[5] = "Pesan 6";
tb5_rptType = 'infinite';
tb5_rptNbr = 10;
tb5_speed = 50;
tb5_delay = 2000;
var tb5_counter=1;
var tb5_currMsg=0;
var tb5_stsmsg="";
function tb5_shuffle(arr){
var k;
for (i=0; i<arr.length; i++){
k = Math.round(Math.random() * (arr.length - i - 1)) + i;
temp = arr[i];arr[i]=arr[k];arr[k]=temp;
}
return arr;
}
tb5_arr = new tb5_makeArray(tb5_messages[tb5_currMsg].length);
tb5_sts = new tb5_makeArray(tb5_messages[tb5_currMsg].length);
for (var i=0; i<tb5_messages[tb5_currMsg].length; i++){
tb5_arr[i] = i;
tb5_sts[i] = "_";
}
tb5_arr = tb5_shuffle(tb5_arr);
function tb5_init(n){
var k;
if (n == tb5_arr.length){
if (tb5_currMsg == tb5_messages.length-1){
if ((tb5_rptType == 'finite') && (tb5_counter==tb5_rptNbr)){
clearTimeout(tb5_timerID);
return;
}
tb5_counter++;
tb5_currMsg=0;
}
else{
tb5_currMsg++;
}
n=0;
tb5_arr = new tb5_makeArray(tb5_messages[tb5_currMsg].length);
tb5_sts = new tb5_makeArray(tb5_messages[tb5_currMsg].length);
for (var i=0; i<tb5_messages[tb5_currMsg].length; i++){
tb5_arr[i] = i;
tb5_sts[i] = "_";
}
tb5_arr = tb5_shuffle(tb5_arr);
tb5_sp=tb5_delay;
}
else{
tb5_sp=tb5_speed;
k = tb5_arr[n];
tb5_sts[k] = tb5_messages[tb5_currMsg].charAt(k);
tb5_stsmsg = "";
for (var i=0; i<tb5_sts.length; i++)
tb5_stsmsg += tb5_sts[i];
document.title = tb5_stsmsg;
n++;
}
tb5_timerID = setTimeout("tb5_init("+n+")", tb5_sp);
}
function tb5_randomizetitle(){
tb5_init(0);
}
tb5_randomizetitle();

//-->
</script>

Keterangan Code :
Tulisan Berwarna MERAH : Adalah Pesan yang ingin Kita Tulis di Judul
Tulisan Berwarna BIRU : Adalah Kecepatan Pergantian Teks
Tulisan Berwarna HIJAU : Adalah Satuan Delay dari tiap tiap Pergantian Teks