Tutorial Mengatur Jarak Antar Postingan Di 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:

1. Sign in di blog

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 7px;

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. 

Mengatur Jarak antar pos

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

1. Membuat separator line (garis pemisah) antara sidebar dengan postingan :

Untuk garis pemisah sebelah kiri, temukan kode berikut pada Edit HTML :

 .fauxcolumn-left-outer .fauxcolumn-inner {
  border-right: 3px dotted #C2D6D6;

Untuk garis pemisah sebelah kanan, temukan kode berikut pada Edit HTML :

.fauxcolumn-right-outer .fauxcolumn-inner {
  border-left: 3px dotted #C2D6D6;

Keterangan : 

3px            : tebalnya garis pemisah

dotted        : jenis pemisah bentuk bundaran ("solid" untuk garis lurus, "dashed" untuk garis putus-putus)

#C2D6D6 : warna garis pemisah

2. Mengatur letak separator line (garis pemisah) antara sidebar dengan postingan :

Untuk garis pemisah di sebelah kiri, temukan kode berikut pada Edit HTML :

 .main-inner .fauxcolumn-left-outer {
        width: 270px;

Untuk garis pemisah di sebelah kanan, temukan kode berikut pada Edit HTML :

.main-inner .fauxcolumn-right-outer {
        width: 270px;

Keterangan : 

270px : untuk mengatur letak garis pemisah

Mengatur jarak posting dari sidebar :

Temukan kode berikut pada Edit HTML :

 .post {
  margin: 0 0 $(post.margin.bottom) 0;
  padding-left: 40px;

Keterangan :

40px : untuk mengatur jarak posting

padding-left : hanya mengatur jarak sisi kiri

padding-right : hanya mengatur jarak sisi kanan

padding : mengatur jarak sisi kanan juga kiri 

Dari berbagai Sumber Artikel :)