Tổng hợp CSS hữu ích cho Blogspot mà mọi Web đều cần

Tổng hợp CSS hữu ích cho Blogspot mà mọi Web đều cần

Đâ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 mà bạn có thể sử dụng 1 trong 3 cách bên dưới

Code 1: Dùng ảnh để tạo icon

.post-body a:after{content: url(https://1.bp.blogspot.com/-yZqmAXaTr_s/W-JzJoPkGnI/AAAAAAAANQo/WsjZruRPOLIq1cOmYVJZi-4Q-SMmEw6rACLcBGAs/s000/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 như thế này!
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}
Ví dụ video dưới đây xem có Responsive không nhé!


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}
.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;}
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.
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
Xuất bản tại mục CSS3. Lưu lại liên kết này Ctrl + D
2 Nhận xét