TẠO HIỆU ỨNG HOVER TEXT CHỮ GẠCH CHÂN TỪ FONT FAMILY VÀ CSS

Nhiều Khi bạn muốn bài viết của bạn trở nên chuyên nghiệp hơn , đẹp hơn khiến khán giả thích thú đọc bài của bạn.
Với hiệu gạch chân có hiệu ứng trượt đẹp mắt khi rê chuột vào sẽ giúp cho đoạn văn bản hay đường dẫn của bạn trở nên bắt mắt hơn, dễ tạo được sự chú ý của người đọc hơn. Và điều đặc biệt là thủ thuật này chỉ sử dụng CSS nên không làm ảnh hưởng tới tốc độ tải trang của bạn.

Hướng Dẫn

Bước 1 : Đăng nhập vô trang quản lý blogger và tìm đến mục Chủ đề => chỉnh sửa html => crtl + F   tìm đến thẻ ]]></b:skin> trong template và chép đoạn css Sau nằm trên nó.

.post-body h2{font:500 20px Roboto,sans-serif;text-transform:uppercase;margin:10px 0;color:#00a06a;text-align:center;border-top:1px solid #eee;padding:7px 0;transition:.4s;-webkit-transition:.4s;position:relative}
.post-body h2:after{content:'';position:absolute;width:5%;height:1px;background:#00a06a;bottom:0;left:50%;transform:translate(-50%,0);transition:1s;-webkit-transition:1s}
.post-body h2:hover {
border-top: 1px solid;
letter-spacing: 1px;
}
.post-body h2:hover:after {
width: 100%;
background: white;
}
.post-body h2:after {
content: '';
position: absolute;
width: 5%;
height: 1px;
background: #00a06a;
bottom: 0;
left: 50%;
transform: translate(-50%,0);
transition: 1s;
-webkit-transition: 1s;
}

Bước 2 : Cách Sử Dụng ,Các Bạn copy đoạn Html sau : edit lại chỗ mình Tô Đỏ Chuyển sang mục html trong bài viết và dán đoạn đó vào và hưởng Thụ.

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="background-color: white; border-top: 1px solid rgb(238, 238, 238); color: #008272; font-family: Roboto; font-size: 20px; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: 500; letter-spacing: -0.35px; line-height: normal; margin: 10px 0px; padding: 10px 0px; position: relative; text-align: center; text-transform: uppercase; transition: 0.4s;">
VĂN BẢN CẦN VIẾT  </h2>
</div> 

LỜI KẾT

Chỉ vài bước đơn giản mình đã hướng dẫn xong cho các bạn ,  1 thủ thuật nhỏ tiện ích đúng không nào , nếu thấy hay hãy share ủng hộ blog mình ngày càng phát triển thêm nhé , thank you. Theo : socbayblog