Seperti halnya penggunaan textarea, scroll box juga berfungsi untuk lebih memudahkan blogger dan terutama pembaca blog saat menikmati blog yang berkaitan dengan KODE HTML. Penggunaan scroll box sedikit mempunyai nilai lebih karena dokumen yang dipostingkan di dalamnya dengan mudah dapat dilakukan beberapa perubahan seperti halnya jenis, warna dan ukuran font yang pada akhirnya akan lebih memudahkan bagi pembaca blog untuk memahami dokumen yang terposting. Selain dari hal tersebut, dalam scroll box dapat juga disertakan posting yang berupa image atau gambar. Scroll box dapat dibuat dalam bentuk yang paling sederhana hingga bentuk yang cukup kompleks dengan memadukan KODE HTML dan image hingga tercipta sebuah scroll box yang indah, dinamis dan atraktif. Dibawah ini salah satu contoh bentuk scroll box sederhana yang dapat dikembangkan menjadi bentuk yang lebih kompleks dengan menambahkan beberapa fungsi lain baik dengan menggunakan KODE CSS ataupun gambar.

Gunakan KODE berikut saat melakukan posting :

<div style="height:200px; width:500px; background: #66CCFF; border:2px solid #0000FF; padding: 20px 6px; overflow:scroll;overflow:auto;"><br>Letakkan Teks/Image/KODE HTML atau materi posting yang lain di sini<br></div>

Anda juga bisa membentuk sebuah scroll box dengan menggunakan KODE CSS dengan menyimpannya di bagian head di antara tag dan tag (tepatnya di atas kode ]]>). Dengan menggunakan CSS yang bersifat permanen, maka KODE lain yang dipergunakan saat melakukan posting menjadi lebih simple dan ruang posting menjadi tidak penuh sesak oleh banyaknya KODE HTML pembentuk scroll box.

Langkah yang harus dilakukan adalah sebagai berikut :

Simpan KODE CSS berikut di bagian head :

.postingbox {<br> width: 500px; /* sesuaikan lebar dg kebutuhan atau pakailah auto - width:auto */<br> background: #66CCFF url();/* Untuk background color atau image */<br> border: 2px solid #555; /*tebal, jenis dan warna */<br> overflow: scroll; overflow:auto;<br> font-size: 12px; /* ukuran font */<br> font-family: Verdana; /*atau jenis font lain */<br> font-weight: 500; /* font-weight bisa juga normal atau bold */<br> padding: 15px 8px; /* atas/bawah=20px, kanan/kiri=6px */<br> margin:15px 5px; /silahkan atur margin bila di kehendaki */<br> }

Gunakan KODE berikut saat melakukan posting :

<div class="postingbox" style="height:300px;"><br>Letakkan di sini Teks/Image/KODE HTML yang akan dipostingkan<br></div>

1. Akan lebih baik jika height (tinggi scroll box) di terapkan di xHTML dengan pertimbangan secara cepat dan mudah kita bisa mengatur ketinggian Scroll Box ketika posting dilakukan. Bila kode HTML yang diposting hanya sedikit maka height dihilangkan dan ketika kode sangat panjang ukuran height bisa ditambah!

2. Apabila ingin menggunakan sebuah background gambar (image) pada Scroll Box maka rubahlah pada kode CSS menjadi:

background: #66CCFF url(URL image);

Contoh :

background:#66ccff url(http://img.theomegaproject.org/thumbs/2009/05/12.jpg);