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...
kraktif skali sob,
ReplyDeleteselamat pagi sobat Kraeng Francisco....hmmm sepertinya saya harus menerapkan tips ini sob jadi kita tidak perlu lagi menggunakan Scroll kalau kita menggunakan tips ini yaa sob...? tampilan blog kelihatan lebih rapi yaa sob kalau menggunakan cara di atas...
ReplyDeletesip..tipsnya semakin mantabs nich sobat, saya coba praktekkan dech :-)
ReplyDeletesaya sudah mencobanya tapi tidak berhasil sob,,,kira kira kenapa yaa ????
ReplyDeleteSobat cari kode seperti dibawah ini pada template sobat :
Delete.sidebar .widget {
margin:0 0 15px 0; <<<<<
padding:10px;color:#FFF;font-size:13px;border:1px solid #3C3F3C;
}
Rubah yang diberi huruf bercetak tebal 15px....Semoga membantu
betul juga mas, blog juga keliahatan lebih rapi karena rapat
ReplyDeletemaster Blog.....banyak sekali tutorial blog yg keren. salut deh mas.
ReplyDeleteSebenarnya saya tidak layak dikatakan master, karena kita masih sama2 belajar hehe.. Terima kasih dan salam.
DeleteMet pagi mas...saya hadir sekalian meminta mav..baru bisa hadir di blog mas KF...hehe :)
ReplyDelete-----------
Oh ya mas...kode yang di cari utk di tambahkan css nya...suport atau ada pada di setiap template atau cuma bawaan blogspot aja mas :)
Trims ya mas KF..buat tutorialnya :)
Oh, ia mas tidak menjadi soal mas hehehe.
DeleteKode CSS diatas dapat digunakan pada kustom template mas.....
Tutorialnya banyak Mas, terimakasih sharenya, sukses selalu
ReplyDeletesippp sobat,makasih tutor nya,jika tampialan rapih kan enak dilihatnya,,,
ReplyDeleteTerima kasih atas informasinya...
ReplyDeleteSangat bermanfaat.
mantap tutornya sob,ijin nyontek,thx
ReplyDelete