Cara membuat Scroll Box

Pada Tutorial blog kali ini saya akan kasih tips cara membuat Scroll 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.

Berikut Kode untuk scroll box diatas :

<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 :

TIPS DAN TRIK CINTA

Tips Dan Trik Menghadapi Kekasih Yang Sedang Bad Mood Tips Motivasi mario teguh tentang CINTA 10 Kalimat Yang Buat Pasangan Amat Bahagia Inilah Penyebab Seseorang Susah Mendapatkan Pacar Tanda Terjebak Hubungan Tak Pasti 7 Alasan Sahabat Lebih Penting Dari Pada Kekasih Tips Memberikan Hadiah Yang Unik Untuk Pasangan Dihari Spesial 5 Tips Jitu Agar Wanita Mengejar Anda 5 Kriteria Wanita Idaman Di Mata Pria Ciri Pria Yang Benar Benar Punya Rasa Cinta Ciri Ciri Wanita Dambaan Pria 5 Cara Ngegebet Cewek Yang Lebih Tua Tips Menjaga Cinta Agar Tetap Awet Dan Langgeng Inilah Alasan Kenapa Banyak Remaja Bercinta Didalam Tips Agar Kegagalan Cinta Tidak Terulang Kembali

Berikut Kode untuk scroll box diatas :

<div align="center">
<table width="250" border="1">
<tr> <th colspan="100%" scope="col"bgcolor="#F2F2F2">CONTOH DAFTAR ISI TUTORIAL BLOG</th> </tr><tr><td>
<div style="font-family: arial; font-size: 12px; overflow: scroll; background: #FFFFFF; border-color: #CCCCCC; width: 250px; height: 250px;"><div style="text-align:left; width: 100%; padding: 0 px; overflow: hidden; color: #FFFFFF; background: #EFEFFB;">

<ul>

<li><a href="http://www.catatanjalanhidupku.co.cc/2012/02/tips-dan-trik-menghadapi-kekasih-yang.html">Tips Dan Trik Menghadapi Kekasih Yang Sedang Bad Mood</a></li>

<li><a href="http://www.catatanjalanhidupku.co.cc/2012/02/tips-motivasi-mario-teguh-tentang-cinta.html" target="_new">Tips Motivasi mario teguh tentang CINTA</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/10-kalimat-yang-buat-pasangan-amat.html">10 Kalimat Yang Buat Pasangan Amat Bahagia</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/inilah-penyebab-seseorang-susah.html">Inilah Penyebab Seseorang Susah Mendapatkan Pacar</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/tanda-terjebak-hubungan-tak-pasti.html">Tanda Terjebak Hubungan Tak Pasti</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/7-alasan-sahabat-lebih-penting-dari.html">7 Alasan Sahabat Lebih Penting Dari Pada Kekasih</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/tips-memberikan-hadiah-yang-unik-untuk.html">Tips Memberikan Hadiah Yang Unik Untuk Pasangan Dihari Spesial</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/5-tips-jitu-agar-wanita-mengejar-anda.html">5 Tips Jitu Agar Wanita Mengejar Anda</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/5-kriteria-wanita-idaman-di-mata-pria.html">5 Kriteria Wanita Idaman Di Mata Pria</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/ciri-pria-yang-benar-benar-punya-rasa.html">Ciri Pria Yang Benar Benar Punya Rasa Cinta</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/ciri-ciri-wanita-dambaan-pria.html">Ciri Ciri Wanita Dambaan Pria</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/5-cara-ngegebet-cewek-yang-lebih-tua.html">5 Cara Ngegebet Cewek Yang Lebih Tua</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/tips-menjaga-cinta-agar-tetap-awet-dan.html">Tips Menjaga Cinta Agar Tetap Awet Dan Langgeng</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/inilah-alasan-kenapa-banyak-remaja.html">Inilah Alasan Kenapa Banyak Remaja Bercinta Didalam</a></li>

<li><a href="http://catatanjalanhidupku.blogspot.com/2011/12/tips-agar-kegagalan-cinta-tidak.html">Tips Agar Kegagalan Cinta Tidak Terulang Kembali</a></li>

</div>
</div>
</td></tr>
</tbody></table>
</div></div></div></td></tr>
</table></div>

Silahkan anda ganti teks berwarna merah dia atas dengan daftar isi milik anda. Untuk memilih warna beserta kodenya silahkan anda lihat tabel kode warna yang ada disebelah samping halaman ini. 

Dan cara penulisan  link untuk daftar seperti diatas, silahkan anda lihat artikelnya di : http://www.carabuatwebgratis.com/2011/03/penggunakan-atribut-hyperlinks.html

Demikian cara membuat scroll box,

SHARE THIS