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.
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
Steps by Step Solution To Add Special Alexa Widget which will open in New Tab
- 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.
- 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
- 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>
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.