Cara Simpel Membuat Scroll Box di Website

CARA MEMBUAT SCROOL BOX

Scroll Box banyak digunakan di web atau blog. Scroll Box sangat berguna sekali untuk menghemat tempat, terutama bila halaman web atau blog sudah penuh dan sementara masih banyak artikel atau apa saja yang ingin tetap ditampilkan pada satu halaman. Scroll Box selain bisa digunakan untuk tempat artikel, banyak juga yang menggunakan Scroll Box sebagai tempat daftar isi.

Cara membuat Scroll Box sangat mudah, silahkan anda perhatikan contoh dibawah ini berikut kodenya :


JUDUL ARTIKEL
Silahkan anda bisa mengisi artikel atau daftar isi atau apa saja disini. Semakin banyak teks yang anda isikan dalam scroll box ini, dengan sendirinya akan membentuk kotak scroll box secara otomatis, sehingga dapat menghemat tempat. Lihat Contoh scroll box dibawah dengan isi teks yang lebih banyak.

Kodenya:

<div align="center">

<table width="250" border="1">
<tr> <th colspan="100%" scope="col">JUDUL ARTIKEL</th> </tr>
<tr><td><div style="font-family: arial; font-size: 12px; overflow: scroll; width: 250px; height: 150px;"><div style="text-align: center; width: 100%; padding: 0 px; overflow: hidden;">Silahkan anda bisa mengisi artikel atau daftar isi atau apa saja disini. Semakin banyak teks yang anda isikan dalam scroll box ini, dengan sendirinya akan membentuk kotak scroll box secara otomatis, sehingga dapat menghemat tempat. Lihat Contoh scroll box dibawah dengan isi teks yang lebih banyak.</div></div></td></tr>
</table>
</div>

Anda juga bisa memberi warna sesuka anda, seperti scroll box dibawah ini berikut kodenya :



BACA JUGA:







Kodenya:

<div align="center">
<table width="250" border="1">
<tr> <th colspan="100%" scope="col"bgcolor="#FFFFFF">BACA JUGA:</th> </tr><tr><td>
<div style="font-family: georgia; font-size: 12px; overflow: scroll; background: #FFFFFF; border-color: #CCCCCC; width: 250px; height: 300px;"><div style="text-align:left; width: 100%; padding: 0 px; overflow: hidden; color: #190707; background:#FFFFFF;"><script src="http://feeds.feedburner.com/AlifmukusCamp?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/AlifmukusCamp"></a><br/>Powered by FeedBurner</p> </noscript></div>
</div>
</td></tr>
</table>
</div>

Silahkan anda ganti teks berwarna merah dia atas dengan daftar isi milik anda. Demikianlah tips cara membuat scroll box.


Selamat mencoba dan Semoga bermanfaat....