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. Sudahlah kita langsung saja..... heheheh oiya jangan lupa komen ya

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. Sudahlah kita langsung saja..... heheheh oiya jangan lupa komen ya</div></div></td></tr> </table></div>

TUTORIAL BLOG

Cara Ampuh Menurunka Berat Badan Alexa Cara Membuat Artikel Terkait Related Cara Membuat Efek Reload/Refresh Di Blog Cara Menampilkan Widget Hanya Di Halaman Berikutnya Membuat Rocking And Rolling Menu Di Blog Cara Membuat Berbagai Macam Tombol Spoiler Cara Membuat Scroll Box Membuat Text Area Dengan Highlight Cara Mengganti Templates Blog Cara Membackup Templates Blog Links Download templates Blog Cara Membuat Label Animasi Membuat Google Translate Bendera (Flag Icon) Cara Pasang Kotak Komentar Facebook Cara Memberikan Efek Yang Menonjol Pada Postingan Cara Membuat Efek Page Peel Di Blog Cara Pasang Iklan Di Blog Cara Membuat Efek Page Peel Di Blog Membuat Efek Hujan Salju Pada Blog Membuat Efek Spoiler Pada Blog Membuat Efek Gulungan Pada Pojok Blog Membuat Efek Spotlite Dengan Jquery Cara Merubah Penampilan Blog Dan Kode Warna Membuat Daftar Isi Melayang Memasang Google Talk Di Blog Cara Membuat Text Area Blog Muter-Muter Ketika Di Buka Cara Mendaftar ShoutMix Cara Menyembunyikan ShoutMix/Buku Tamu Membuat Sound Efect Pada Blog Cara Membuat Info JQuery Cara Mendapatkan URL Gambar Membuat Kata Sambutan Saat Blog Dibuka Objek Berpusing Keliling Mous Cara Buat Bubble Cursor Jadikan Cursor Anda Berkilauan (sparkle) Tukar Cursor Blog Anda Following Star Pada Cursor Membuat Scroll Pada Widget Fibox Shoutbox Yang Cool Untuk Blogger Alternatif Shoutbox Gratis Untuk Ganti Shoutmix Mister Linky Letak Icon Pada URL Blog Tutorial Letak Facebook Badge Masa Blog Dibuka Menghilangkan Navbar Pada Blog Letak Icon URL Pada Blog Efek Neon Text Pelangi Sistem Rating Pada Blog Cara Membuat Shoutbox Melayang Dengan Light Efect Cara Membuat Buku Tamu Show/Hide Dari Atas Memasang Linkkwithin Pada Blog

Berikut adalah kode untuk membuatnya :

