11/4/13

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

Đăng bởi Admin | 11/4/13 | 0 nhận xét


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.
Heading Tag với hiệu ứng đổ bóng và dê chuột Hover
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)
                                                                                                                 Thu thuat vi tinh

Không có nhận xét nào:

Đăng nhận xét

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

Support : Trick Blogspot | Ghost win | Website Design | Seo Trick | Ghost win | Software Free | Site Map | Back Link | Contact Advertising | ↑ back to top
Ghi rõ nguồn thuthuatvitinhaz.blogspot.com dưới dạng liên kết khi phát hành lại thông tin từ trang này
Copyright © 2013. Thủ thuật Số - All Rights Reserved
Design by Ngân Giang
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Template by Dameva