Senin, 24 September 2012

Mengatur Jarak pada blog

Mengatur Jarak Antar Halaman Posting
Jarak antar Halaman Posting blog yang terlalu jauh kadang membuat tampilan blog tidak menarik kalau jarak antar halaman blog bisa diperpendek bisa memperhemat halaman blog dibawah ini contoh jarak antar halaman posting di blog.

Cara mengatur jarak antara halaman blog cukup mudah.berikut langkah-langkah untuk mengatur jarak antar halaman posting blog.
1. Sign in di blog
2. Pilih Rancangan -> Edit/HTML
3. Cari Kode seperti dibawah ini
<Variable name="date.space" description="Date Space" type="length" default="30px"  value="65px"/>
   <Variable name="date.position" description="Date Float" type="string" default="static"  value="absolute"/>
Ganti text yang berwarna merah.setelah di ganti terakhir save template.

Mengatur Jarak Widget Side Bar Blog Secara Default
Pengaturan jarak widget yang dimaksud di sini adalah pengaturan posisi widget yang berada di sidebar (samping) halaman posting blog.
langkah-langkah sebagai berikut:
1. Sign in di blog
2. Klick Rancangan
3. Klick Edit HTML
4. Klick Download template lengkap yang berada bagian kanan atas template blog anda
untuk mengantisipasi kesalahan yang tidak diinginkan
5. Cari kode .main-inner .widget {  kodenya terlihat seperti di bawah ini
.main-inner .widget {
  background-color: $(widget.background.color);
  border: 1px solid $(widget.border.color);
  padding: 0 $(widget.padding.side) 15px;
  margin: 20px -16px;
  Silahkan ganti margin: 20px sesuai dengan jarak widget yang diinginkan 
6. Klick simpan template untuk menyimpan perubahan
7. Klick Lihat Blog yang muncul di bagian atas kanan template blog anda untuk melihat perubahan tampilan blog

Mengatur Jarak Spasi Judul Posting blog pada label
langkah-langkah sebagai berikut:
2. Klick Rancangan
3. Klick Edit HTML
5. Download Template Lengkap bila diperlukan
6. Cari kode di bawah ini.
date-outer {
  position: relative;
  margin: $(date.space) 0 
10px;
  padding: 0 
7
px;

Catatan:
Ganti angka berwarna merah sesuai dengan jarak yang diinginkan
7. Cari lagi kode berikut ini
post-outer {
  padding-bottom: 10px;
}
8. Ganti angka 10 kode kedua sesuai dengan angka 10 yang dirubah pada kode pertama
9. Klick Simpan template untuk menyimpan perubahan
10. Klick lihat blog untuk melihat hasilnya.

Mengatur Jarak Antara Postingan
Kadang jarak antara postingan  yang terlalu berjauhan membuat blog kita kelihatan tidak rapi.Contohnya seperti ini.
 
langkah-langkah sebagai berikut:
1. Login ke blogger lalu masuk ke tab Design > Edit HTML
2. Cari kode seperti ini.Tekan ctrl+F untuk lebih memudahkan dalam melakukan pencarian.
.post-body { atau .post-body{
3. Kemudian di bawah kode tersebut,terdapat kode margin-bottom:
4. Ubah kode yang berwarna merah sesuai keinginan anda.Semakin kecil nilainya,semakin dekat jaraknya
margin-bottom: 45px;
Jika sudah,simpan dan lihat hasilnya. 

Cara Mengatur Jarak Antar Post 
langkah-langkah sebagai berikut:
1.Log in ke Blogger
2.Pilih Template
3.Kemudian Klik Edit HTML
4.Centang Tulisan Expand Template Widget
5.Cari kode dibawah ini  untuk memudahkan pencarian tekan Ctrl+F
.post-body{background : #ffffff none repeat scroll 0 0;margin:0px;padding:0px 10px 0px 0px;font-family:font-family:Arial,Helvetica,Sans-serif;font-size:14px;line-height:24px;}

6.kalau tidak ketemu kode diatas cari kode yang semirip mungkin,
patokannya kode .post-body{
7.ganti line-height:24px menjadi line-height:1.3em

Catatan: 1.3em bisa anda ganti dengan ukuran berapa saja yang anda mau
contoh: line-height 1.4em atau line-height 1.5em

sumber
berbagai sumber

12 komentar:

  1. Makasih gan infonya... lumayan buat nambah ilmu hehe...

    BalasHapus
  2. makasih gan, mantap sangat berguna

    BalasHapus
  3. berhasil... sekarang beranda milik saya terlihat lebih rapi... makasi panduannya...

    BalasHapus
  4. bagaima solusi jarak antar hurufnya merenggang terlalu jauh gan?

    BalasHapus
    Balasan
    1. knjgi ni aja mngkn ini mksdx http://yathisamawa.blogspot.com/2012/09/mengatur-jarak-spasi-antar-baris-blog.html

      Hapus
  5. terima kasih banyak infonya

    BalasHapus
  6. infonya sangat menarik,,,
    dan bermanfaat,,

    BalasHapus
  7. Lama tidak Berjumpa Brother. B-)
    Sepertinya Brother tidak mengenal saya lagi ya.. hehehe..
    Salam dari Google Adsense


    GoogleAdsenseIndonesia.com

    .

    BalasHapus