Cara Membuat HEADING TAG Border Pada Postingan Keren

Cara Membuat Heading Tag Border Pada Postingan

Diposting pada

Cara Membuat HEADING TAG Border Pada Postingan Keren – Heading Tag adalah sebuah TAG atau HTML untuk menentukan besar nya ukuran suatu tulisan, biasanya heading digunakan untuk memperjelas suatu kata seperti judul dokumen dan lain – lain.

Pada Template Blogspot biasanya Tag ini terdiri dari beberapa tingkatan yaitu 1 sampai dengan 6 dengan kode html h1, h2, h3, h4, h5, dan h6. Heading Tag pada blogspot juga biasa digunakan dengan bahasa seperti Heading, Sub heading, Minor Heading, dan seterusnya.

Pada kesempatan kali ini mamang akan membagikan bagaimana cara agar heading pada artikel anda sedikit termodifikasi seperti punya mamang ini dengan lapisan garis di bawah tulisan pada Blog Mang Otep ini, silahkan lihat live demo untuk detail lebih lanjut.

Langsung saja bagi anda yang berminat dengan tutorial ini ikuti langkah – langkah yang akan mamang jelaskan di bawah ini.

HEADING TAG Border Pada Postingan Keren :

1. Masuk ke dasboard blog anda dan pergi ke Edit HTML

2. Cari CSS dengan kata kunci .post-body h3 atau bisa coba dengan kode heading yang lain seperti h2 atau h4.

3. Tambahkan CSS di bawah ini kedalam kode yang ada pada langkah 2.


h2,h3,h4,h5,h6{position:relative;margin:0 0 10px;padding:10px 0;border-bottom:2px solid #e0e0e0}
h1{font-size:200%}h2{font-size:180%}h3{font-size:160%}h4{font-size:140%}h5{font-size:120%}h6{font-size:100%}
h2:before,h3:before,h4:before,h5:before,h6:before{content:'';position:absolute;bottom:-2px;left:0;right:0;background:#d01716;width:12%;height:2px;}

4. Anda juga bisa sisipkan kode di atas tepat di sebelum kode ]]></b:skin> atau </style>

5. Simpan dan Lihat hasilnya.

Perhatikan :

1. #e0e0e0 dan #d01716 (ubahlah warna sesuai selera anda)

2. Width:12% (untuk pengturan lebar warna pertama)

Mungkin demikian saja yang bisa mang otep bagikan kali ini yaitu artikel tentang Cara Membuat HEADING TAG Border Pada Postingan Keren, semoga tutorial kali ini bisa bermanfaat untuk anda.

Jika menyukai artikel dari Blog mang Otep anda bisa klik like, share, and subscribe untuk mendapatkan artikel terbaru dari blog mamang langsung dari email anda. Terimakasih.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *