Cara Membuat Scroll Box di Sidebar

Scroll Box merupakan sebuah elemen berbentuk kotak yang mempunyai penggulung baik di sisi sebelah kanan maupun di sebelah bawah. Scroll Box ini digunakan untuk menghemat ruangan atau tempat dalam sebuah blog. Selain itu, kotak ini juga dapat mempercantik tampilan blog sehingga terlihat rapi di mata pengunjung. Kotak ini dapat diisi dengan link-link, gambar-gambar, tulisan-tulisan dan lain sebagainya.

Adapun cara membuat scroll box ini adalah dengan menggunakan script di bawah ini.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">

ISI/ELEMEN KOTAK

</div>

Keterangan:

• Ganti tulisan ISI/ELEMEN KOTAK dengan script yang Anda inginkan.
• overflow:auto; menunjukkan agar terbentuk penggulung jika isi kotak telah melebihi batas tinggi atau lebar kotak yang telah ditentukan.
• width:100%px; menunjukkan lebar dari kotak yang diinginkan. Ganti sesuai dengan kebutuhan Anda, misalnya 200px atau 300px. Agar lebih mudah menyesuaikan dengan lebar sidebar tentukan saja nilainya dengan 100%px.
• height:200px; menunjukkan tinggi kotak, dapat diubah sesuai keinginan Anda.
• padding:10px; menunjukkan jarak agar tulisan yang ada dalam kotak tidak menabrak dinding atau garis tepi kotak.
• border:1px solid #999999; menunjukkan agar terlihat ada kotaknya. border:1px menunjukkan ketebalan garis tepi kotak. #999999 adalah kode warna untuk warna garis tepi kotak.

Contoh:

Misalnya kita ingin memasang Jadwal Sholat di atas di dalam scroll box dengan lebar kotak sebesar 200 px dan tinggi kotak sebesar 200px. Script untuk Jadwal Sholat yaitu <iframe src="http://www.islamicfinder.org/prayer_service.php?country=indonesia&city=jakarta&state=&zipcode=&latitude=-6.1744&longitude=106.8294&timezone=7&HanfiShafi=1&pmethod=1&fajrTwilight1=10&fajrTwilight2=10&ishaTwilight=10&ishaInterval=30&dhuhrInterval=1&maghribInterval=1&dayLight=0&page_background=&table_background=&table_lines=&text_color=&link_color=&prayerFajr=&prayerSunrise=&prayerDhuhr=&prayerAsr=&prayerMaghrib=&prayerIsha=&lang=&frameWidth=400&tableForm=horizontal" frameborder=0 width=400 height=150 marginwidth=0 marginheight=0 scrolling="no"> </iframe>, maka script untuk scroll box-nya menjadi sebagai berikut:

<div style="overflow:auto; width:200px; height:200px; padding:10px; border:1px solid #999999;">

<iframe src="http://www.islamicfinder.org/prayer_service.php?country=indonesia&city=jakarta&state=&zipcode=&latitude=-6.1744&longitude=106.8294&timezone=7&HanfiShafi=1&pmethod=1&fajrTwilight1=10&fajrTwilight2=10&ishaTwilight=10&ishaInterval=30&dhuhrInterval=1&maghribInterval=1&dayLight=0&page_background=&table_background=&table_lines=&text_color=&link_color=&prayerFajr=&prayerSunrise=&prayerDhuhr=&prayerAsr=&prayerMaghrib=&prayerIsha=&lang=&frameWidth=400&tableForm=horizontal" frameborder=0 width=400 height=150 marginwidth=0 marginheight=0 scrolling="no"> </iframe>

</div>

Berikut cara pemasangannya di sidebar:

• Masuk ke akun Blogger Anda.
• Klik Rancangan.
• Pilih Elemen Laman.
• Klik Tambah Gadget.
• Pilih HTML/JavaScript.
• Isikan Judulnya.
• Copy dan paste script scroll box di atas di Konten.
• Klik tombol SIMPAN.
• Pindahkan elemen ke tempat yang Anda inginkan.
• Klik tombol SIMPAN.

Hasilnya akan tampak seperti di bawah ini.