External Link Arrow Widget (script) for Blogspot

9:41 PM

If you have ever visited  Wikipedia  then might be you have noticed about an arrow link for all external urls. It makes  Wikipedia  more pro...

If you have ever visited Wikipedia then might be you have noticed about an arrow link for all external urls. It makes Wikipedia more professional and help visitor to identify all outgoing links. I have seen many widgets to customize the external urls. But the showing arrow with every outgoing link is the most appreciable hack. After spending few hours finally I have come with a great blogspot script which will show an Arrow link image after every outgoing or external link and also it will open all external links in a new window. Applying this widget on your blogspot blogs is very easy. Just follow the simple steps mentioned below.
To add External Link Arrow Widget Follow steps below:
  • Go to Blogger | Design | Edit HTML.
  • Now find the code showing below in your Template.
]]></b:skin>
And paste the code showing below, just before above code.
.post-body a[href*='http://']:not([href*='bp.blogspot.com']):not([href*='blogtechnics.com']) { background: url(http://i51.tinypic.com/29zd3c4.gif) center right no-repeat; padding-right: 15px; }
Change blogtechnics.info with your blog URL.
Now find the tag showing below in your template.
</head>
Paste the code showing below just before above tag.
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>http://']:not(
[href*='"+location.hostname+"']):not([href*='bp.blogspot.com'])")
.attr("target","_blank");});
Now Save Template and Enjoy this widget on your blogspot blogs. This widget (script) will open all external urls in new window and will also show an external arrow image next to each external url. This script will not cause any problem to internal  links. For any help feel free to ask.

No comments: