Hiệu ứng hover cho thẻ tiêu đề blogger

Thẻ tiêu đề với hiệu ứng hover cho blogger,

Thêm hiệu ứng hover khi trỏ chuột đẹp cho thẻ tiêu đề blogspot

Việc Sử dụng thẻ tiêu đề trong khi trình bày bài viết góp phần nhìn bài viết thêm phần pro và đẹp mắt hơn.

Làm cho người đọc cảm thấy họ được chăm sóc chu đáo hơn :D

Muốn làm được điều này Ta cần thêm CSS vào trong mẫu,như hình trên là có 6 mẫu thẻ tiêu đề sẽ được trình bầy và ứng với mỗi mẫu là code CSS và HTML của nó.

Đầu tiên ta quan tâm tới CSS trước nhé
Thêm CSS thì các bạn đều biết là thêm vào trước thẻ ]]></b:skin> 

Mẫu 1

DEMO tiêu đề hover

Code CSS
.dtc1{
color: #6600FF;
font-size: 20px;
background: #BCF5A9;
margin: 0px 0px 5px;
padding: 3px 0 6px 10px;
border-left:4px solid #FF0000;
}
.dtc1:hover {
background:#f2f2f2;
)
Mẫu 2

DEMO tiêu đề hover

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

DEMO tiêu đề hover

Code CSS
.dtc3{
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}
.dtc3:hover {
background:#E0E0F8;
}
Mẫu 4

DEMO tiêu đề hover

Code CSS
.dtc4{
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;
}
Mẫu 5

DEMO tiêu đề hover

Code CSS
.dtc5 {
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;
}
.dtc5: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;
}
Mẫu 6

DEMO Tiêu đề hover

Code CSS
.dtc6{
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;
}
.dtc6:hover{
background:#ffffff;
}
Bây giờ là phần HTML tức là khi post bài ta cần thêm thành phần HTML
Vậy trong bài viết khi cần nhấn mạnh 1 tiêu đề nhỏ nào đó ta dùng mẫu 
<div class="dtc@">Dòng chữ của bạn</div>
Trong đó dtc@ ứng với từng biểu mẫu bên trên có nghĩa là bạn dùng mẫu 1 thì dtc@ là dtc1.Dùng mẫu 6 thì dtc@ là dtc6....
Chúc bạn có những tiêu đề hover đẹp tạo sự sang trọng cho blog của bạn