Heading Tag với hiệu ứng đổ bóng và dê chuột Hover

Blogger blog cho phép chỉnh sửa stylesheet. Bạn có thể tùy chỉnh các mã để blog như ý muốn. Bài trước, Namkna đã chia sẻ nhiều cách khác nhau tùy biến các thẻ tiêu đề, tức là H3. Namkna sử dụng thẻ H3 bên trong mỗi bài viết. Thẻ tiêu đề (heading tag) được xem là phần quan trọng nhất với Seo. Hôm nay chúng ta sẽ tìm hiểu làm thế nào để tạo ra một tiêu đề tùy chỉnh và sẽ thay đổi màu sắc khi chuột di chuột. Namkna sẽ sử dụng CSS3 hiệu ứng để tạo ra một hiệu ứng đổ bóng cùng với hiệu ứng hover khi dê chuột lên tiêu đề đó. Điều này sẽ cung cấp cho tiêu đề của bạn một cái nhìn mới hơn. Vì vậy, hãy làm điều đó!

Demo chính là các tiêu đề con trong bài viết này!

☼ Cách tiến hành:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML) => Tiếp tục (Procced):
4- Tìm kiếm thẻ ]]></b:skin>  (Mẹo: Hãy bấm Ctrl + F để tìm nhanh hơn)
5- Dán đoạn code sau vào trước thẻ  ]]></b:skin> (Ứng với mỗi một mẫu là tiêu đề minh họa ngay trên nó).

/*------http://namkna.blogspot.com/--------*/
h3{
font-family:veranda !important;
font-style:italic !important;
}

.post h3 {
color:#666;
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;
}

.post h3: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;
-moz-box-shadow:0px 0px 13px #FF133F;
}

Lưu ý: Hãy xóa tất cả những thẻ trong blog của bạn bắt đầu bằng thẻ CSS dạng:

.post h3 {...}
.post h3:hover {...}
.post h3 span  {...}
....

Tùy chỉnh đoạn code trên:

• Để thay đổi chỉnh sửa kiểu font Verdana hãy thay thế nó với bất kỳ kiểu font bạn muốn.
• Để thay đổi chữ in nghiêng hãy thay thế (italic) với một trong hai loại là bình thường (normal) hoặc đậm (norma)
• Để thay đổi màu chữ và màu sắc đường viền trái/phải trong chế độ hoạt động khi chưadê chuột lên, Hãy thay đổi mã màu #666 thành mã màu lựa chọn của bạn.
• Để thay đổi màu chữ và màu sắc đường viền trái/phải trong chế độ hoạt động khi đã dê chuột lên, Hãy thay đổi mã màu #FF33F thành mã màu lựa chọn của bạn.
• Để thay đổi màu đổ bóng của hộp trong chế độ hoạt động khi chưa dê chuột, hãy thay đổi mã màu #666 thành mã màu lựa chọn của bạn.
• Để thay đổi màu đổ bóng của hộp trong chế độ hoạt động khi chưa dê chuột, hãy thay đổi mã màu #FF133F thành mã màu lựa chọn của bạn.

6- Lưu mẫu của bạn lại!

Cách sử dụng khi đăng bài?

1- Tạo một bài đăng mới.
2- Check vào tab HTML và sử dụng đoạn code sau:

<h3> Tiêu đề bài viết của bạn ở đây </h3>

Xem ảnh minh họa để tháy ró hơn.

3- Sau khi bạn xuất bản bài đăng, bạn sẽ thấy tác dụng của thủ thuật.

Tôi hy vọng mẹo nhỏ này sẽ giúp bạn tạo các bài viết có chất lượng tốt hơn bằng văn bản. Hãy cho namkna biết nếu bạn cần bất kỳ sự giúp đỡ nào.

Theo: Namkna.blogspot.com

Share this

Author : Net Xây Dựng

Related Posts