Membuat kotak Scroll dan spoiler pada blog

         Kali ini saya akan mengajarkan cara membuat Kotak scroll dan Spoiler pada postingan blog... 
Membuat Kotak Scroll
         Membuat Kotak scroll didalam postingan, salah satu kegunaannya apabila posting pada blog anda terlalu panjang bisa kita masukan post kedalam kota scroll agar dapat meminimalkan tempat pada halaman posting.
Caranya cukup simple, Copy Paste kode dibawah ini kedalam postingan sobat... alangkah baiknya jika sobat menggunakan HTML untuk membuat kotak scroll ini

<span><span style="font-style: italic;"><span style="font-style: italic;"><div style="height: 200px; width: 400px; font: 16px/26px Georgia,Garamond,Serif; overflow: scroll;">Masukan Tulisan atau gambar di sini
</div>
</span></span></span>

pada tulisan warna biru, silahkan masukkan tulisan atau gambar yang ingin anda masukkan.
Membuat Spoiler 
         Sebagian orang pastinya sudah tahu apa itu spoiler, apalagi kalau sering bermain di forum. Spoiler sudah pasti sering digunakan. Lalu bagaimana kalau mau menerapkan atau membuat spoiler di blog? Sebelumnya kalau ada yang belum tahu apa itu spoiler. saya jelasin singkat saja. Spoiler adalah tombol yang diguanakan untuk menyingkat tempat atau menyembunyikan konten (teks, foto atau video) dengan buka tutup. Contohnya bisa dilihat di bawah halaman ini.
Spoiler bisa juga dibuat di blog, lebih khusus dipostingan. Biasanya digunakan untuk membuat penasaran si pembaca dengan menyembunyikan terlebih dahulu. Untuk melihatnya dengan mengklik tombol spoiler itu. Selain itu juga untuk menghemat tempat, ya karena buka tutup itu (spoiler). Lalu bagaimana cara membuat spoiler di blog? Langsung simak yang berikut ini. 
1. Masuk ke postingan yang akan kita beri spoiler, atau buat entri baru
2. Masuk ke mode HTML

Rex Screen Shoot:

3. Paste Script di bawah ini

Rex Screen Shoot:

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Rex Screen Shoot</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
masukan foto/video link atau tulisan anda
 <br>
</div>
</div>
</div>

Open  : Bisa di ganti dengan kemauan  sobat 
Closed : Bisa di ganti dengan kemauan sobat  
Rex^Room  Screen Shoot : Bisa di ganti dengan kemauan sobat

masukan foto/video link atau tulisan anda  bisa di ubah sesuai dengan keinginan sobat

Related Post: