Header Ads

Cara Membuat Scroll Box di Sidebar

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.




14 comments:

  1. makasih infonya . . . seomga sukse selalu

    ReplyDelete
  2. Terima kasih Gan.. atas kunjungannya..

    ReplyDelete
  3. masih bingung gan.... kira2 agan bisa kasi post cara buat scroll box kyk ini >>> (http://i264.photobucket.com/albums/ii184/aandfx/centerpng.png) ASK :1. posisi auto di tengah smua. 2. lebarnya kok bisa sama dgn sidebarnya? mohon bantuanya gan... terima kasih
    salam kenal n sukses slalu

    ReplyDelete
  4. Coba cek yang ini Gan, semoga dapat membantu.

    http://klikmunadi.blogspot.com/2011/04/cara-membuat-posisi-widget-rata-tengah.html

    ReplyDelete
  5. Hatur nuhun Bozz info nya . . . Izin praktek di Blog Ane :)

    http://anakbrb.co.cc
    http://www.virtapay.com/r/ndunks

    ReplyDelete
  6. klau nggeser garis yg d atasnya spaya dempet ama tulisanya gmn bro..?

    ReplyDelete
  7. makasaih mas atas infonya

    ReplyDelete
  8. OK, siip...
    Makasih Gan...
    btw, mampir juga ke blog ane ya....

    ReplyDelete
  9. trimakasih kang, info yang sangat bermanfaat, dicoba dulu gan...

    ReplyDelete
  10. Terimakasih om,,,,

    Sekarang Sitemeter di sidebar blog saya yang cukup panjang sudah ada scrollnya... SALAM BLOGGER INDONESIA aja yaa ^_^

    ReplyDelete
  11. thankx infonya sob, blog saya jadi terlihat rapih berkat tutorial sobat..bisa di cek hasilnya di : http://aplikasi-lengkap-s60v3.blogspot.com/

    ReplyDelete
  12. sangat menbantu sob infonya.. thanks ..

    ReplyDelete

Comment Policies:

1. NO SPAM
2. NO LIVE LINK

Any violation will be deleted within 24 hours, thanks for your attention.

Template images by Ollustrator. Powered by Blogger.