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:
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;
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;}
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 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
Poin
1:
Login
ke blogger.com --->Template ---> Edit Html.
Poin
Poin
2:
Dengan Ctrl+F cari kode css .main-inner . Bila ada kode tersebut teruskanlah ke poin 3.
Poin
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:
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}
.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:
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:-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
