Đây là những CSS hữu ích để chèn vào trong Website/Blogspot mà bất kì website nào cũng có thể áp dụng.
Các đoạn CSS này bạn có thể chèn trong cặp thẻ <skin> hoặc <style> trong giao diện blogspot
I. Tạo icon cho liên kết trong bài viết
Mục đích nhằm tạo cho web có điểm nhấn ở các liên kết, hơn nữa việc làm nổi bật các liên kết này sẽ khiến cho người dùng dễ nhấp chuột vào để tìm kiếm thêm thông tin về từ khóa đó và bạn cũng dễ điều hướng người dùng.
Về mặt SEO khi người dùng truy cập và xem nhiều trang sẽ làm tăng Time Onpage hơn.
 |
| Tạo icon liên kết ngoài cho bài viết trong blogspot |
Code 1: Dùng ảnh để tạo icon
.post-body a:after{content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-ouzKZHZOOW2mAEAXfeudB0mC0m56-1Ga0wl3I7aMPZ5SU_TvpRsMWvnKsazYSWg3J_iRJDvrlFBRj77HD2tNMVHqqcqD3WDb95HXZClPUwCcqGghZyqWGOVHNscYDcVcMn00w4XG1Mm/s0/url_icon.png)!important;
font-size: 12px;
vertical-align: middle;
padding-left: 5px;}
Code 2: Dùng thư viện Font Awesome 4 để tạo icon
.post-body a:after {
font-family: FontAwesome;
content: '\f08e';
font-size: 12px;
vertical-align: bottom;
padding-left: 4px;
}
Code 3: Dùng thư viện Font Awesome 5 Free để tạo icon
.post-body a:after {
font-family: "Font Awesome 5 free";
font-size: 12px;
vertical-align: bottom;
padding-left: 4px;
font-weight: 600;
content: "\f35d";
}
Lưu ý: Tất cả những liên kết nằm trong class .post-body sẽ điều hiển thị icon liên kết!
Do vậy mình mới giới hạn và viết thêm Article là chỉ nằm trong bài viết để không phải ảnh hưởng đến các phần khác trong .post-body.
II. Ngắt dòng cho liên kết quá dài
Nếu bạn trích dẫn trong bài viết với Anchor Text là cả 1 liên kết dài ngoằn, thêm vào đó bạn sử dụng thuộc tính căn đều text-align: justify thì link sẽ xuất hiện cực kì xấu.
Do đó ta sẽ ép link bắt buộc phải xuống dòng
body {
word-wrap: break-word;
word-break: break-word;}
 |
| Ngắt link dài tự xuống dòng |
III. Nhúng video youtube, ảnh, object trong bài viết không bị tràn ra ngoài khung bài viết
Bạn chỉ cần chèn duy nhất 1 đoạn CSS bên dưới để thực thi
iframe,img,object{max-width:100%;width:100%!important}img{height:auto}
IV. Tạo bảng trong bài viết tự động Responsive
Các cột trong bảng sẽ tự động co giãn theo diện tích bài viết hiển thị (Auto Table Responsive)
.post-body th{font-weight:700}.post{word-wrap:break-word}Lưu ý: Nếu bạn tạo bảng mà copy từ Excel hoặc Words ra thì cần xóa bỏ hết các width sinh ra.
.post-body table caption{border:none;font-style:italic}.post-body table{width:100%!important}.post-body th{background:#fafafa}
.post-body table.tr-caption-container{width: 100%;height: auto;}
table{max-width:100%;width:100%;margin:1.5em auto}table.section-columns td.first.columns-cell{border-left:none}table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}table.columns-2 td.columns-cell{width:50%}table.columns-3 td.columns-cell{width:33.33%}table.columns-4 td.columns-cell{width:25%}table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{margin:5px 0;padding:0px 0 7px 0}
td.tr-caption{padding: 7px 0;
color: #fff;
background: #1c1c1c;
animation-name: drop-down-zoom;
animation-duration: .35s;
transform-origin: left 2px;
text-align: center!important;
font-size: 80%;
margin-top: -10px;}
Bạn dán bảng đó từ Excel/words vào bài viết blogger sau đó chuyển sang tab HTML lấy code để chuyển vào Notepad++. Dùng lệnh replace (ctrl + H) vài thay thế tất cả width thành khoảng trắng.
Copy lại và dán vào lại chỗ cũ, tất cả những code lỗi đó khi chuyển về tab viết sẽ tự động được fix.
Ngoài ra còn những thủ thuật gì liên quan đến CSS mời bạn comment bên dưới!
Theo toilaquantri.com
Hay đó
Lười chia sẻ thôi chứ nhiều cái hay lắm bác à