Cách thêm biểu tượng liên kết ngoài cho blogspot

Chào mọi người.

Bài viết này mình sẽ hướng dẫn mọi người làm đẹp cho blog của mọi người bằng một tiện ích biểu tượng sau liên kết khá thú vị :P.

Khi soạn bài viết trên thanh công cụ soạn thảo của 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 trang hiện tại tới liên kết của trang khác mở ra tab mới của trình duyệt, ngoài ra khi bạn chọn chèn Liên kết lại 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 ngoài ngay sau văn bản liên kết 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 trong theme 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:

.post-body a[rel="nofollow"]:after {
    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ế:

.post-body a[rel="nofollow"]:after {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjEzIiBoZWlnaHQ9IjEzIiBmaWxsPSIjMWE3M2U4Ij48cGF0aCBkPSJNMTkgMTlINVY1aDdWM0g1YTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxNGMxLjEgMCAyLS45IDItMnYtN2gtMnY3ek0xNCAzdjJoMy41OWwtOS44MyA5LjgzIDEuNDEgMS40MUwxOSA2LjQxVjEwaDJWM2gtN3oiLz48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDBWMHoiLz48L3N2Zz4=) no-repeat;
    content: '';
    display: inline-block;
    height: .8125rem;
    margin-left: 3px;
    position: relative;
    width: .8125rem;
}

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="_blank"]:after

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

Như vậy đã hoàn thành.

hung.pro.vn demo

Chúc mọi người thành công với thủ thuật trên.

Theo Thietkeblog.Com