Skip to main content

Cara Membuat Garis Di Bawah Judul Postingan Blog

Cara Menggaris Bawahi Judul Postingan – Membuat garis di bawah judul postingan di awal pengeditan template rasanya sangat sulit dan dipenuhi rasa takut, namun sebenarnya kita tidak perlu takut untuk bereksperimen, karena dimulai dari disanalah ide-ide kreatif kita muncul.

Awalnya saya membuat garis di bawah judul postingan blog karena template yang saya gunakan tidak ada baris di bawah judul postingan, akhirnya saya ingin mencoba mengedit htmlnya, namun sebelumnya saya berharap untuk membackup template terlebih dahulu untuk mengantisipasi pada saat editing template akan malah rusak dan sulit diperbaiki.

Jika template Anda tidak memiliki garis di bawah judul postingan, berikut tips cara membuat garis di bawah judul postingan baik di wordpress atau blogger dengan mudah:

Cara Membuat Garis Di Bawah Judul Postingan Blog

1. Login ke akun blogger Anda.

2. Klik Tema (sebelum Mengedit template, harap membackup template terlebih dahulu agar apabila kita melakukan kesalahan, kita dapat mengembalikan template tersebut) > Klik Edit HTML.

3. Cari kode /* Post (tekan Ctrl+F untuk memudahkan kita mencari kodenya).

/* Posts
———————————————– */
h3.post-title {
margin: 0;
font: $(post.title.font);
}

Pilih salah satu kode garis bawah judul postingan di bawah ini:

  1. border-bottom:1px solid black;
  2. border-bottom:1px dotted silver;
  3. border-bottom : 4px double #cadaef;

Keterangan kode diatas:

  1. solid adalah garis yang tidak putus-putus
  2. dotted adalah garis yang putus-putus
  3. double adalah dua garis

Jika diterapkan maka akan menjadi seperti di bawah ini:

/* Posts
———————————————– */
h3.post-title {
margin: 0;
font: $(post.title.font);
border-bottom : 4px double #cadaef ;
}

Atau seperti di template ini:

/* Posts
———————————————–
*/
.date-header{margin:1.5em 0 .5em;display:none;}
.post{margin:0;position:relative}
.post h1,.post h2{border-bottom : 4px double #cadaef ; margin:0;padding:0;font-weight:normal;line-height:1.4em}
.post h1 a,.post h1 a:visited,.post h1 strong,.post h2 a,.post h2 a:visited,.post h2 strong{display:block;text-decoration:none;font-weight:normal}
.post-body{margin:0 0 .75em;line-height:1.6em;font-size:12px}

Keterangan:

border-bottom : 4px double #cadaef ; Kode garis dibawah judul postingan double.

4. Simpan dan lihat hasilnya.

Ingatlah bahwa setiap template berbeda, namun yang paling penting adalah tetap menggunakan /* Posts dan ini dapat digunakan untuk pengenalan pengeditan HTML.

Sampai disini artikel tentang cara membuat garis di bawah judul postingan, semoga bermanfaat. Jangan takut untuk mengedit HTML, yang penting backup template terlebih dahulu.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar