Mengubah Tampilan Sidebar Blog untuk menambah keindahan tampilan blog

Mengubah Tampilan Sidebar Blog 

Sidebar blog itu tempatnya berada di samping posting (kiri atau kanan blog). Jika sobat menginginkan sidebar blog bawaan blogger terlihat menarik. Silahkan lihat cara dibawah ini.

Mengubah Tampilan Sidebar Blog: 

1. Login ke blogger --> Template --> Edit HTML

2. Cari kode .sidebar h2 {.  Jika tidak ada, cari kode h2 { 

3. Jika blog sobat terdapat kode h2 {. Maka tampilannya seperti dibawah ini:

/* Headings
h2 {     font: $ (widget. title. font) ;
     text-transform: $ (widget. title. text. transform) ;
     color: $ (widget. title. color) ;
     margin: .5em 0;  

4. Ganti kode berwarna merah dengan di bawah ini:

.sidebar h2 {font-size:110%;

font-weight:bold;

text-transform:uppercase;

text-align:right;

border: 1px solid #000;

background:#ffffff;

padding;10px;}

Note:

• 110%: Nilai huruf judul sidebar. Bisa sobat ganti menjadi nilai satuan Persen, atau Pixel, yang persen bisa menjadi 100%, 150%, 200% dan angka lainnya. Jika yang pixel menjadi 10 px, 15 px, 20 px dan angka lainnya.
• Bold: Berarti tulisan di judul sidebar tebal. Jika ingin tulisannya biasa saja, ubah menjadi normal. Jika ingin tulisannya miring, ubah menjadi italic.
• Uppercase: Berarti huruf judul sidebar besar semua, jika ingin huruf depannya saja (Inisial) ubah menjadi capitalize. Jika ingin huruf kecil semua, ubah menjadi lowercase.
• Right: Berarti posisi tulisannya di kanan. Jika ingin tulisannya di kiri, ubah menjadi left. Jika ingin tulisannya di tengah, ubah menjadi center.
• 1px solid #000: Berarti ada garis mengelilingi judul sidebar. Judul sidebar disini berukuran 1 px dengan warna hitam. Bisa sobat ubah sesuai keinginan sobat.
• ffffff: Berarti warna background putih. Jika ingin warna lain, bisa sobat ubah sesuai keinginan sobat dengan melihat di: Kode Warna Html.
• 10px: Berarti ukuran padding sebesar 10 px. Perlu anda tambahkan apabila sobat menggunakan warna background (Jika sobat tidak memakai background, akan terlihat kurang menarik). Fungsi dari padding agar tidak terlihat bertabrakan dengan bagian luar.
  Note: Ukuran padding blog saya menjadi: 10px 13px 8px 30px
  
  Peringatan: Cara ini berguna untuk template bawaan blogger
  
  http://ridhotawaka.blogspot.com/ http://ridhotawaka.blogspot.com/#ixzz5cIyj1rUN
  Under Creative Commons License: Attribution

Cara Mengatur Jarak Header Blog Dengan Posting Dan Sidebar untuk template standar blogger

Cara mengatur jarak header blog 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.

Main Inner Bagian Atas (Bidang Kosong)

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-langkahsebagaiberikut:

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 topnya sengaja bernilai minus yaitu -10px, hal tersebut untuk menyejajarkan posisi judul posting dan judul widget sidebar. Silahkan atur sesuai keinginan.

Referensi : http://menggantitemplates.blogspot.com/2014/04/mengatur-jarak-header-blog-dengan-posting-dan-sidebar.html