Ads 468x60px

Wednesday, 18 August 2010

Sử dụng JQuery để mở link ngoài bằng cửa sổ trình duyệt mới

Bằng cách sử dụng JQuery các liên kết ngoài trong bài viết sẽ được mở tại cửa sổ trình duyệt (tab) khác, trong khi bài viết gốc vẫn giữ nguyên hay vì bị chèn bởi link liên kết ngoài.

Sử dụng JQuery để mở link ngoài bằng cửa sổ trình duyệt mới

Bạn có thể tham khảo bài viết mà VnBlognet đã giới thiệu cách Mở Link với blogger trong cửa sổ trình duyệt mới bằng script của anhvo.

Với thủ thuật này các link liên kết ngoài sẽ có biểu tượng bên cạnh.

Xem Demo

Cách thực hiện như sau:

1Truy cập vào Blogger:

- Bạn truy cập vào tài khoản Blogger: Bảng điều khiển (Dashboard) ..>>.. Thiết kế (Design) ..>>.. Chỉnh sửa HTML (Edit HTML)

- Tìm (Ctrl-F) đoạn tag </head>

2Chèn mã JQuery:

- Dán vào trước đoạn tag </head> đoạn mã dưới đây:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
/*

jQuery - External Links
Created by Andrea Cima Serniotti - http://www.madeincima.eu

*/


$(document).ready(function () {

// ---- External Links ----------------------------------------------------------------------------------------------------

$("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])").attr("target","_blank").attr("title","Opens new window").addClass("external");

});
</script>

<style type="text/css">
.external{background:url(http://1.bp.blogspot.com/_HJvXUqHmf9Y/TGExEsLHv3I/AAAAAAAAABA/pcPpWeXmePY/s1600/external_link.gif) top right no-repeat;padding-right:18px}
</style>

- Lưu mẫu (Save Template).

Giờ đây các liên kết ngoài của blog sẽ được mở bởi cửa sổ trình duyệt mới. Bạn có thể tham khảo chi tiết bài gốc tại Bài gốc - Tiếng Anh

20 nhận xét:

PayPal Việt Nam said...

Bác Chinhnd có cái code jquery nào có thể chuyển link http text thông thường thành link có thể bấm được (clickable, có a href) thì chia sẻ cho em với, em cảm ơn bác trước :D

chinhnd said...

mình sẽ cố gắng tìm kiếm xem thế nào. (chinh là collecter thôi mà).

PayPal Việt Nam said...

Cảm ơn bác, em cũng kiếm đó giờ nhưng mà toàn ra php khó dùng vô blogger, hoặc có javascript nhưng mà chả dùng được bác à :(

Kít said...

em nghĩ nên bỏ cái kí hiệu .gif kia vì nó sẽ hiện cả ở những chỗ k mong muốn:

http://cA3.upanh.com/11.880.16086192.KBT0/20100818_182122.jpg

vnblognet said...

rất đơn giản mà kit ơi, trong cái code kit xóa link hình ảnh tức là xóa cái dòng chữ http://1.bp.blogspot.com/_HJvXUqHmf9Y/TGExEsLHv3I/AAAAAAAAABA/pcPpWeXmePY/s1600/external_link.gif là được.

Pika Rock said...

sao phải rườm rà vậy a, trong khi thêm target="_blank" kèm theo img là đủ :-?
thêm nữa, external hay internal links cũng là chủ định do chính tác giả đặt ra trong mỗi điều kiện khác nhau, vậy mới hay

chinhnd said...

nhưng cái này nó tự động, cái liên kết ngoài trang mình nó sẽ tự động mở ra tại cửa sổ trình duyệt mới, còn thêm target thì phải làm "bằng thủ công" mà Pika, với lại mỗi người một sở thích nên anh cứ cho up lên để ai thích thì áp dụng mà em.

KID_KTV2K said...

Không xem được demo lẫn bài viết tiếng Anh nhỉ? ERROR The requested URL could not be retrieved

chinhnd said...

thế thì trang đó có vấn đề roài bạn nhỉ.

Mr.Lu said...

Em xài WP nhưng vì chi phí cho hosting hạn hẹp nên cũng có vài blog bên blogspot, cám ơn anh về bài viết, vấn đề jQuery còn mới mẻ quá, nhưng thấy nó có nhiều điểm hay, chắc phải tập trung nghiên cứu nó một thời gian.

Tran Quang said...

Nếu muốn mở link ngoài chỉ cần thêm code target="_blank" vào trong link là oki thui

Thang said...

Bác Chinh vẫn đều tay nhỉ,ngày nào cũng có bài mới

Tùng Lâm said...

Anh Ch có thể viết một bài giới thiệu chi tiết về thẻ Robots META Tag được ko ạ? Anh Ch đang dùng thẻ này như thế nào vậy hả anh? index hay ...????

Taiki said...

Thẻ robots chỉ cần để nội dung là "index,follow" thôi, không chỉnh sửa gì thêm.

Jquery càng ngày càng tỏ ra lợi hại, chính vì vậy mà mềnh đã bỏ mootools chuyển sang dùng jquery.

FRIENDS-PC said...

jquery hay nhưng file JS hơi nặng, gần 20kb thui thì dùng target="_blank" cổ hủ cho nó nuột

vnblognet said...

Hi hi.
Dùng tar dù biết là hay
"Nuột" thì có nuột nhưng là dùng tay

Taiki said...

Mấy cái tip nhỏ như thế này thì chỉ phù hợp với các site đã nhúng sẵn jquery như của em thôi bác Chinh à. Còn nếu không thì cần gì phải bê vào cái file jquery khá nặng chỉ để phục vụ một cái hiệu ứng nhỏ như vầy, làm tay còn nuột hơn.

gaquay said...

bài này lâu rồi nhưng e vẫn phải cảm ơn một cái mới được

Trung said...

Cảm ơn bạn nhiều, bài viết của bạn đã giúp mình giải quyết vấn đề

ChơiBlog.TK said...

- Cảm ơn rất nhiều, nhờ có bài viết mà mình đỡ phải thiết lập target="_blank" rất nhiều.

Post a Comment