Alexa Widget Link Not Opening in New Tab: Problem Solution

5

If you ever used Alexa Widget, you might noticed a wired problem after clicking on it, it will always open in same tab instead in new tab. Even if you will add target attribute to “_blank” value, then also problem persist. But, don’t worry my dear, here I’m sharing a working tips that will help you to open your alexa widget link really in new tab of web browser.

First try to understand, what I want to say – If you are using normal default alexa code like this, the problem will be this – (http://www.alexa.com/siteinfo/example.com) link will never open in new tab.

<!--  target attribute not working in default code -->
<a  target="_blank" href="http://www.alexa.com/siteinfo/example.com"><script 
src="http://xslt.alexa.com/site_stats/js/s/a?url=example.com"></script></a>

Concept behind the solution

When you will add <base target=’_blank‘/>, then alexa widget link open in new tab. That’s true, but on HTML same page it will open all links in tab. Initially, this idea I got from a Cyber Security Expert – Jayesh. I’m thankful to him. As, he suggested me to use below code. This code solved my problem but it invited a new problem which made a reason to refine this code.

<a href="http://www.alexa.com/siteinfo/example.com">
<script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/t/b?url=example.com">
</script></a><base target='_blank'/> 

So, later I refined his suggested code in HTML iframe to by-pass the issue of ‘opening all links in new tab’. Instead of putting code directly, I preferred to put under Iframe. Finally, it worked for me as expected. Now, if you will apply below trick for your own Alexa Widget, normally only your alexa rank page link will open in tab even after adding <base target='_blank'/>.

Steps by Step Solution To Add Special Alexa Widget which will open in New Tab

  1. First of all, In Notepad, copy and paste the below code and save with .html extention, for example you can name it alexa.html. In below code, please replace my domain with your own.

    <!doctype html><head><title>Alexa Widget</title> <body><a href="http://www.alexa.com/siteinfo/gulshankumar.net"><script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/t/b?url=gulshankumar.net"></script></a><base target='_blank'/></body></html>
  2. Using FTP, Upload the above alexa.html file at public_html folder. Assuming, your alexa.html file has been uploaded successfully and it can bee access right from URL http://example.com/alexa.html
  3. Now where ever you want to show the Alexa Widget, put the below code.
    <iframe src="http://example.com/alexa.html" scrolling="no" frameborder="0" height="120" width="130"> </iframe>
  4. That’s it. Still you want see proof? You can verify here. You will see the link will open in new tab instead in same tab.

    Tips for WordPress User

    Without using FTP, you may directly upload the (alexa.html) HTML file by going to WordPress Dashboard > Media > Add New option. Just make sure the put the direct link of your HTML file in the iframe code. I’m sure it will work.

    Now, it wouldn’t be wrong to say-
    Sometime a little thing make big difference. Click To Tweet
    Have something to say? please do share in the comment section

5 COMMENTS

  1. hey can you please explain “Upload the above HTML document in your file manager” in details? i mean step by step process to do it… i tried many options but any of it didn’t work on my website www.shiveshskitchen.com so i made it opaque…plz help…thanks in advance

LEAVE A REPLY