TRIK Mengatur Jarak Header Blog Dengan Posting Dan Sidebar

Cara Mengatur Jarak Header Blog Dengan Posting Dan Sidebar

Cara Mengatur Jarak Header Blog Dengan Posting Dan Sidebar untuk template standar blogger dapat dilakukan dengan mudah yaitu hanya mengatur kode css bagian main inner, posting dan sidebar.

Main inner perlu juga diatur sebab letak area posting dan sidebar sebenarnya ada di dalam main inner. Main inner dalam template asli standar blogger (terkait artikel ini) adalah bidang kosong antara header dengan posting dan sidebar.

Cara Mengatur Jarak Header Blog Dengan Posting Dan Sidebar yang perlu dilakukan hanyalah mengatur tata letak kolom posting dan kolom sidebar, tanpa merubah tata letak judul widget sidebar (h2) dan judul posting (h3). Sebab kalau merubah tata letak h2 maka bukan hanya h2 yang berada di sidebar saja yang berubah tapi semua h2 akan berubah, baik yang di sidebar, area posting serta h2 yang ada di footer. Demikian juga degan h3 nya, maka di homepage semua judul posting akan berubah.

Cara Mengatur Jarak Header Blog Dengan Posting Dan Sidebar dapat dilakukan dengan langkah - langkah sebagai berikut:
Poin 1:

Login ke blogger.com --->Template ---> Edit Html.

Poin 2:

Dengan Ctrl+F cari kode css .main-inner . Bila ada kode tersebut teruskanlah ke poin 3.

Poin 3:

Cari kode ]]></b:skin> dan letakkanlah kode berikut tepat di atasnya:

.main-inner {padding-top:0px}

.main-inner .column-center-inner {margin-top:10px}

.main-inner .column-right-inner {margin-top:10px}

Keterangan:

Buat main-inner dengan padding-top sebesar 0px bila ingin tidak ada jarak antara header dengan sidebar dan posting.

.main-inner .column-center-inner adalah untuk mengatur jarak posting dengan header.

.main-inner .column-right-inner adalah untuk mengatur jarak sidebar dengan header.

Silahkan atur besarnya nilai padding dan margin sesuai dengan yang diinginkan. Terkait padding dan margin lebih detai silahkan baca Pengertian Atau Arti Padding Border Dan Margin Pada Blog.

Poin 4:

Simpan Template. Dan lihat hasilnya.

Catatan:

Bila menginginkan tampilan blog tanpa tanggal / date header (Tanggal di atas judul posting), pada langkah poin 3 tambahkanlah kode css:

h2.date-header {display:none} sehingga menjadi:

.main-inner {padding-top:0px}

.main-inner .column-center-inner {margin-top:-10px}

.main-inner .column-right-inner {margin-top:10px}

h2.date-header {display:none;}

.main-inner .column-center-inner margin top nya sengaja bernilai minus yaitu -10px, hal tersebut untuk menyejajarkan posisi judul posting dan judul widget sidebar. Silahkan atur sesuai keinginan.

Cara Mengatur Jarak Header Blog Dengan Posting Dan Sidebar ilustrasinya dapat dilihat di:

Gambar Jarak Header Blog Dengan Posting Dan Sidebar Sebelum Diatur

Gambar Jarak Header Blog Dengan Posting Dan Sidebar Setelah Main-inner padding 0px

Gambar Jarak Header Blog Dengan Posting Dan Sidebar Dengan Date Header / Tanggal

Gambar Jarak Header Blog Dengan Posting Dan Sidebar Tanpa Date Header / Tanggal

Selamat mencoba, semoga sukses.