用jquery设置Blogger外部链接的样式和打开方式

blogger中链接默认都是在本窗口打开,但如果想要外部链接能醒目一点并且在新窗口打开,就得借助jquery的力量了.这个功能需要选择器的组合使用,以开始怎么都搞不定,后来看了Rails/jQuery magic: marking external links with a CSS class后才知道":not"选择器可以连续使用.

目标效果:

思路:

其实关键在于jquery选择器的设置,如果只转换文章正文中的链接,需要应用一下规则:

• 只设置文章正文的链接
• 忽略"javascript:"的链接
• 忽略以http://yourname.blogspot.com开头的链接
• 所有外部链接在新窗口打开
• 图片链接不显示外部链接图标
• 链接淡蓝色显示

首先,通过以上规则,获得所有外部链接的jquery包装集,然后对含有图片和不含图片的链接应用不同的样式即可.

代码:

jQuery代码:

$(document).ready(function() {
 $(".post-body a:not([href^='javascript:'])" +
   ":not([href^='http://greatghoul.blogspot.com'])").each(function() {
  var link = $(this);
  if (link.is(":has(img)"))
   link.attr("target", "_blank");
  else
   link.addClass("external").attr("target", "_blank");
 });
});

css代码:

a.external {
  padding-right: 12px;
  background-image: url(http://lh3.ggpht.com/_rL8ku7jXhnw/SfR3c_mnKYI/AAAAAAAAFdA/7ZZeKEUAoes/s800/external_white.gif);
  background-position: center right;
  background-repeat: no-repeat;
  background-color: #E0ECFF;
} 

测试效果:

Blogger页面加载等待效果
测试
博客用上了新皮肤,Google样式的
jquery学习：仿discuz论坛回帖添加表情效果

Growl for Windows - Mac 样式的信息提示工具 | 小众软件 > 桌面工具
Vu-Bar - 有利于阅读的文字挡板工具 | 小众软件 > 实用工具
xmlhttprequest().readystate的五种状态详解 转
国内值得一试的手机应用

javascript:alert('Hey');void(0);

转载声明: 出自: Ghoul To World!作者: GreatGhoul