<div align="center">
<table width="250" border="1">
<tr> <th colspan="100%" scope="col"bgcolor="#CC6600">TUTORIAL BLOG</th> </tr><tr><td>
<div style="font-family: arial; font-size: 12px; overflow: scroll; background: #FFFFFF; border-color: #CC6600; width: 250px; height: 400px;"><div style="text-align:left; width: 100%; padding: 0 px; overflow: hidden; color: #FFFFFF; background: #000000;">
<ul>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/cara-ampuh-menurunkan-berat-badan-alexa.html">Cara Ampuh Menurunka Berat Badan Alexa</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/cara-membuat-artikel-terkaitrelated.html">Cara Membuat Artikel Terkait Related</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/cara-membuat-efek-reload-atau-refres-di.html">Cara Membuat Efek Reload/Refresh Di Blog</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/cara-menampilkan-widget-di-halaman.html">Cara Menampilkan Widget Hanya Di Halaman Berikutnya</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/membuat-rocking-and-rolling-menu-di.html">Membuat Rocking And Rolling Menu Di Blog</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/cara-membuat-berbagai-macam-tombol.html">Cara Membuat Berbagai Macam Tombol Spoiler</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/cara-membuat-scroll-box.html">Cara Membuat Scroll Box</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/membuat-text-area.html">Membuat Text Area Dengan Highlight</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/cara-mengganti-templates-blog.html">Cara Mengganti Templates Blog</a><a href="http://cuap-cuapz.blogspot.com/2011/12/cara-membuat-shoutbox-melayang-dengan.html"></a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/cara-membackup-templates-blog.html">Cara Membackup Templates Blog</a><a href="http://cuap-cuapz.blogspot.com/2011/12/cara-membuat-buku-tamu-showhide-dari.html"></a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/links-download-templates-blog.html">Links Download templates Blog</a> </li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2011/12/cara-membuat-label-animasi.html">Cara Membuat Label Animasi</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2011/12/membuat-google-translate-bendera-flag.html">Membuat Google Translate Bendera (Flag Icon)</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2011/12/cara-pasang-kotak-komentar-facebook-di.html">Cara Pasang Kotak Komentar Facebook</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2011/12/cara-memberikan-efek-yang-menonjol-pada.html">Cara Memberikan Efek Yang Menonjol Pada Postingan</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2011/12/cara-membuat-efek-page-peel-di-blog.html">Cara Membuat Efek Page Peel Di Blog</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2011/12/cara-pasang-iklan-di-blog.html">Cara Pasang Iklan Di Blog</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2011/12/cara-membuat-efek-page-peel-di-blog.html">Cara Membuat Efek Page Peel Di Blog</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2011/12/membuat-efek-hujan-salju-pada-blog.html">Membuat Efek Hujan Salju Pada Blog</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2011/12/membuat-efek-spoiler-pada-blog.html">Membuat Efek Spoiler Pada Blog</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2011/12/membuat-efek-gulungan-pada-pojok-blog.html">Membuat Efek Gulungan Pada Pojok Blog</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2011/12/membuat-efek-spotlite-dengan-jquery.html">Membuat Efek Spotlite Dengan Jquery</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2011/12/cara-merubah-penampilan-blog-dan-kode.html">Cara Merubah Penampilan Blog Dan Kode Warna</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2011/12/membuat-daftar-isi-melayang.html">Membuat Daftar Isi Melayang</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2011/12/cara-memasang-google-talk-di-blog.html">Memasang Google Talk Di Blog</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2011/12/cara-membuat-text-area.html">Cara Membuat Text Area</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2011/12/blog-muter-muter-ketika-di-buka.html">Blog Muter-Muter Ketika Di Buka</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/cara-mendaftar-shoutmix.html">Cara Mendaftar ShoutMix</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/cara-menyembunyikan-shoutmixbuku-tamu.html">Cara Menyembunyikan  ShoutMix/Buku Tamu</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/membuat-sound-efect-pada-blog.html">Membuat Sound Efect Pada Blog</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/membuat-info-jquery.html">Cara Membuat Info JQuery</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/cara-mendapatkan-url-gambar.html">Cara Mendapatkan URL Gambar</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/membuat-kata-sambutan-saat-blog-dibuka.html">Membuat Kata Sambutan Saat Blog Dibuka</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/click-here-objek-berpusing-keliling.html">Objek Berpusing Keliling Mous</a> </li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/click-here-cara-buat-bubble-cursor-pada.html">Cara Buat Bubble Cursor</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/click-here-jadikan-cursor-anda.html">Jadikan Cursor Anda Berkilauan (sparkle)</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/click-here-tukar-cursor-untuk-blog-anda.html">Tukar Cursor Blog Anda</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/click-here-following-star-pada-cursor.html">Following Star Pada Cursor</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/membuat-scroll-pada-widget.html">Membuat Scroll Pada Widget</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/click-here-fibox-shoutbox-yang-cool.html">Fibox Shoutbox Yang Cool Untuk Blogger</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/click-here-shoutmix-akan-menamatkan.html">Alternatif Shoutbox Gratis Untuk Ganti Shoutmix</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/mister-linky.html">Mister Linky</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/letak-icon-pada-url-blog.html">Letak Icon Pada URL Blog</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/tutorial-letak-facebook-like-badge-masa.html">Tutorial Letak Facebook Badge Masa Blog Dibuka</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/click-here-tuesday-november-29-2011.html">Menghilangkan Navbar Pada Blog</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/letak-icon-pada-url-blog.html">Letak Icon URL Pada Blog</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/efek-text-neon-pelangi.html">Efek Neon Text Pelangi</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2012/01/sistem-rating-pada-blog.html">Sistem Rating Pada Blog</a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2011/12/cara-membuat-shoutbox-melayang-dengan.html">Cara Membuat Shoutbox Melayang Dengan Light Efect</a><a href="http://cuap-cuapz.blogspot.com/2012/01/links-download-templates-blog.html"></a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2011/12/cara-membuat-buku-tamu-showhide-dari.html">Cara Membuat Buku Tamu Show/Hide Dari Atas</a><a href="http://cuap-cuapz.blogspot.com/2012/01/cara-mengganti-templates-blog.html"></a></li></div>
<div style="color: orange;">
<li><a href="http://cuap-cuapz.blogspot.com/2011/12/memasang-linkwithin-pada-blog.html">Memasang Linkkwithin Pada Blog</a></li></div>
</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 Disini

Posted in: Tutorial Blog