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 beberapa script widget yang akan dipasang di scroll box, yaitu:
  • <a href="http://www2.clustrmaps.com/counter/maps.php?url=http://klikmunadi.blogspot.com" id="clustrMapsLink"><img src="http://www2.clustrmaps.com/counter/index2.php?url=http://klikmunadi.blogspot.com" style="border:0px;" alt="Locations of visitors to this page" title="Locations of visitors to this page" id="clustrMapsImg" onerror="this.onerror=null; this.src='http://clustrmaps.com/images/clustrmaps-back-soon.jpg'; document.getElementById('clustrMapsLink').href='http://clustrmaps.com';" /></a>
  • <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://www2.clustrmaps.com/counter/maps.php?url=http://klikmunadi.blogspot.com" id="clustrMapsLink"><img src="http://www2.clustrmaps.com/counter/index2.php?url=http://klikmunadi.blogspot.com" style="border:0px;" alt="Locations of visitors to this page" title="Locations of visitors to this page" id="clustrMapsImg" onerror="this.onerror=null; this.src='http://clustrmaps.com/images/clustrmaps-back-soon.jpg'; document.getElementById('clustrMapsLink').href='http://clustrmaps.com';" /></a><br />
<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.




Locations of visitors to this page
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

sumber : http://klikmunadi.blogspot.com

Related Posts:

  • Cara Membuat Judul Blog Rata TengahSetelah jalan-jalan dari satu blog ke blog yang lain akhirnya nemu juga nih cara membuat judul blog rata tengah. Mungkin banyak bermacam cara yang bisa di lakukan, tinggal bagaimana kalian mengutak-atik template blog kamu.Per… Read More
  • Cara Menampilkan Judul Saja Di Halaman PostingDengan hanya menampilkan judul posting saja dalam setiap kali kita klik label, hal ini mempermudah bagi setiap pembaca untuk melihat-lihat posting kita yang lain tentunya. Coba bayangkan andai satu label memiliki banyak po… Read More
  • Pasang shoutmix tersembunyi di blogspot hai.... pengunjung setiaku. hari ini aku posting lagi ni. mungkin article ini udah lama sobat temukan. malahan udah di coba juga barang kali. tapi saya nggak mungkin melewatkan apa yang saya coba atau saya baca untuk me… Read More
  • Cara Meningkatkan Link In Alexa Cara ini saya baca ketika berkunjung di blog sahabat, kemudian saya lihat widget alexa yang terpampang di sidebar blognya. Woowww…. backlinknya banyak sekali. Sudah lama sebenarnya saya menemukan posting seper… Read More
  • Cara Membuat Teks Area Copy SemuaIni mengenai teks area lagi. Mungkin pada saat kita posting scrypt ada yang terlalu panjang, kita ingin menempatkannya ke dalam kotak kecil, dan saat kita klik tombol copy otomatis semua scrypt yang sudah kita buat dapat k… Read More