Cara Menggabungkan Widget Dalam Satu Scroll Pada Blog

Satu lagi trik sederhana agar tampilan widget dalam satu tempat kelihatan rapi. Dengan trik ini kalian bisa mengatur tatanan widget blog kalian agar tidak kelihatan amburadul. Sebagai contohnya teman-teman bisa menengok sidebar blog ini. Pada bagian tersebut saya menggunakan jasa penambahan elemen HTML/Java Script, sering terjadi ketika kita ingin menyimpan banyak widget ke dalam satu tempat dan alhasil tampilannya malah jadi amburadul, ya kelihatan nggak rapi. Namun, bagi teman-teman yang ingin tampilan widget2nya tersebut kelihatan rapi, nggak perlu bingung - karena kita akan membahas cara agar tampilannya nggak amburadul lagi.

Langkah awal yang perlu anda lakukan tentunya menyediakan terlebih dahulu kode-kode widget yang ingin disimpan dalam satu tempat => Selanjutnya masuklah ke "tambah gadget"/add gadget dan pilihlah HTML/Java Script.

Yang perlu anda lakukan agar tampilan semua widget anda rapi yaitu dengan cara mengakhiri setiap kode widget anda dengan kode <br > dan simpanlah kode widget lain dibawahnya lalu jangan lupa diakhiri dengan kode <br > lagi (jika masih ada widget lain yang ingin ditambahkan). Jika anda ingin menambah widget lain, silahkan disimpan tepat di bagian bawah widget tadi...dan seterusnya~

Sebagai contoh, agar lebih jelas - berikut formatnya:

KODE WIDGET PERTAMA DI SINI<br >
LALU KODE WIDGET KE DUA DI SINI<br >
LALU KODE WIDGET KE TIGA DI SINI<br >
LALU INI KODE WIDGET TERAKHIR (nggak perlu diakhiri <br > - jika masih ada kode widget lain yang ingin ditambahkan di bagian bawah, silahkan tambah kode<br > di bagian akhir kode widget tersebut)

Jika, teman-teman ingin agar tampilan widget-widgetnya rapi - khususunya pada bagian footer/bawah blog, maka jadikan saja rataan semua widget menjadi "tengah" alias "center". Untuk caranya gampang-gampang aja, apit saja semua widget yang anda punya dengan kode <center> dan berikutlah formatnya:

<center>DI SINI KODE WIDGET2 ANDA</center>

Setelah selesai padal angkah tersebut widget kalian sudah berada pada satu tempat, namun masih belum ditambahkan scroll. Bagi kalian yang ingin menampilkannya secara langsung, kalian tidak perlu mengikuti langkah2 selanjutnya, tinggal kalian save widget tersebut. Tapi jika kalian ingin tampilannya dengan menggunakan scroll seperti punyaku, silakan mengikuti langkah selanjutnya.

tambahkan kode berikut di paling atas pada widget tadi.

<h3 class='title'>Blog Info</h3>
<div class='widget-content'>
<div style="overflow:auto;width:275px;height:120px;padding:10px;border:1px solid #eee">

NB: width, heigh, padding, dan border bisa kalian ubah2 sesuai keinginan.

Selesai, jika kalian mengikuti langkah2 tersebut maka tampilannya pasti akan seperti punyaku.

Share

Like

G+

Tweet

Tweet