Set Of Heading Tags Dengan Hover Effect Untuk Blog

Ada banyak alasan yang baik untuk menggunakan tag judul untuk mendefinisikan dokumen HTML Anda dan memberikan struktur. Tapi desainer Web pada umumnya mendapatkan dalam kebiasaan tidak menggunakan tag judul, atau hanya menggunakan satu atau dua dokumen, foto dan menggunakan foto, tag font, dan teks bergaya sebagai gantinya.
Tapi menggunakan tag heading dapat membantu Anda dengan SEO, dengan aksesibilitas, dan dengan struktur umum.
Tags page.Headings membuat posting Anda lebih cocok dengan yang pembaca Anda dapat membaca properly. Saya telah membuat tag judul dengan CSS murni dan tidak akan berpengaruh pada kecepatan blog Anda.
Sekarang mari kita lihat bagaimana untuk menambahkannya di blog Anda.

Berikut ini saya berikan beberapa Set Of Heading Tags Dengan Hover Effect yang telah saya buat dan anda dapat memilih saya telah membuatkan priviewnya/demo, CSS dan HTMLnya!

---

Cara Menginstal Set Of Heading Tags Dengan Hover Effect Untuk Blog Untuk Blogger

---

1. Pergi ke akun blogger Anda.

2. Pada Dasbor klick Template ➨ Edit HTML.

3. Sekarang temukan kode ]]></b:skin> (Bila kesulitan mencari kode HTML klick DISINI)

4. Lalu letakkan CSS berikut tepat di atasnya.

Penting: Ingat hanya kode CSSnya saja, anda bisa meletakkan satu CSS atau lebih atau semuanya tergantung selera Anda.

---

Heading 1

Preview

Lorem Ipsum Dolor Sit Amet - By:Oto Website

CSS

.ow1{
color: #6600FF;
font-size: 20px;
background: #BCF5A9;
margin: 0px 0px 5px;
padding: 3px 0 6px 10px;
border-left:4px solid #FF0000;
}
.ow1:hover {
background:#f2f2f2;
)

HTML

<div class="YOUR HEADLINE CLASS i.e ow1">
Code Here
</div>

---

Heading 2

Preview

Lorem Ipsum Dolor Sit Amet - By:Oto Website

CSS

.ow2{
color: #000;
font-size: 20px;
font-family:Verdana;
background: #fff;
margin: 0px 0px 5px;
padding: 3px 0 3px 10px;
border-left:4px solid #FF0000;
}
.ow2:hover {
background:#F6CECE;
}

HTML

<div class="YOUR HEADLINE CLASS i.e ow2">
Code Here
</div>

---

Heading 3

Preview

Lorem Ipsum Dolor Sit Amet - By:Oto Website

CSS

.ow3{
background:#FFFFFF;
font-weight: bold;
font-family:consolas;
font-size:19px;
color:#FA5858;
text:1px 1px 1px #AAA;
border-bottom:4px solid #Ff0000;
-moz-border-radius:0 0 6px 6px;
-webkit-border-radius:0 0 6px 6px;
border-radius:0 0 6px 6px;
-moz-box-shadow:1px 1px 22px #AAA;
-webkit-box-shadow:1px 1px 2px #AAA;
box-shadow:1px 1px 24px #AAA;
text-transform:capitalize;
display:block;
width:96%;line-height:1;
margin:6px 3px;
padding:4px 10px}
.ow3:hover {
background:#E0E0F8;
}

HTML

<div class="YOUR HEADLINE CLASS i.e ow3">
Code Here
</div>

---

Heading 4

Preview

Lorem Ipsum Dolor Sit Amet - By:Oto Website

CSS

.ow4{
font-size:20px;
padding:5px;
font-family:consolas;
color:#0000FF;
text:1px 1px 1px #333;
background:#CEF6CE;
border-left:20px solid #FF0040;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;

HTML

<div class="YOUR HEADLINE CLASS i.e ow4">
Code Here
</div>

---

Heading 5

Preview

Lorem Ipsum Dolor Sit Amet - By:Oto Website

CSS

.ow5 {
font-size:20px;
font-family:verdana;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;
}
.ow5:hover {
color:#FF133F;
border-left:10px solid #FF133F;
border-right:10px solid #FF133F;
box-shadow:0px 0px 13px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
}

HTML

<div class="YOUR HEADLINE CLASS i.e ow5">
Code Here
</div>

---

Heading 6

Preview

Lorem Ipsum Dolor Sit Amet - By:Oto Website

CSS

.ow6{
color:#444;
font-size:15px;
font-weight:bold;
font-style:italic;
font-family:georgia;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
background:#E0F2F7;
}
.ow6:hover{
background:#ffffff;
}

HTML

<div class="YOUR HEADLINE CLASS i.e ow6">
Code Here
</div>

5. Simpan Template.

---

Keterangan dan Cara Menggunakan Untuk Blogger

---

Anda telah berhasil menginstal Set Of Heading Tags Dengan Hover Effect Untuk Blog sekarng untuk memanggil kode tersebut Anda gunakan kode HTML di atas, sesuai dengan CSS yang Anda pilih dan ganti yang di block kuning dengan kode atau tag Anda sendiri.

---

Modifikasi

---

Anda dapat berinspirasi sendiri dengan menggunakan CSS di atas, seperti Anda ingin merubah warna ataupun font bahkan latarnya, Untuk memodifikasi sendiri saya sarankan menggunakan OW - HTML Editor untuk mempermudah kerja Anda.

---

Ada Kesulitan ?!?

---

Saya harap Anda tidak menemukan kesulitan dalam membuat Set Of Heading Tags Dengan Hover Effect Untuk Blog. Tapi jika Anda membutuhkan bantuan jangan sungkan untuk bertanya, Karna Saya Ada Disini!