Cara Mengecilkan Kotak Ruang Kosong pada Judul Postingan Blog Jenis Notable Template

Saya sangat suka dengan blog jenis Notable template dari blogger.com ini. Bahkan sampai sekarang saya telah menggunakannya, karena beberapa alasan, antara lain aksesnya lebih ringan dan template ini cukup responsive sehingga iklan (ads) mudah tayang di blog jenis ini. Dalam arti, iklan dengan setingan otomatis lebih mudah menempati posisi di halaman blog saya. Dan yang paling utama, mengapa saya suka template ini karena sejak saya merubah jenis tema Notable ini, blog saya jadi cepat dimonetisasi oleh Google Adsense.

Tapi walaupun saya suka, ada satu hal yang saya kurang suka pada template Notable ini, yaitu di bagian judul postingan (artikel) selalu terdapat ruangan kosong berbentuk kotak yang terlalu besar yang tidak ada gunanya, sehingga jarak antara judul dan isi postingan (isi artikel) terlalu jauh. Hal inilah yang membuat tampilan terlihat aneh dan seperti kurang professional, sehingga membuat saya merasa kurang percaya diri punya blog seperti itu.

Tampilan Awal: 

Saya coba utak-utik di bagian template pun tidak ada hasil, disana hanya bisa mengubah warna, ubah background blog, ukuran fonts, dll. dan ada kolom CSS yang kurang saya pahami. Karena pengetahuan saya tentang kode HTML dan Javascript sangat terbatas, sayapun tidak berani coba-coba edit-edit kode HTML di template tersebut.

Kemudian, saya coba browsing di google mencari tahu dan mengobok-obok informasi disana, siapa tahu ada kawan di luar sana yang membahas tentang template Notable blogger tersebut, tapi saya tidak menemukannya.

Beberapa hari kemudian, saya kembali coba mengobok-obok google search melanjutkan pencarian yang saya maksud. Tapi kali ini saya coba pencarian di google search dengan memakai kalimat berbahasa Inggris (dibantu dengan google translate tentunya 😊 hehe). Disana saya buka satu-persatu situs yang saya temukan di pencarian google. Dan akhirnya saya menemukan sebuah blog dengan berbahasa Inggris yang alhamdulillahnya persis membahas pemecahan masalah yang saya butuhkan, yaitu bagaimana membuat tampilan kotak ruang judul yang terlalu besar bisa dikecilkan seoptimal mungkin seperti yang saya sebutkan di awal postingan ini.

Setelah saya baca-baca, ternyata ini rahasianya cukup sederhana:

Kita hanya diminta memasukkan kode javascript html di bawah ini ke dalam CSS:   

body.item-view .Blog .post-title-container{
padding-bottom:10px;
padding-top:10px;
width:100%
}

Atau, jika tanpa menggunakan CSS seperti yang saya uraikan diatas, kamu cukup mencari baris kode: body.item-view. Blog. post-title-container{ (cara mencarinya, tekan tombol Ctrl+F pada bidang template HTML blog-mu).

Setelah ketemu, perhatikan di bawah kode tersebut ada beberapa baris kode yang mengikutinya, seperti tampak pada script di bawah ini: 

body.item-view .Blog .post-title-container{

background-color:$(item.title.background.color);

box-sizing:border-box;

margin-bottom:-1px;

padding-bottom:86px;

padding-$endSide:290px;

padding-$startSide:140px;

padding-top:124px;

width:100%

}

Kemudian silahkan ubah angka pada padding-bottom:86px menjadi 10px (lihat text yang saya beri warna merah), dan pada padding-top:124px menjadi 10px (angkanya bisa kamu sesuaikan sesuai selera).

Tampilan setelah perubahan :

Dan setelah melihat hasil tersebut diatas saya merasa sangat puas.

SEMOGA BERMANFAAT!