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:

Tentang BLoG

• Cara Membuat Tombol (button) url lengkap
• 10 Kata kunci (keyword) yang paling banyak di cari di dunia
• 10 Keyword yang paling banyak di cari di indonesia menggunakan google insight
• Cara Membuat Breadcrumbs Langsung Terindeks Oleh Google
• Merubah Postingan lama / baru (Navigasi) dengan angka
• Cara membuat 2 kolom posting / widget pada blog
• Cara membuat halaman depan blog tanpa postingan
• Merubah Title Tag Lebih SEO Friendly
• Membuat SlideShow mudah dan keren di blog
• Template keren gratis untuk blogger (part.3)
• Template keren gratis untuk blogger (part.2)
• Template keren gratis untuk blogger
• Membuat Favicon pada blog atau website bagian.2
• Membuat favicon pada blog atau website bagian.1
• Membuat menu dropdown keren
• membuat link menjadi warna warni / rainbow link
• Membuat Rencent Comment terbaru dan keren with avatar
• Menampilkan jumlah postingan di beranda
• Membuat Halaman Statis pada blogger
• Membuat Border / widget melengkung pada blog
• cara mendaftarkan blog di rss feeds
• Cara menghilangkan Diposkan, Label dan waktu postingan / artikel
• Memasang Menu Accordion Terbaru pada widget (vertikal)
• Memasukan Label Tertentu pada Widget
• Membuat blog jadi DoFollow