Iklan Atas Artikel

Cara Memodifikasi Style H2 Menjadi Lebih Keren Pada Blog


CaraMengubah Tampilan Heading H2 Pada Blog Tambah Keren – Mengubah tampilan blog semakin keren tidak ada salahnya kan ?

Oke kali ini mimin akan menshare cara unik untuk menambah keren tampilan blog kalian.

Bagaimana tampilannya ? Apa yang dirubah ? tenang, tenang kawan beta. Kita akan mengubah tampilan heading H2 pada blog.

Awal mula heading blog sebelunya tidak ada variasi melainkan hanya teks saja yang berukuran H2 biasa untuk dilihat.

Sebelum memasangnya apakah tampilan heading ini akan merusak template blog ?

Jawabannya TIDAK, seklai lagi tidak akan merusak tampilan blog anda melainkan malah menjadi rapi untuk dipandang.

Terus keunggulan mengubah atau memasang heading variasi ini apa ?

Pertama, tampilan pada postingan akan terasa rapi dan stylish.

Kedua, Menarik untuk dilihat para pembaca pada blog kawan sekalian.

Ketiga, Google akan terasa sangat menyukainya karena yang mempunyai blog tersebut tidak monoton.

Kesimpulan dari kelebihan tersebut hanya untuk menambah style dan rapi pada postingan sobat, dengan trik ini mudah sekali untuk digunakan.

Anda hanya menambahkan css yang telah mimin di lampirkan dibawah ini, untuk selengkapnya bisa dilihat dibawah ini.

Cara memasang Style Heading H2 pada blog

Langkah Pertama
Tema > Edit HTML >

Langkah Kedua

Salin kode dibawah ini dan letakan diatas atau sebelum </style>

.post-body h2,
.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:1px}
.post-body h2{font-size:140%;font-weight:bold;text-align: left;color: #000000;font:#000000;}
.post-body h2:before,
.post-body h5:before,
.post-body h6:before{content:&#39;&#39;;position:absolute;bottom:-2px;left:0;right:0;background:#019fcc;width:7%;height:2px;}
 
Keterangan :
1. Untuk merubah ukuran huruf dengan mengganti 140%
2. Merubah font heading dengan menggati kode #000000
3. Mengubah tampilan garis pada bawah heading dengan mengganti kode #019fcc

Langkah Ketiga
Simpan template dan selesai.

Cara Penggunaan H2 Style
Sekarang sobat sekalian mencoba untuk mempraketkannya dengan cara menambah postingan seperti biasanya.

Buatlah kalimat sesuai anda inginkan dan block yang telah di buat lalu ubah normal ke heading seperti gambar dibawah ini : 


Seperti pada gambar diatas pada kotak merah merupakan suatu kalimat yang akan di style kan headingnya.

Anda telah menambahkan kode pada HTML blog kalian akan otomatis ketika sudah di block dan merubah pada mode normal ke mode heading.

Bila anda sudah mengkuti cara tersebut lalu pertinjau apakah berhasil atau tidak.

Dalam style mode heading H2 ini hanya dapat di lihat pada tampilan desktop saja, apakah i smartphone akan bekerja ?

Tidak akan, karena beda kode penyelerasan dengan kode desktop.

Apakah ingin tampil juga pada mode smartphone ataupun tablet ?

Bisa, tenang saja sobat sekalian anda perlu menambahkan kode lagi dan letakan pada bawah kode yang telah di pastekan sebelumnya.

Kode Script Untuk Device

Berikut kode yang akan kompatible style H2 dengan device berukuran kecilpun akan terlihat seperti biasanya.

@media screen and (min-width:480px) and (max-width:680px) {
.post-body h2,
.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:1px}
.post-body h2{font-size:120%;font-weight:bold;text-align: left;color: #000000;font:#000000;}
.post-body h2:before,
.post-body h5:before,
.post-body h6:before{content:&#39;&#39;;position:absolute;bottom:-2px;left:0;right:0;background:#019fcc;width:7%;height:2px;}}
 
Nah, begitu cara memodifikasi style H2 dengan mudah dan cepat, untuk ada masalah silahkan anda komentar dibawah ini dengan relevan.

Sekian dan Selamat Mencoba !

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel