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, damai mitra 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 mitra sekalian.
Ketiga, Google akan terasa sangat menyukainya sebab yang memiliki blog tersebut tidak monoton.
Kesimpulan dari kelebihan tersebut hanya untuk menambah style dan rapi pada postingan sobat, dengan trik ini gampang sekali untuk digunakan.
Anda hanya menambahkan css yang telah mimin di lampirkan dibawah ini, untuk selengkapnya sanggup dilihat dibawah ini.
Cara memasang Style Heading H2 pada blog
Langkah Pertama
Tema > Edit HTML >
Langkah Kedua
Salin instruksi 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:'';position:absolute;bottom:-2px;left:0;right:0;background:#019fcc;width:7%;height:2px;} Keterangan :
1. Untuk merubah ukuran abjad dengan mengganti 140%
2. Merubah font heading dengan menggati instruksi #000000
3. Mengubah tampilan garis pada bawah heading dengan mengganti instruksi #019fcc
Langkah Ketiga
Simpan template dan selesai.
Cara Penggunaan H2 Style
Sekarang sahabat sekalian mencoba untuk mempraketkannya dengan cara menambah postingan menyerupai biasanya.
Buatlah kalimat sesuai anda inginkan dan block yang telah di buat kemudian ubah normal ke heading menyerupai gambar dibawah ini :
Seperti pada gambar diatas pada kotak merah merupakan suatu kalimat yang akan di style kan headingnya.
Anda telah menambahkan instruksi pada HTML blog kalian akan otomatis dikala sudah di block dan merubah pada mode normal ke mode heading.
Bila anda sudah mengkuti cara tersebut kemudian pertinjau apakah berhasil atau tidak.
Dalam style mode heading H2 ini hanya sanggup di lihat pada tampilan desktop saja, apakah i smartphone akan bekerja ?
Tidak akan, sebab beda instruksi penyelerasan dengan instruksi desktop.
Apakah ingin tampil juga pada mode smartphone ataupun tablet ?
Bisa, damai saja sahabat sekalian anda perlu menambahkan instruksi lagi dan letakan pada bawah instruksi yang telah di pastekan sebelumnya.
Sekian dan Selamat Mencoba !
1. Untuk merubah ukuran abjad dengan mengganti 140%
2. Merubah font heading dengan menggati instruksi #000000
3. Mengubah tampilan garis pada bawah heading dengan mengganti instruksi #019fcc
Langkah Ketiga
Simpan template dan selesai.
Cara Penggunaan H2 Style
Sekarang sahabat sekalian mencoba untuk mempraketkannya dengan cara menambah postingan menyerupai biasanya.
Buatlah kalimat sesuai anda inginkan dan block yang telah di buat kemudian ubah normal ke heading menyerupai gambar dibawah ini :
Seperti pada gambar diatas pada kotak merah merupakan suatu kalimat yang akan di style kan headingnya.
Anda telah menambahkan instruksi pada HTML blog kalian akan otomatis dikala sudah di block dan merubah pada mode normal ke mode heading.
Bila anda sudah mengkuti cara tersebut kemudian pertinjau apakah berhasil atau tidak.
Dalam style mode heading H2 ini hanya sanggup di lihat pada tampilan desktop saja, apakah i smartphone akan bekerja ?
Tidak akan, sebab beda instruksi penyelerasan dengan instruksi desktop.
Apakah ingin tampil juga pada mode smartphone ataupun tablet ?
Bisa, damai saja sahabat sekalian anda perlu menambahkan instruksi lagi dan letakan pada bawah instruksi yang telah di pastekan sebelumnya.
Kode Script Untuk Device
Berikut instruksi yang akan kompatible style H2 dengan device berukuran kecilpun akan terlihat menyerupai 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:'';position:absolute;bottom:-2px;left:0;right:0;background:#019fcc;width:7%;height:2px;}} Sekian dan Selamat Mencoba !