Cách thêm biểu tượng liên kết ngay sau nội dung hiển thị khi chèn URL trong bài viết

Khi soạn bài viết trên thanh công cụ soạn thảo của Blogger có tùy chọn thêm Liên kết bằng cách bôi đậm đoạn Nội dung hiển thị sau đó chèn Địa chỉ web. Như vậy khi độc giả đọc bài nhấp chọn vào Nội dung hiển thị sẽ chuyển hướng từ liên kết hiện tại liên kết tới URL khác, ngoài ra khi chọn chèn Liên kết có thêm tùy chọn: Mở liên kết này trong cửa sổ mới (tab mới của trình duyệt) và Thêm thuộc tính rel="nofollow" nếu là liên kết ngoài.

Để khách truy cập khi đọc bài viết nhận dạng được Liên kết đang được chèn trong Nội dung hiển thị chúng ta có thể viết css cho thẻ class .post-body a có màu khác, gạch chân, in đậm..., tuy nhiên còn một cách để độc giả rõ hơn đó là Liên kết bằng cách thêm Biểu tượng liên kết ngay sau Nội dung hiển thị.

Cách thêm biểu tượng liên kết ngay sau nội dung hiển thị khi chèn URL trong bài viết

Cách này rất dễ chỉ cần viết thêm css là được nhưng trước tiên chắc chắn template của bạn đang sử dụng class .post-body, nếu không phải thì thay .post-body bằng class template của bạn.

Chèn đoạn css sau trong thẻ <b:skin>...</b:skin>

+ Trường hợp đang sử dụng biểu tượng FontAwesome, các bạn có thể thêm biểu tượng liên kết như sau:

Copy

.post-body a {

    font-family: FontAwesome;

    content: '\f08e';

    font-size: 12px;

    vertical-align: bottom;

    padding-left: 5px;

}

+ Trường hợp không sử dụng biểu tượng FontAwesome, thì sử dụng biểu tượng bằng ảnh thay thế:

Copy

.post-body a {

    content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPBCBj6uvCgau2oEUS1smpkEcXQtCzDCt545HxvQk1zNBp4wSn-8Zp5ZzhR0TwRrGt8xWS-mq_fk7CimJk9Yl3Azc_T7mA-qIWiMKLPHODjvvoX9mqxd91xqNkIbtXTT4SMx_xsaYk7X5S/s0/url_icon.png);

    font-size: 12px;

    vertical-align: middle;

    padding-left: 5px;

}

Loại bỏ các thẻ tag a khác trong bài viết:

Copy

.post-body a[name]:after,.post-body .tr-caption-container a:after, .post-body .separator a:after {

    content:unset;

}

Trên đây là sử dụng Liên kết chung cho thẻ tag a, tuy nhiên như đã đề cập có hai tùy chọn khi chèn Liên kết đó là: Mở liên kết này trong cửa sổ mới target="_blank" và Thêm thuộc tính rel="nofollow" nếu là liên kết ngoài. Do đó các bạn có thể viết css cho các tùy chọn này như sau:

+ Nếu chỉ sử dụng cho Liên kết mở ra cửa sổ mới sử dụng .post-body a[target]:after
+ Nếu chỉ sử dụng cho Liên kết ngoài rel="nofollow" sử dụng .post-body a[rel]:after

Nội dung chính