Thêm ký tự đánh dấu cho liên kết ngoài (external link), mở trong tab mới hoặc cửa sổ mới cho Blogger

Tell users that a link or button will open in a new tab or window & how to do so?

Hôm nay Iris Tips sẽ chia sẻ cho các bạn một thủ thuật CSS nho nhỏ để đánh dấu các liên kết ngoài (external link), mở trong tab mới, giúp blog của bạn trông bắt mắt, hiện đại hơn. Tham khảo bài viết dưới đây nhé.

CSS

Thêm dòng code dưới đây vào trước thẻ ]]></b:skin>

/* New Tab Link */
.post-body a[target="_blank"]:after {font-family:'FontAwesome';content:"\f08e";font-weight:normal;font-size:80%;margin-left:4px;}

Lưu ý: Nếu blog bạn chưa có thư viện FontAwesome thì bạn hãy thêm dòng code dưới đây trước thẻ </head> nhé.

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>

• DEMO

Dưới đây là hình ảnh ví dụ, hàng thứ nhất là link bình thường, hàng thứ 2 là link mở trong tab mới.

Rất đơn giản mà đẹp phải không nào.
Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm