Saturday, 26 October 2013

How To Opening External Links in a New Window Blogger

Posted on 07:25 by PrO EARNER

Opening External Links in a New Window

Welcome to a the first of a"mini" series of posts about the nitty gritty of this blogging malarkey! You may have noticed a few tweaks and changes to the look and functionality of this blog of late. Well, recently I've been delving into some html coding, & addressing all the niggly little things that have been bugging me about my blog. Some of it to do with functionality; some of it purely aesthetic. Anyway, you know how much I like to share my little eureka moments with anyone who'll listen; and I've had a few of you ask about different changes that I've made too.  So if, like I did, you have little niggles about your own blog, but feel a bit glazed over by html, then hopefully I can help show you how quick, easy, (and strangely!) fun, it is, to get the tool kit out and start tinkering with the insides of your blog! (Seriously, if I can do this, anyone can!)

One niggle for me is the way Blogger automatically opens all links in the same tab. So if I've got a link to another site in one of my sidebars, readers will be directed away from my blog and onto, let's say, Karen's Sewlutions post. Now I think people should click on the links in my sidebar, otherwise they wouldn't be there! But I don't want it to be at the expense of my blog. I want readers to hang around and have a look around my blog. They're less likely to do that if Blogger shuts down my page in order to send them to another blog that I've linked to. Ideally I want Blogger to keep my page open, then open any external links, in a new tab. (If you're not sure what I mean, then click on Karen's Sewlutions button in my sidebar. Watch, and it will open up a new tab along the top of your screen, with this page still open. Sorted!) This is how to get Blogger to do that. It involves adding some simple html code to a specific place in your template. It's not as geeky as it sounds. Promise!

1) Click on "Template" in your dashboard. Click on "Backup/Restore". This will download a copy of all of the coding that goes to make up your blog, and save it in a file on your computer. It's wise to do this after every few adjustments you make to your blog template. Then click on "edit html"


2) This will open up all the geeky gobbledy gook (aka HTML) that is behind your blog; and how it looks and functions. Within the first few lines you'll find a "<head>" tag. As highlighted in blue in the screenshot below. Click right next to it, on the same line...
3) Copy the code snippet below...
12345678910111213

<!-- start of external links new window -->


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


 <script type='text/javascript'>


  


$(document).ready(function () {          


 


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


 


    });


 


    </script>


 


<!-- end of external links new window -->

view rawgistfile1.txt hosted with ❤ by GitHub


4) Then paste it right next to the "<head>" tag....

5) Click "save template" and you're done!

From now on, any links to external sites that you put in any of your posts OR your sidebars/footers etc, will open in a seperate window. Any links to other parts of your blog, will open in the same window. So your readers can go visit the sites you recommend, but still leave your blog open to come back to when they're done!

Told you it was easy ;) (and secretly quite satisfying. Or am I just sad?!)



Posted in | No comments

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)