seperti apa hasilnya,lihat gambar bawah...
Tag Sub-Heading ini sangat berbeda dan memiliki style efek hover.Berharap anda akan menyukainya. :)
lihat gambar bawah
caranya.....
Bagaimana menggunakannya?
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
- 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/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.
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