Membuat Garis Di Bawah Sibheading Pada Blog AMP

Larepct cara memodifikasi subheading dengan menambahkan garis berwarna di bawahnya pada postingan blog yang sudah valid AMP, subheading adalah kata-kata pokok bisa juga disebut sebuah keywords turunan

Selain membuat tampilan postingan menjadi lebih menarik, garis berwarna dibawah subheading juga akan membuat pembaca mudah mencerna kalimat yang penting karena diberi tanda baca yang berbeda. Selain itu subheading juga salah satu bagian dari SEO maka akan menjadikan artikel lebih bersaing di pencarian google

Di artikel ini saya akan menuliskan cara membuat garis berwarna di bawah keywords turunan tersebut, pada blog yang menggunakan template valid amp seperti yang kalian baca saat ini silahkan lihat kata-kata di bawah ini

Contoh garis subheading di blog AMP


Tampilanya kurang lebih akan seperti contoh diatas, ukuran dan warna dapat di ubah sesuai selera pemilik blog dan berikut cara membuatnya

Pertama → login blogger
Pilih menu tema
Edit HTML
Copy paste kode dibawah ini kemudian letakkan di antara kode CSS postingan yang ada di template AMP kalian

/* Garis Bawah Subheading */
.post-body h3,
.post-body h5,
.post-body h6{position:relative;margin:0 0 10px;padding:10px 0;border-bottom:2px solid #e0e0e0;font-weight:500;letter-spacing:0}
.post-body h3{font-size:140%;}
.post-body h5{font-size:100%;}
.post-body h6{font-size:80%;}
.post-body h3:before,
.post-body h5:before,
.post-body h6:before{content:'';position:absolute;bottom:-2px;left:0;right:0;background:#138be6;width:7%;height:2px;}

Langkah selanjutnya kemudian simpan dan sudah selesai, untuk mengatur tampilanya perhatikan penjelasan di bawah ini

solid #e0e0e0            : merupakan garis yang memanjang ubah kode warna sesuai selera kalian
font-size:140%           : ini adalah letak dimana Anda dapat merubah ukuran kata-kata subheading
background:#138be6 : sedangkan apabila Anda ingin merubah warna yang berada di garis sebelah kiri ubah kode background tersebut

Cara membuat atau menampilkanya di dalam postingan sangatlah sederhana dan simple cukup slas kata-kata yang mau dijadikan keywords turunan, kemudian pilih menu subheading yang ada diatas papan tulis artikel, supaya lebih jelas perhatikan gambar di bawah ini


Baca disini : Cara membuat garis dibawah subheading pada blog NON AMP

Itulah cara sederhana yang mempunyai manfaat menurut saya luarbiasa, apabila kalian masih kesulitan untuk penerapanya silahkan di tanyakan di kolom komentar, saya bantu untuk penempantanya sekaligus pembuatanya apabila masih belum begitu mengerti

Mudah-mudhan artikel ini bisa bermanfaat, terimakasih salam blogger.
Next Post Previous Post