Friday, 14 June 2013

How to Higlight External Links in Blogger

Posted by Abhishek
You can highlight all the external links that are linking to other sites in your blogger blogs.It is very easy to do with the help of some javascript and some css.After adding these javascripts you will also not need to go back to all your pages and edit them to make all the links highlighted.This will make your users get aware that which links are of your site and which ones are not.In some bigger sites lile wikipedia,google you.may have seen that on all the links that are pointing outsidr have a blue image added automatically.So today i am going to tell u the same how you can add that in your blog also.
This post is divided in two sections in which first you had to add javascripts and in the second you had to add css.Adding javascript is required to tag all the external links as external links.Css will help us to stylize those external links.
Adding Javascript In Your Blogger Blog
So to add javascript in your blog first of all go to your blogger dashboard and then go to Templates > Edit Html and look for </head> and add beloe code just above it if you have not added it before.

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



Now Look For </body> and paste the below javascript code above it.

<script>
//<![CDATA[
undefinedfunctionundefined$) {
$undefined'a:notundefined:hasundefinedimg))').filterundefinedfunctionundefined) { return this.hostname && this.hostname !== location.hostname; }).addClassundefined"external");
})undefinedjQuery);
//]]>
</script>


Now save your template.
Adding Css Code in Your Template
Now in your template look for the tag </b:skin> and paste below css code.
a.external {background:urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNrPlpH6nrHH_sWSKGeUEVmbrMWlc9MihRyGnKqv0sbb6UaKerSXWN2vKmMCNoUvFfChm7NSCJDVHEvCMH3zAZx-amGYKIYJPFJT891rWvlpU6DyPyYbqbvkJ83SI76QF2ckH1YJFPbhel/s320/Icon_External_Link+12.png") no-repeat right center; padding-right:13px; display:inline-block !important; }

Now save your template and you are all done friends now go to your blog and see the change in any external link.Do tell us Your Views in the comments.

0 comments:

Post a Comment