RISWAN NET
  • Home
  • Content Placement
  • Tekno
    Perbedaan JPG dan JPEG pada Format Gambar

    Ini Dia Perbedaan JPG dan JPEG pada Format Gambar

    Keuntungan Serta Resiko dari Keyboard Protector

    Keuntungan Serta Resiko dari Keyboard Protector

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Jenis Jenis Komputer Serta Pembahasannya

    Jenis-Jenis Komputer Serta Penjelasannya

    Bagaimana Cara Membuat Shortcut URL Website di Desktop

    Cara Membuat Shortcut URL Website di Desktop

    Cara Transfer FIle Dari Komputer ke RDP

    Cara Transfer atau Copy File dari Komputer ke RDP

    Trending Tags

    • Asus X555
    • Komputer
    • CES 2017
    • Xiaomi
  • Internet
  • Komputer
  • Bisnisnew
No Result
View All Result
  • Home
  • Content Placement
  • Tekno
    Perbedaan JPG dan JPEG pada Format Gambar

    Ini Dia Perbedaan JPG dan JPEG pada Format Gambar

    Keuntungan Serta Resiko dari Keyboard Protector

    Keuntungan Serta Resiko dari Keyboard Protector

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Jenis Jenis Komputer Serta Pembahasannya

    Jenis-Jenis Komputer Serta Penjelasannya

    Bagaimana Cara Membuat Shortcut URL Website di Desktop

    Cara Membuat Shortcut URL Website di Desktop

    Cara Transfer FIle Dari Komputer ke RDP

    Cara Transfer atau Copy File dari Komputer ke RDP

    Trending Tags

    • Asus X555
    • Komputer
    • CES 2017
    • Xiaomi
  • Internet
  • Komputer
  • Bisnisnew
No Result
View All Result
RISWAN NET
No Result
View All Result
Home Blogger

Cara Modifikasi Style Heading H2 pada Postingan

Deni Riswana by Deni Riswana
19 Agustus 2017
in Blogger
10 1
0
11
SHARES
548
VIEWS
ShareTweetSend

Cara Modifikasi Style Heading H2 pada Postingan – Helo sobat, pada kesempatan kali ini saya akan berbagi tutorial cara Modifikasi Tampilan Heading H2 pada Postingan, supaya heading pada postingan dan static page terlihat lebih rapih dan elegan.

Cara Modifikasi Style Heading H2 pada Postingan

Dengan cara ini, akan mengubah tampilan Heading dan menambahkan garis elegan di bawahnya, yang mulanya Heading hanya berukuran lebih besar dari font artikel dan menggunakan tag b atau bold. Kode CSS  ini saya dapatkan dari inspect elment blog Arlina Design, karena Arlina sendiri yang pertama menggunakan style ini pada blognya.

Daftar Isi

  • 1 Keuntungan Modifikasi Heading H2
  • 2 Cara Modifikasi Style Heading H2

Keuntungan Modifikasi Heading H2

Keuntungan apa yang dapat kita peroleh setelah memodif Heading H2? Banyak keuntungan yang bisa kita dapatkan salah satunya yaitu lebih memudahkan pengunjung memahami isi artikel pada blog. Pengunjung jadi lebih mudah untuk memahami isi artikel yang ada, karena ada pembeda antara tampilan heading dan isi konten.

Cara Modifikasi Style Heading H2 pada Postingan
Selain itu, dengan cara ini, tampilan postingan akan terlihat lebih rapih dan dan terstruktur. Berikut contoh Heading H2 yang dimodifikasi dengan style tertentu.

Lalu bagaimana cara modifikasi Heading H2? Sobat hanya perlu menambahkan kode css di template editor dan tinggal membuat tulisan dengan fungsi heading di postingan atau static page. Untuk cara lengkapnya perhatikan tutorial berikut:

Cara Modifikasi Style Heading H2

Langkah Pertama
Buka Blogger >> Tema >> Edit HTML

Langkah Kedua
Salin kode di bawah ini, kemudian letakan tepat di atas </style> atau ]]></:skin>

.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;}

Untuk mengganti ukuran heading silahkan ubah angka 140%
Untuk mengubah warna font heading silahkan ubah kode #000000
Untuk mengubah warna garis bawah silahkan ubah kode #019fcc

Langkah Ketiga
Simpan template, selesai

Sekarang silahkan sobat buat postingan baru dengan membuat heading di dalamnya, kemudian coba pratinjau postingan tersebut untuk melihat hasilnya. Apabila belum berubah, sobat bisa hapus style H2 sebelunya, yang tertera di template sobat.

Supaya style tersebut bekerja di device yang berukuran kecil, seperti hp atau tablet, sobat tinggal menambahkan kode di atas di media query tertentu, dan mengubah beberapa style sampai sesuai. Contoh saya meletakan kode di atas pada media query 640px dan 480px, maka tampilannya akan seperti berikut.

@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 itulah Tutorial Cara Modifikasi Style Heading H2 pada Postingan, selamat mencoba dan terima kasih. Jangan lupa berkomentar…

-6.9163257107.7192104
Deni Riswana

Deni Riswana

Pengembang Digital dan Content Creator. Saat ini sedang menempuh pendidikan strata satu di Universitas Pendidikan Indonesia (UPI) dengan program studi Bisnis Digital.

Related Posts

Cara Membuat Jump Link di Blog
Blogger

Cara Membuat Jump Link di Blog dengan HTML

24 Januari 2020
Cara Submit URL di Google Webmaster Yang Baru
Blogger

Cara Submit URL di Google Webmaster Yang Baru

2 April 2019
Cara mengetahui jumlah postingan blogger
Blogger

Cara Mengetahui Jumlah Postingan Blog Punya Orang Lain

21 November 2018

Tinggalkan Balasan Batalkan balasan

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

Baru-baru Ini

Persiapan Jualan Online, Apa Saja Yang Harus Disiapkan

Apa Saja Yang Harus Dipersiapkan Untuk Jualan Online?

8 Januari 2021
Alasan Kenapa Anak Mudah Harus Investasi

Alasan Kenapa Harus Investasi Sejak Muda

21 Desember 2020
3 Tips Memilih Wifi yang Akan Dipasang di Rumah

3 Tips Memilih Wifi yang Akan Dipasang di Rumah

20 Desember 2020
Rekomendasi Perpaduan Warna Cat Rumah Minimalis

Rekomendasi Perpaduan Warna Cat Rumah Minimalis

28 November 2020
Cara Praktis Membuat Web Menggunakan Template Website

Cara Praktis Membuat Web Menggunakan Template Website

27 November 2020

Riswan Net AMP

Riswan Net menyajikan informasi update seputar Teknologi, Tips Trik Internet, Perbankan, Media Sosial sampai Panduan Bisnis Online.

playstore download logo 2

Kategori

  • Adsense
  • Aplikasi
  • Bisnis
  • Bitcoin
  • Blogger
  • Desain
  • Gadget
  • Internet
  • Komputer
  • Media Soaial
  • Review
  • SEO
  • Software
  • Teknologi
  • WhatsApp

Tags

Android Bisnis Bisnis Online daily Life Internet Kesehatan Komputer Perbankan Tips Trik Travel WhatsApp Youtube

© 2019 Riswan Net All Right Reserved

  • About
  • Kontak
  • Iklan
  • Privasi
No Result
View All Result
  • Home
  • Content Placement
  • Tekno
  • Internet
  • Komputer
  • Bisnis

© 2020 Riswan Net All Right Reserved.

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In