Mendesain sub heading dan minor heading atau style tag H3 dan H4

Seorang blogger pemula (termasuk penulis juga masih pemula) selalu memiliki gagasan/ide yang sempit tentang banyaknya pengkodean (coding) yang sederhana. Bahkan ketika saya terjun ke dunia blog dan masih pemula waktu itu, sama sekali saya tidak dapat memahami sedikitpun tentang coding apalagi coding yang rumit dan sulit. Untuk contoh misalnya merancang tag H3 dan H4 sebagian besar blogger pemula tidak menyadarinya.

Sebelum melanjutkan ke tutorial Anda harus  mengubah semua tag H3 menjadi H2. Karena ia akan bekerja untuk sub heading dan minor heading. Dan secara default blogger menetapkan Sub-Heading sebagai tag H3  dan minor heading sebagai tag H4 . 

Mendesain sub heading atau  tag H3

Sub-Heading umumnya mendapatkan prioritas di bawah tag judul. Tag heading (judul) kita tetapkan sebagai H2 dan Sub-Heading sebagai H3. Ketika kita menulis artikel tentang apa saja maka kita menggunakan banyak Sub-Heading dan untuk membuatnya sedikit menarik kita akan menggunakan ikon dan warna dengan coding sederhana ..
  
Tag Sub-Heading ini sangat berbeda dan memiliki style efek hover. Berharap anda akan menyukainya. :)

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih -> Template-> Edit HTML

• Cari tag/kode ]]></b:skin> tekan  CTRL+F untuk memudahkan proses pencarian
• Berikutnya kopi dan pastekan kode CSS dibawah ini tepat diatas kode  ]]></b:skin>  

h3{
font-family:Arial !important;
font-style:italic !important;
}
.post h3 {
color:#0000ff;
border-left:10px solid #0000ff;
border-right:10px solid #0000ff;
padding:3px 5px 3px 20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #0000ff;
-webkit-box-shadow:0px 0px 13px #0000ff;
-moz-box-shadow:0px 0px 13px #0000ff;
}
.post h3:hover {
color:#f01a1a;
border-left:10px solid #f01a1a;
border-right:10px solid #f01a1a;
box-shadow:0px 0px 13px #f01a1a;
-webkit-box-shadow:0px 0px 13px #f01a1a;
-moz-box-shadow:0px 0px 13px #f01a1a;
} 

• Simpan template..

Mendesain minor heading atau style tag H4

Tag ini sebenarnya kurang begitu penting dibandingkan dengan sub-heading. Umumnya kita gunakan untuk menandai beberapa info/headline yang kurang penting. Standarnya, blogger menetapkan tag H4 atau minor heading.

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih -> Template->Edit HTML

• Cari tag/kode ]]></b:skin> tekan  CTRL+F untuk memudahkan proses pencarian
• Berikutnya kopi dan pastekan kode CSS dibawah ini tepat diatas kode  ]]></b:skin>  

.post h4{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq7K9oDdr8w1wB-4KuaH93iTFXpLGe-O74dXA8lywJPD9_hH-rp1akZGmAZ3oKkpzGHn7jZO4MB8ijNemAPg3XYnWsombPh4sW16A8XSAk0nc0Oo3Yy-iKDDZbjuZ49XaXIFJAHWjYLibh/s1600/h2.png") no-repeat scroll 4px center transparent;
border: 3px solid #C8C800;
border-radius: 60px 60px 60px 60px;
box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
color: #A5A503;
font-family: 'lobster',sans-serif;
font-size: 19px;
font-weight: bold;
line-height: 1;
margin: 15px 3px;
padding: 3px 10px 3px 30px;
text-shadow: 0 1px 0 #CCCCCC;
text-transform: uppercase;
} 

•  Simpan template..Selesai.

Bagaimana menggunakannya?

Masuk ke postingan baru dan tulis artikel dengan sub-heading dan minor heading. Sekarang blok dan klik pada heading, sub-heading atau minor heading seperti  gambar di bawah:

 

Semoga bermanfa'at and happy blogging..!

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 07.13