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 :

CONTOH DAFTAR ISI TUTORIAL BLOG

Cara pasang tombol share Cara mencari kode HTML Cara membuat Blog menjadi Dofollow Cara membuat textarea dengan tombol "select all" Cara membuat effek scroll pada Titel Bar Cara membuat tanggal otomatis update Cara Membuat Pop-up Window Cara Membuat Navigasi Halaman Cara Membuat Subscribe email pada blog Cara membuat efek shadow pada kotak dan gambar Cara Membuat Tabel (Tahap 2) Cara membuat List pada daftar Cara pasang Iklan diatas postingan Cara membuat "Embed ULR, HTML, Link Forum" dibawah artikel Cara membuat artikel berhubungan Cara Menambah widget pengatur Ukuran dan Warna teks pada Blog Cara Menambahkan Efek Teks pada Cursor Mouse Cara buat kotak Pencarian Cara buat Menu navigasi Drop-Down Horisontal Cara Membuat Label Animasi "blogumulus" Cara membuat Tag Cloud Cara Pasang Radio Online Cara Membuat label di blog Cara membuat Slider Cara membuat slideshow Cara Membuat variasi Font pada Teks Cara Buat Kotak atau Teks Area Cara membuat Scroll Box Cara Membuat Tabel (Tahap 1) Cara membuat Link Terbuka di halaman Baru Cara Menambah Gadget diatas Header Cara Buat Sitemap / Peta Situs Cara buat tabel kode warna Cara Membuat Teks Berjalan ( Marquee ) Cara Membuat Refresh Otomatis pada Blog Cara Membuat Rounded Corner Cara membuat Text-Shadow Cara Memasang Background Gambar pada postingan Cara membuat daftar isi otomatis Cara Menambah Widget Jam pada Blog Cara Membuat Read more Cara Menghilangkan Navbar Pada blog Cara Membuat Navbar Auto-Hide Cara Membuat Forum Login Cara Membuat Anti Copy Paste Cara Membuat pesan selamat datang Cara Membuat Animasi Status Loading Cara Membuat Text Area blok Otomatis

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://tutorialbloggermasnoer.blogspot.com/2011/04/cara-pasang-tombol-share.html">Cara pasang tombol share</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/04/cara-mencari-kode-html.html">Cara mencari kode HTML</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/04/cara-membuat-blog-menjadi-dofollow.html">Cara membuat Blog menjadi Dofollow</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/04/cara-membuat-textarea-dengan-tombol.html">Cara membuat textarea dengan tombol "select all"</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/04/cara-membuat-effek-scroll-pada-titel.html">Cara membuat effek scroll pada Titel Bar</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/04/cara-membuat-tanggal-otomatis-update.html">Cara membuat tanggal otomatis update</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/04/cara-membuat-pop-up-window.html">Cara Membuat Pop-up Window</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/04/cara-membuat-navigasi-halaman.html">Cara Membuat Navigasi Halaman</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/02/cara-membuat-subscribe-email-pada-blog.html">Cara Membuat Subscribe email pada blog</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/02/cara-membuat-efek-shadow-pada-kotak-dan.html">Cara membuat efek shadow pada kotak dan gambar</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/02/cara-membuat-tabel-tahap-2.html">Cara Membuat Tabel (Tahap 2)</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/02/cara-membuat-list-pada-daftar.html">Cara membuat List pada daftar</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/02/cara-pasang-iklan-diatas-postingan.html">Cara pasang Iklan diatas postingan</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/02/cara-membuat-ulr-html-link-forum.html">Cara membuat "Embed ULR, HTML, Link Forum" dibawah artikel</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/02/cara-membuat-artikel-berhubungan-atau.html">Cara membuat artikel berhubungan</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/02/menambah-widget-pengatur-ukuran-dan.html">Cara Menambah widget pengatur Ukuran dan Warna teks pada Blog</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/01/cara-menambahkan-efek-teks-pada-cursor.html">Cara Menambahkan Efek Teks pada Cursor Mouse</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/01/cara-buat-kotak-pencarian-untuk-web.html">Cara buat kotak Pencarian</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/01/cara-buat-menu-navigasi-drop-down.html">Cara buat Menu navigasi Drop-Down Horisontal</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/01/membuat-label-animasi.html">Cara Membuat Label Animasi "blogumulus"</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/01/cara-membuat-tag-cloud.html">Cara membuat Tag Cloud</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/01/radio-online.html">Cara Pasang Radio Online</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/01/cara-membuat-label-di-blog.html">Cara Membuat label di blog</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/01/cara-membuat-slider.html">Cara membuat Slider</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/01/cara-membuat-slideshow.html">Cara membuat slideshow</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/01/membuat-variasi-font-pada-teks.html">Cara Membuat variasi Font pada Teks</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/01/cara-buat-kotak-atau-teks-area.html">Cara Buat Kotak atau Teks Area</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/01/cara-membuat-scroll-box.html">Cara membuat Scroll Box</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/01/cara-membuat-tabel-tahap-1.html">Cara Membuat Tabel (Tahap 1)</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/01/cara-membuat-link-terbuka-di-halaman.html">Cara membuat Link Terbuka di halaman Baru</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/01/cara-menambah-gadget-diatas-header.html">Cara Menambah Gadget diatas Header</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2010/12/cara-buat-sitemap-peta-situs.html">Cara Buat Sitemap / Peta Situs</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2010/12/cara-buat-tabel-kode-warna.html">Cara buat tabel kode warna</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2010/12/membuat-teks-berjalan-marquee.html">Cara Membuat Teks Berjalan ( Marquee )</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2010/12/membuat-refresh-otomatis-pada-blog.html">Cara Membuat Refresh Otomatis pada Blog</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2010/11/cara-membuat-rounded-corner.html">Cara Membuat Rounded Corner</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2010/11/cara-membuat-text-shadow.html">Cara membuat Text-Shadow</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2010/11/cara-memasang-background-gambar-pada.html">Cara Memasang Background Gambar pada postingan</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2010/11/cara-membuat-daftar-isi-otomatis.html">Cara membuat daftar isi otomatis</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2010/10/menambah-widget-jam-pada-blog.html">Cara Menambah Widget Jam pada Blog</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/04/cara-membuat-read-more.html">Cara Membuat Read more</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/04/cara-menghilangkan-navbar-pada-blogger.html">Cara Menghilangkan Navbar Pada blog</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/04/cara-membuat-navbar-auto-hide.html">Cara Membuat Navbar Auto-Hide</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/04/cara-membuat-forum-login.html">Cara Membuat Forum Login</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/04/cara-agar-postingan-tidak-dapat-di-copy.html">Cara Membuat Anti Copy Paste</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/04/membuat-pesan-selamat-datang-pada-blog.html">Cara Membuat pesan selamat datang</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/04/cara-membuat-animasi-status-loading.html">Cara Membuat Animasi Status Loading</a></li>
<li><a href="http://tutorialbloggermasnoer.blogspot.com/2011/04/cara-membuat-text-area-blok-otomatis.html">Cara Membuat Text Area blok Otomatis</a></li>
</ul>

</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://tutorialbloggermasnoer.blogspot.com/2011/03/penggunakan-atribut-hyperlinks.html

Demikian cara membuat scroll box,

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.