Pada Tutorial blog kali ini saya akan kasih tips Cara Membuat Daftar Isi Tutorial Blog dengan Scroll Box. Scroll Box banyak digunakan di web atau blog. Scroll Box sangat berguna sekali untuk menghemat tempat, terutama bila halaman web atau blog anda sudah penuh dan sementara masih banyak artikel atau apa saja yang ingin tetap anda tampilkan pada satu halaman. Scroll Box selain bisa digunakan untuk tempat artikel, banyak juga yang menggunakan Scroll Box sebagai tempat Daftar Isi Tutorial Blog.
Cara Membuat Daftar Isi Tutorial Blog cukup 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 yang di maksud diatas, COPY dan PASTEkan pada HTML/JavaScript
<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.
Anda juga bisa memberi warna sesuka anda, seperti scroll box dibawah ini berikut kodenya :
CONTOH JADI DAFTAR ISI TUTORIAL BLOG
ACAI NASA PELANGSING
JAMUR TIRAM
BATRA BANTUL
TEH GURAH PLUS
PENYEMBUHAN KEPUTIHAN I
HERBASTAMIN I
CRYSTAL X ASLI NASA
GURAH TETES
GURAH ASLI
GMP NUTRI - SUSU ETAWA
RENEW SLIM AND CLEAN
BATIK ASLI GIRILOYO
GURAH VAGINA I
GURAH VAGINA II
PENYEMBUHAN KEPUTIHAN II
PENEMU KAPSUL UNTUK GURAH
OBAT KANKER SERVIKS
HERBASTAMIN II
GRECE - ANTI BAU BADAN
DISTRIBUTOR CRYSTAL X I
DISTRIBUTOR CRYSTAL X II
OBAT KEPUTIHAN
PENYEMBUHAN KEPUTIHAN II
BATIK TULIS ONLINE
DISTRIBUTOR HERBASTAMIN
OBAT KUAT LELAKI
JAMU KUAT LELAKI
NATURAL NUSANTARA
TEMPAT GURAH YOGYA
GURAH TETES HIDUNG
BATRA BANTUL
ASLI CRYSTAL X
TEH GURAH ASLI
SAYANG SUAMI
RAHASIA WANITA SHOLEHAH
RAHASIA WANITA MASA KINI
KAPSUL GURAH
MANFAAT GURAH
PJ LOKA GURAH
AHLI GURAH
GURAH LENDIR
PRODUK HERBAL
GURAH IMOGIRI YOGYAKARTA
KESAKSIAN PEMAKAI CRYSTAL X
CRYSTAL X FOR WOMEN
CRYSTAL X
Cara ORDER CRYSTAL X
Cara JADI RESELLER CRYSTAL X
Berikut Kode untuk scroll box diatas :
<div align="center">
<table width="235" border="1">
<tr> <th colspan="100%" scope="col"bgcolor="#F2F2F2">DAFTAR ISI TUTORIAL BLOG</th> </tr><tr><td>
<div style="font-family: arial; font-size: 12px; overflow: scroll; background: #FFFFFF; border-color: #CCCCCC; width: 235px; height: 250px;"><div style="text-align:left; width: 100%; padding: 0 px; overflow: hidden; color: #FFFFFF; background: #EFEFFB;">
<ul>
<li><a href="http://acaipelangsing.wordpress.com/">ACAI NASA PELANGSING</a></li>
<li><a href="http://jamurtirambantul.wordpress.com/">JAMUR TIRAM</a></li>
<li><a href="http://batrabantul.wordpress.com/">BATRA BANTUL</a></li>
<li><a href="http://minumanteh.wordpress.com/">TEH GURAH PLUS</a></li>
<li><a href="http://penyembuhankeputihanwanita.wordpress.com/">PENYEMBUHAN KEPUTIHAN I</a></li>
<li><a href="http://herbastamina.wordpress.com/">HERBASTAMIN I</a></li>
<li><a href="http://gurahcrystalx.wordpress.com/">CRYSTAL X ASLI NASA</a></li>
<li><a href="http://gurahtetes.wordpress.com/">GURAH TETES</a></li>
<li><a href="http://annorgurah1.wordpress.com/">GURAH ASLI</a></li>
<li><a href="http://gmpnutri.weebly.com/">GMP NUTRI - SUSU ETAWA</a></li>
<li><a href="http://renewslimandclean.weebly.com/">RENEW SLIM AND CLEAN</a></li>
<li><a href="http://batik-produkmutu.blogspot.com/">BATIK ASLI GIRILOYO</a></li>
<li><a href="http://gurahvaginacrystalx.weebly.com/">GURAH VAGINA I</a></li>
<li><a href="http://gurahvagina.weebly.com/">GURAH VAGINA II</a></li>
<li><a href="http://penyembuhankeputihan.weebly.com/index.html">PENYEMBUHAN KEPUTIHAN II</a></li>
<li><a href="http://gurah1.weebly.com/">PENEMU KAPSUL UNTUK GURAH</a></li>
<li><a href="http://gurahpesonawanita.weebly.com/">OBAT KANKER SERVIKS</a></li>
<li><a href="http://herbastamin.weebly.com/">HERBASTAMIN II</a></li>
<li><a href="http://grece.weebly.com/">GRECE - ANTI BAU BADAN</a></li>
<li><a href="http://distibutorcrystalx.weebly.com/">DISTRIBUTOR CRYSTAL X I</a></li>
<li><a href="http://distributorresmicrystalx.weebly.com/">DISTRIBUTOR CRYSTAL X II</a></li>
<li><a href="http://obatkeputihan.weebly.com/">OBAT KEPUTIHAN</a></li>
<li><a href="http://pkeputihan.blogspot.com/">PENYEMBUHAN KEPUTIHAN II</a></li>
<li><a href="http://batikgrl.blogspot.com/">BATIK TULIS ONLINE</a></li>
<li><a href="http://herba-stamin.blogspot.com/">DISTRIBUTOR HERBASTAMIN</a></li>
<li><a href="http://pria-prima.blogspot.com/">OBAT KUAT LELAKI</a></li>
<li><a href="http://jamuherbastamin.blogspot.com/">JAMU KUAT LELAKI</a></li>
<li><a href="http://admin-naturalnusantara.blogspot.com/">NATURAL NUSANTARA</a></li>
<li><a href="http://tempatgurah.blogspot.com/">TEMPAT GURAH YOGYA</a></li>
<li><a href="http://gurahteteshidung.blogspot.com/">GURAH TETES HIDUNG</a></li>
<li><a href="http://battrabantul.blogspot.com/">BATRA BANTUL</a></li>
<li><a href="http://aslicrystalx.blogspot.com/">ASLI CRYSTAL X</a></li>
<li><a href="http://tehgurahdjawadi.blogspot.com/">TEH GURAH ASLI</a></li>
<li><a href="http://sayangisuami.blogspot.com/">SAYANG SUAMI</a></li>
<li><a href="http://rahasiawanitasholekhah.blogspot.com/">RAHASIA WANITA SHOLEHAH</a></li>
<li><a href="http://crystalxampuh.blogspot.com/">RAHASIA WANITA MASA KINI</a></li>
<li><a href="http://kapsulgurah-gurahlendir.blogspot.com/">KAPSUL GURAH</a></li>
<li><a href="http://manfaatgurah.blogspot.com/">MANFAAT GURAH</a></li>
<li><a href="http://lokagurahdjawadi.blogspot.com/">PJ LOKA GURAH</a></li>
<li><a href="http://spesialisahligurah.blogspot.com/">AHLI GURAH</a></li>
<li><a href="http://gurahlendir.blogspot.com/">GURAH LENDIR</a></li>
<li><a href="http://produkampuh.blogspot.com/">PRODUK HERBAL</a></li>
<li><a href="http://gurahjawadi.blogspot.com/">GURAH IMOGIRI YOGYAKARTA</a></li>
<li><a href="http://produkmutu.com/Kesaksian.htm">KESAKSIAN PEMAKAI CRYSTAL X</a></li>
<li><a href="http://cristalxforwomen.blogspot.com/">CRYSTAL X FOR WOMEN</a></li>
<li><a href="http://produkmutu.com/">CRYSTAL X</a></li>
<li><a href="http://produkmutu.com/Order.htm">Cara ORDER CRYSTAL X</a></li>
<li><a href="http://produkmutu.com/Reseller.htm">Cara JADI RESELLER CRYSTAL X</a></li>
</ul>
</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.
Demikian cara membuat Daftar Isi Tutorial Scroll Box, Hasil dari karya anda di atas akan seperti ini :
