Wednesday, March 27, 2013

Mengatur Jarak Widget Sidebar Blog


Jarak antara widget sidebar blog yang jauh akan membuat tampilan begitu memanjang kebawah dan kurang enak dipandang, sehingga untuk mengatur jarak widget di sidebar blog perlu ditambahkan kode CSS agar dapat menghemat ruang dan atau spasi dari tampilan pada halaman blog sesuai yang diharapkan.

Jadi bagi pengguna template standar blogger cara tersebut mungkin yang anda cari selama ini dan tidak menemukan tutorial yang tepat anda bisa mengikuti uraian setelah ini. Berbeda dengan pengguna kustom template jarak antara widget sudah diatur sedemikian rupa, namun apabila pengguna kustom template jarak widget yang dihasilkan belum sesuai keinginan bisa menggunakan tekhnik yang akan disampaikan pada uraian dibawah.

Sangat terlihat dengan jelas dari gambar diatas apabila jarak terlalu jauh maka penempatan setiap widget yang ada di sidebar blog dilihat kurang begitu terkesan menarik. Bahwasannya kenapa pengguna blog lebih memilih kustom template, itu karena template oleh pihak ketiga lebih terkesan professional dan saya mengakuinya.

Namun pada template standar yang kita gunakan, sebenarnya dapat pula dilakukan sedemikian rupa, oleh karena itu sampai sekarang saya sendiri masih menggunakan template standar yang disediakan oleh blogger, karena cara inipun dapat kita sesuaikan. Walaupun memang sangat sulit dalam mengutak atik template standar yang saya ketahui, tetapi tidak menjadi suatu persoalan apabila kita ingin mencoba untuk tau.

Lalu bagaimana mengatur jarak widget sidebar blog? silahkan saudara ikuti uraian dibawah ini dan kerjakan secara berurutan :

1. Login terlebih dulu atau pastikan sudah login sebelumnya.
2. Pada halaman dashboard pilih menu Template.
3. Back-up template untuk menjaga kemungkinan terjadi eror, caranya :

• Klik Cadangkan / pulihkan yang berada sebelah kanan layar monitor dari posisi anda.
• Kemudian klik Unduh template lengkap.
• Untuk menyimpannya klik OK dan Tutup kembali jendela window Template > Cadangkan / pulihkan.

4. Untuk membuka editor template klik Edit HTML.
5. Centang kotak Expand Template Widget.
6. Cari kode ]]></b:skin>, kemudian letakkan kode CSS berikut tepat diatas kode ]]></b:skin>. Gunakan Ctrl F  untuk mencari kode ]]></b:skin>.

.main-inner .widget {
margin: 15px 0px;
}

Keterangan :
• Rubah 15px dengan jarak yang diharapkan.
• Misalnya menjadi 10px, 5px dan seterusnya.

7. Klik Pritinjau, untuk melihat hasilnya.
8. Apabila jarak yang dihasilkan sudah cocok, klik Simpan Template.
9. Selesai dan setelah anda menerapkannya, karena disini saya menggunakan jarak 5px, jadi hasilnya akan terlihat seperti yang berada tepat disamping sidebar halaman blog ini.

Dengan demikian cukup sampai disini dulu dan semoga artikel ini bermanfaat bagi anda.

Salam...

No comments:

Post a Comment