Saturday, 31 August 2013

cara membuat sub heading dan minor heading atau style tag h3 dan h4 keren

seperti apa hasilnya,lihat gambar bawah...



                  Mendesain sub heading atau  tag H3

Sub-Heading umumnya mendapatkan prioritas di bawah tag judul. Tagheading (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. :) 

lihat gambar bawah

caranya.....

  • 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-headingUmumnya kita gunakan untuk menandai beberapa info/headlineyang kurang penting. Standarnya, blogger menetapkan tag H4 atau minor heading.

seperti gambar ini..

cara menambahkanya...

  • 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/AVvXsEiIZXl4XFTiKgLW5RA6QwTo71jzkzo1QhzYvUoYVlhlfbs_nyya9AF1TT-5WSgxnUKBD2o6UCBLqI6RLmMfKG4ZpYb0f81HpPWzWNMYnQ30tBVdBHazFHvxq_6HbyxbYAx64sc3zddKzRn7/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:




happy blogging..!

No comments:

Post a Comment