Thứ Năm, 14 tháng 7, 2016

Tự động mở link ngoài Website khi click vào link trên Blogspot

Như các bạn đã biết, muốn độc giả khi click vào link trên blog và mở ra một cửa sổ mới thì ta phải thêm thuộc tính target="_blank" vào. Tuy nhiên không phải lúc nào ta cũng nhớ để làm công việc này, và thật sự là mất thời gian đối với một bài viết hay đoạn code nào đó trong template có nhiều link. Vì vậy đoạn js mình sẽ giới thiệu bên dưới sẽ giúp bạn tự động thêm thuộc tính target="_blank" vào tất cả đường link trên blog. Tuy nhiên bạn không phải lo lắng về những đường link trên blog của mình, nó chỉ có tác dụng đối với những đường link bên ngoài, do vậy độc giả của bạn sẽ không rời khỏi blog của bạn đâu. Hơn nữa lại thân thiện với SEO và hoạt động tốt với tất cả các trình duyệt.


Thêm code vào template
Bạn chèn đoạn js sau vào trước thẻ đóng </head>
Code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
  $("a[href^='http://']").each(
    function(){
     if(this.href.indexOf(location.hostname) == -1) {
        $(this).attr('target', '_blank');
      }
    }
  );
$("a[href^='https://']").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
}
}
);
});
</script>
  • Đoạn mã được thêm 2 lần cho các liên kết được bắt đầu bằng cả http và https
  • Hai đoạn mã == -1 có tác dụng chỉ thêm thuộc tính target="_blank" vào các liên kết bên ngoài. Nhưng nếu bạn muốn áp dụng cho tất cả các đường link trên blog thì thay thế bằng ==1
  • Xóa đoạn code
    Code:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
    nếu trong template của bạn đã có jQuery rồi

Related Posts:

  • Tạo phân trang page navigation cho BloggerHôm nay mình xin tiếp tục chia sẻ các bạn thanh điều hướng page navigation, nó sẽ giúp các bạn đánh số trang bài viết có trên trang chủ của mình, rất quan trọng nếu blog của bạn có số lượng bài viết lớn. Thanh điều h… Read More
  • Tạo Style top bài viết cực đẹp cho BlogspotBài viết hướng dẫn bạn Tạo Style top bài viết cực đẹp cho Blogspot có giao diện như hình dưới. Ban đầu mình định sử dụng CSS 3 tuy nhiên vì muốn hiển thị cả trên IE7 nên lại chuyển về CSS 2, trong đó thì việc đánh số là CSS… Read More
  • Hướng dẫn chèn ảnh, video, nhạc vào comment BlogspotĐiểm mạnh của blog là tính tương tác giữa người viết và người đọc. Những dẫn chứng dạng chữ chưa đủ tính thuyết phục thì người đọc còn muốn chèn thêm ảnh, video hoặc nhạc. Ở diễn đàn thì việc chèn ảnh, video hay nhạc được … Read More
  • Đánh số thứ tự cho khung nhận xét cho BlogspotKhung nhận xét cơ bản đã là trực quan, tuy nhiên một số bạn còn muốn thêm đánh số thứ tự cho nhận xét. Việc đánh số thứ tự cho nhận xét giúp chỉ đích danh nhận xét đó và bài viết này sẽ giúp bạn làm điều đó. Số thứ tự… Read More
  • Tạo Style khung bình luận bài viết cực đẹp cho Blogspot Đây là một style dành cho khung nhận xét mặc định của Blogger. Với style này khung nhận xét của bạn trở nên trực quan hơn khi có sự phân biệt rõ ràng giữa nhận xét reply và nhận xét được reply. Nhận xét của tá… Read More

0 nhận xét:

Đăng nhận xét