March 28, 2013


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...

Posted by : Kraeng Francisco | Tuturial Blog | Tips and Trik Komputer | Tips and Trik Internet | SEO

Artikel Mengatur Jarak Widget Sidebar Blog diposting oleh Kraeng Francisco pada March 28, 2013. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kotak komentar.. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, dan atau mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini atau letekkan link dibawah ini sebagai sumbernya. Terima Kasih. Salam...


Artikel Terkait

14 comments:

  1. selamat 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...

    ReplyDelete
  2. sip..tipsnya semakin mantabs nich sobat, saya coba praktekkan dech :-)

    ReplyDelete
  3. saya sudah mencobanya tapi tidak berhasil sob,,,kira kira kenapa yaa ????

    ReplyDelete
    Replies
    1. Sobat cari kode seperti dibawah ini pada template sobat :

      .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

      Delete
  4. betul juga mas, blog juga keliahatan lebih rapi karena rapat

    ReplyDelete
  5. master Blog.....banyak sekali tutorial blog yg keren. salut deh mas.

    ReplyDelete
    Replies
    1. Sebenarnya saya tidak layak dikatakan master, karena kita masih sama2 belajar hehe.. Terima kasih dan salam.

      Delete
  6. Met pagi mas...saya hadir sekalian meminta mav..baru bisa hadir di blog mas KF...hehe :)
    -----------
    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 :)

    ReplyDelete
    Replies
    1. Oh, ia mas tidak menjadi soal mas hehehe.

      Kode CSS diatas dapat digunakan pada kustom template mas.....

      Delete
  7. Tutorialnya banyak Mas, terimakasih sharenya, sukses selalu

    ReplyDelete
  8. sippp sobat,makasih tutor nya,jika tampialan rapih kan enak dilihatnya,,,

    ReplyDelete
  9. Terima kasih atas informasinya...
    Sangat bermanfaat.

    ReplyDelete
  10. mantap tutornya sob,ijin nyontek,thx

    ReplyDelete