Header Ads

Cara Membuat Posisi Widget Rata Tengah di Scroll Box

Cara Membuat Posisi Widget Rata Tengah di Scroll Box

Memasang widget/gadget di sidebar merupakan hal yang biasa dilakukan para blogger. Selain dapat mempercantik tampilan blog, widget tersebut juga bermanfaat baik bagi pengunjung maupun pemilik blog itu sendiri. Widget-widget itu berisikan informasi-informasi mengenai blog tersebut sesuai dengan kegunaannya masing-masing.

Bila widget-widget yang dipasang di sidebar cukup banyak dapat membuat sesak ruangan di sidebar. Salah satu solusi untuk menghemat tempat di sidebar adalah dengan memasang widget-widget tesebut ke dalam scroll box. Lalu, bagaimana caranya agar posisi widget-widget tersebut di scroll box menjadi rata tengah sehingga terlihat rapi dan sedap dipandang mata?

Nah, berikut ini akan dijelaskan cara membuat posisi widget menjadi rata tengah di scroll box. Seperti dibahas pada posting terdahulu bahwa untuk membuat scroll box di sidebar, diperlukan script seperti di bawah ini.

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

ISI/ELEMEN KOTAK

</div>

Agar posisi widget menjadi rata tengah, maka script-nya akan terlihat seperti di bawah ini.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">
<center>
<script widget 1><br />
<script widget 2><br />
<script widget 3><br />
<script widget 4><br />
<script widget 5><br />
</center>
</div>

  • Ganti script widget dengan script widget yang akan dipasang.
  • 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.
Contoh:
Misalnya, saya mempunyai script widget yang akan dipasang di scroll box, yaitu:
  • <a href="http://s06.flagcounter.com/more/1xTU"><img src="http://s06.flagcounter.com/count/1xTU/bg=FFFFFF/txt=000000/border=CCCCCC/columns=2/maxflags=248/viewers=0/labels=1/" alt="free counters" border="0"></a>
Sekarang kita akan masukkan script-script di atas ke script untuk membuat scroll box, maka script-nya menjadi seperti di bawah ini.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">
<center>
<a href="http://s06.flagcounter.com/more/1xTU"><img src="http://s06.flagcounter.com/count/1xTU/bg=FFFFFF/txt=000000/border=CCCCCC/columns=2/maxflags=248/viewers=0/labels=1/" alt="free counters" border="0"></a><br />
</center>
</div>

Bila diletakkan di sidebar, maka hasilnya akan tampak seperti di bawah ini.


free counters

Untuk memasang scroll box di sidebar, berikut ini langkah-langkahnya:
  • Masuk ke akun Blogger
  • Klik Rancangan > Elemen Laman > Tambah Gadget.
  • Kemudian pilih HTML/JavaScript.
  • Berikan judul dan isi kolom Konten dengan script scroll box.
  • Klik tombol SIMPAN.
  • Atur posisi widget ke tempat yang diinginkan.
  • Klik tombol SIMPAN.

30 comments:

  1. betuuul gaan ...yang ibi,,, terima kasih gan ..... langsung ijin sedot gan.... mantebh

    ReplyDelete
  2. Sama-sama Gan.. Semoga bermanfaat..

    ReplyDelete
  3. qo ga bisa untuk Feedjit Live dan flag counter dibuat menjadi satu scroll.

    ReplyDelete
  4. Untuk Feedjit Live saya berhasil memasangnya, baik di halaman posting maupun di sidebar blog ini seperti yang terlihat pada screenshot di atas.

    ReplyDelete
  5. thx sama tutorialnya.

    http://wilayahindonesia.blogdetik.com/

    ReplyDelete
  6. Ilmu yang bermamfaat gan !!!

    Link sudah terpasang di blog saya !! sihlakan cek kembali,jangan lupa pasang link saya ya ^_^

    ReplyDelete
  7. Terima kasih yah dan link juga udah terpasang..

    ReplyDelete
  8. thanks banget gan. udah bisa di blog ane.
    silahkan mampir ya.
    lamhotsiahaan.blogspot.com

    ReplyDelete
  9. Sama-sama gan.. bagus klo mang uda bisa mah.. :)
    segera ke TKP gan..

    ReplyDelete
  10. makasih gan ilmunya,...
    akhirnya gua bisa juga nih,...
    klw bikin tombol like Fb,,.. gimana yah ??
    we udah coba tapi hasilnya gak bener mulu malah adanya Facebook Platform tulisan kaya gitu bukan langsunk kaya punya agan tuh ...
    plis bagi triknya yah,...

    ReplyDelete
  11. @Jelly gamat Kalo yang ane pasang itu dari addthis.com gan atau kalo mw pake dari FB langsung bisa coba diliat di http://klikmunadi.blogspot.com/2011/07/cara-memasang-tombol-like-facebook-di.html

    ReplyDelete
  12. Kalo widget gambar gimana caranya biar bisa ketengah? Kan disitu gak bisa masukin kodenya? Mohon pencerahannya ya gan..

    ReplyDelete
  13. @Lucifer AngeL Kalau yang dimaksud gambar di postingan, saat di edit post, silakan klik gambar tersebut dan pilih center pada option yg ada.

    ReplyDelete
  14. nice info gan, bermanfaat bgt :)

    ReplyDelete
  15. Makasih sob tntorialnya sangat bermanfaat, saya tes langsung berhasil. salam kenal
    http://spicaku.blogspot.com/

    ReplyDelete
  16. mantap gan, tengkyu...

    ReplyDelete
  17. yeah, berhasil.. thanx gan.. salam kenal..

    ReplyDelete
  18. @ARIEFREZQUA iya, sama-sama Gan, salam kenal kembali..

    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.