Cara mengurangi blank space diantara header dan judul pada template blogger notable

Mendesain, melakukan kustom atau merombak atau re-desain template kadang bukan sekedar tahu bagaimana HTML/XML, CSS, Javascript dan PHP bekerja. Ada hal yang tidak kalah pentingnya: Yakni bagaimana agar suatu tema terlihat lebih cantik. Desain Cita rasa, kerapian tataletak atau layout. Dan Seni juga walau sederhana.

Contohnya ruang kosong atau 'blank Space' di antara gagdet atau widget blogger terlihat pada template Notable, telihat jarak antara judul blog (header) dengan judul artikel terlalu luas sehingga banyak ruang seperti sia sia. Atau jarak antar featured post dan recent posts pada homepage terlalu banyak ruang kosongnya.

Pada gambar di atas kami menggunakan teknik CSS yang telah ada yakni dengan cara mengurangi nilai pada perintahnya.


Caranya:
Masuk ke pengaturan/dasbor blogger
Pilih tema
Pilih Edit HTML
Di dalam halaman editor HTML Blogger cari kode berikut:
body.item-view .Blog .post-title-container{
background-color:$(item.title.background.color);
box-sizing:border-box;
margin-bottom:-1px;
padding-bottom:66px;
padding-$endSide:290px;
padding-$startSide:140px;
padding-top:125px;
width:100%
}Pada pengaturan bawaan di atas padding bottom mungkin 66px;, 67px;, atau lebih besar, dan padding top 125px;
Atau kalian bisa mencoba melakukan overwite kode tersebut dengan memasukan kode berikut dan menambahkannya ke dalam kotak 'Add CSS' melalui cara:
(Jika kalian masih belum familiar dengan pengaturan dasbor blogger terbaru tinggal kembalikan ke pengaturan lama)
Masuk ke pengaturan/dasbor blogger
Pilih tema
Pilih sesuaikan
Masuk ke pengaturan blogger >
Pilih tema > Pilih sesusaikan >
Setelah muncul menu (Tema, Latar belakang, Lanjutan, Gagdet) pilih 'Lanjutan' >
Setelah itu muncul menu dropdown, scroll hingga keatas, pilih yang paling bawah yakni 'Tambahkan CSS'
Pada kotak dialog atau blanko kosong CSS, masukan kode berikut di bawah ini:



Saya mengganti padding bottom menjadi 6px sedangkan padding top menjadi 75px; jadi masukan kode berikut ke dalam kotak CSS diatas:

body.item-view .Blog .post-title-container{
background-color:$(item.title.background.color);
box-sizing:border-box;
margin-bottom:-1px;
padding-bottom:6px;
padding-$endSide:290px;
padding-$startSide:140px;
padding-top:75px;
width:100%
}
Save template.


Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!