URL Redirection for Demo and Download Links in Blogger

url redirection in bloggerLooks like every time we get a new project from university, we get a new idea to implement it on BlogSpot blogs. Last year we were given the task of developing a twitter clone social media network. We made extensive use of HTML Data-[content] attributes and this led us to create custom Iframes to redirect demo and download links in blogger. Most of twitter's user-interface objects are controlled using this parameter and jQuery built-in functions. We will use the exact same approach to control link redirection in blogger without the need for any web hosting account or complex web scripts. This Blogger plugin is indeed the first of its kind. We just hope this small effort proves useful for all Blogger users especially those who share download resources with their readers.

Update: Links will now also open in new tab. Problem fixed.

 

A special thanks to my classmate "Ahmed Nasir" who is a genius programmer without any doubts.

DEMO: Click the Demo and Download links and observe the URL in address bar.

Salahuddin Ayubi

Demo | Download

How it works?

Today's tutorial will help you to append all specified outgoing links next to your domain address by using dynamic string concatenation technique. The visitor would feel like he is visiting a new website but your domain URL will remain stick in the address bar.

This plugin will enclose the body layout of your blog with a custom stylesheet specified by the ID "MBT-REDIRECTION". We will then create two static pages. One for Demo page and one for download. Both these pages will contain an iframe tag with vacant source location. Using JavaScript we will inject a custom stylesheet that will cover the entire space between the two body tags. The JavaScript will also make sure no scroll bar appears in the window.

For the concatenation to work the link or button you create must include a Data-[content] attribute. Using Jquery we would pick the href location as string and then concatenate it next to the link of your Demo or download page.

With all that said, lets get to work. Kindly follow the easy steps below:

1. Create Demo and Download Pages

  1. Go To Blogger > Pages
  2. Create a Static Page with title Demo or any name you prefer
  3. Switch to its HTML view mode
  4. Replace the code inside it if any with the following code:

<div height="100%" id="iframe-container" width="100%">

<style>

body { padding: 0!important; background: none!important; }

#iframe-container { overflow: hidden; background: none!important; }

#frame { border: 0; }

</style>

<iframe frameborder="0" id="frame" src="" width="100%"> </iframe>

</div>

<script>
document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no"; // ie only
var query = window.location.search.substring(1);
query = query.replace("url=", "");
$('#frame').attr('src', query);
var str = $('#iframe-container').html();
$('#MBT-REDIRECTION').html(str);
$('iframe').height($(window).height());
</script>

  5.  Now setup up your blogger post editor settings. Click options and then under Line Breaks, choose "Use <br> tag" Hit Done.

post editor options

    6.  Save your page

   7. Now create another page with the title "Download". Repeat the exact same steps from Step#3 - Step#6

Note down the URL address of both these pages. We will use them later.

2. String Concatenation

Now we need to enclose the body tags and add an extra piece of jquery code inside the template that will do remaining half of the magic.

  1. Go To Blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. Search for <body>  or a similar by searching just <body
  5. Paste the following code just below it:

<div id='MBT-REDIRECTION'>

   6. Next find </body>

   7. Paste the following code just above it:


</div><!--MBT-REDIRECTION ENDS-->

    8. Now search for ]]></b:skin>

    9. Paste the following Jquery code just below it:

Update: Script updated

<script>

//<![CDATA[

$(document).ready(function () {
    $('[data-MBTdemo]').click(function (e) {
        e.preventDefault();
        var target = e.target || e.srcElement;
        if ($(target).attr('target') == "_blank") {
            window.open("http://www.mybloggertricks.com/p/demo.html?url=" + $(target).attr('href'), '_blank');
        } else {
            window.location = "http://www.mybloggertricks.com/p/demo.html?url=" + $(target).attr('href');
        }

    });


    $('[data-MBTdownload]').click(function (e) {
        e.preventDefault();
        var target = e.target || e.srcElement;
        if ($(target).attr('target') == "_blank") {
            window.open("http://www.mybloggertricks.com/p/download.html?url=" + $(target).attr('href'), '_blank');
        } else {
            window.location = "http://www.mybloggertricks.com/p/download.html?url=" + $(target).attr('href');
        }

    });

});

//]]>

</script>

 

  • Replace the orange highlighted code with the URL address of your Demo page.
  • Replace the green highlighted code with the URL address of your Download page.

      10.  Save your template and you are all done!

 

Now if you try visiting your demo and download pages you will find out a blank page with no content inside it. That's what our code does, injecting custom stylesheet by over riding the default template styles.

3. How to create Links?

Now when you have done all the development part of the tutorial, we come to a stage where we will learn to implement the functionality.

You will create links as you normally do and the only extra piece of information that you need to insert in them are the Data-Content attributes. This is how you need to do.

For Demo Link or Demo Button:

<a href="#" rel="nofollow" data-MBTdemo="true">DEMO</a>

 

For Download Link or Download Button:

<a href="#" rel="nofollow" data-MBTdownload="true">DOWNLOAD</a>

  • Replace the hash symbol (#) with your demo or download link

 

Update For Links opening in new tab

I have modified the code by using a conditional if statement that will open links in new tab if target="_blank" attribute is found else it will open the page in same window.

<a href="#" target="_blank"  rel="nofollow" data-MBTdownload="true">DOWNLOAD</a>

You can use redirect as many links per page as you want. The code is efficient enough to pick even an array of data-content attributes.  That simple!

You may now redirect any link inside your blog back to your domain address by giving a pro touch!  

Copyrights

The HTML code and all scripts in this tutorial are the sole property of STC Network. You may not sell the plugin nor affiliate the work to your brand. Developers are requested to link back to this page as the only favor in return if they wish to share the plugin with their audience.

Need help?

If you face any trouble while installing the plugin then please let us know. I just hope that this method of redirecting external links in blogger back to the root domain would help all those webmasters who share resources such as, ebooks, wallpapers, templates,. icons etc. You can even use it to redirect affiliate links! Please let us know if you would like further improvements in the code. Wish you a great blogging experience. Peace and blessings buddies :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

71 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Hello bro,if i will do the right and then open link in new tab..didn't work bro.how to do?

    Thanks..

    ReplyDelete
  2. Great Mohammad! I have also tried to code such an iframe redirection page for my Blogger blog. Failed! Never thought of jquery.
    Thanks for giving me a better idea. Amazing.

    Ahmad Khoirul Azmi @ buka-rahasia.blogspot.com.

    ReplyDelete
  3. Cool One (y)

    By the way, tomorrow MBT In Sha Allah is gonna enter 4k Alexa Rank

    CLAPPINGGGGGG !!!!!

    Party to banti hai Boss :P

    ReplyDelete
  4. I'm using this theme! it works perfectly well for me! ;)

    ReplyDelete
  5. Really good work mohammad. Highly technical and advanced. I seriously expected this FROM YOU! Just A word more..
    ...
    ...
    ...
    WOW

    :D

    ReplyDelete
  6. Hey Mustafa. DO you know you're genius? I like the way you add value to Blogger. Keep the good work sir.

    ReplyDelete
  7. Awesome work bro :>

    ReplyDelete
  8. Can't Understand Still... there is simple link in demo.....

    ReplyDelete
  9. Awesome, i will definitely try this p
    http://blogatoms.blogspot.com

    ReplyDelete
  10. I want to insert a sticky bar in the demo page. Is it possible?

    ReplyDelete
  11. Nice plugin and it would help a lot to all those who provide blogger templates for download and live demo for them.

    ReplyDelete
  12. MOHAMMAD SIR!! PLEASE HELP ME!! THERE IS A MASSIVE TROUBLE!

    AS YOU KNOW I BLOG ON WWW.MYPREMIUMTRICKS.COM, BY BLOG WAS SUDDENLY DELETED BY BLOGGER STATING AND EMAIL THAT IT IS SPAM. BUT I SWEAR I NEVER COPIED EVEN A SINGLE WORD ON MYPREMIUMTRICKS. PLEASE HELP ME SIR, WHAT SHOULD I DO!!!!!!!!!!!!!!!!!!!?????????????

    ReplyDelete
  13. MOHAMMAD SIR!! PLEASE HELP ME!! THERE IS A MASSIVE TROUBLE!

    AS YOU KNOW I BLOG ON WWW.MYPREMIUMTRICKS.COM, BY BLOG WAS SUDDENLY DELETED BY BLOGGER STATING AND EMAIL THAT IT IS SPAM. BUT I SWEAR I NEVER COPIED EVEN A SINGLE WORD ON MYPREMIUMTRICKS. PLEASE HELP ME SIR, WHAT SHOULD I DO!!!!!!!!!!!!!!!!!!!?????????????

    ReplyDelete
  14. @Mehul Mohan
    Hello Mehul Bro, You need to complaint it to Blogger Team as once a time my website was got the same thing but after i report it they take it back but it takes 3 days.

    ReplyDelete
  15. @Mehul Mohan: The most effective way is by making a post in Google Product Forum for Blogger. go to this url:
    http://productforums.google.com/forum/#!forum/blogger
    Make a post in "Something is broken" sub-forum. "How Do I" is okay, though.
    Don't forget to tell the problem in detail and provide your blog's url. (Create a title that shows your problem is really serious and needs immediate help)
    Attract Top Contributors' attention, such as Nitecruzr or DarkUfo, etc or Lisa (a Blogger rep). You MUST really prove (prepare data) that your problem is really serious and deleting your blog is a bug mistake. Good Luck!

    ReplyDelete
  16. @Mehul

    That is indeed a sad news buddy. Do not worry keep hopes high. Do these things:


    1. Contact Blogger now by clearly mentioning everything on this form: Contact Blogger Team


    2. make sure you answer everything clearly like why do you think the action taken against your blog is not justified.


    3. Backup your blogger database now by going to Blogger> Settings > Other > Export Blog

    4. Do as Ahmad Khoirul Azmi suggested because his points are valid


    5. Do nothing else. Have patience and wait for their response in next 24-48 hours


    I am here for more help pal.

    ReplyDelete
  17. @adrian
    About the links not opening in new window. I just figured out a way. Will surely update the code and inform via comments.

    @buka
    I so glad you liked the method. I am sure you must have done great too :)


    @sebin
    Will update the code in a while


    @Gulab
    Search for Facebook popup on our blog. You will find the popular one being used every where :)


    @Usama
    Could you kindly explain a bit more that what do you mean about redirecting comment links. If you mean the comment URLS. Then that isn't a bad idea! I will look into it because it is really easy to implement using data content :)


    @haider
    Tumaray mu me Gi shaker! :p Thanks for your prayer, we certainly hit 4K today. Thanks to all of you

    For party you must have been in here. ;d


    @emmanuel
    I am just the same old mohammad. :) Thanks for your generosity. :)

    @parwinder
    A pleasure pal

    @slim shady
    Oh glad you liked it captain. :))


    @aravind
    To insert a sticky bar or any div section you like just keep the MBT-redirection id below that div inside your template. This will hide the remaining content but not that div. :)


    @Mehul
    Your words are our source of motivation. A pleasure pal. Thank you :)



    @nguyen
    Pleasure pal :)

    @rahul

    Go click it first! :)

    ReplyDelete
  18. hi, the code is not working on my website www.o-alevel.com

    ReplyDelete
  19. @Mehul


    A post has been scheduled tonight especially for you. :)

    ReplyDelete
  20. Mohammad bhai I emailed you a email three times and be sure to check it because I really want you to know the info which that email contains :) But if you get angry on that then kindly send me feedback and I will do anything you say :>

    ReplyDelete
  21. The demos which we see in many blogger template sharing sites, holding their banner at top with each template demo. Is this the same method as that ?

    ReplyDelete
  22. awesome tricks bro realy
    u guys can also find some good tricks at www.techtricks.info

    ReplyDelete
  23. Update:

    The code has been updated so that it will recognize the _blank attribute and will open links in new tab.

    @slim shady
    I will surely check it buddy. University tests going on :)


    @nihalhaleem

    yes this is the exact same tool. :)

    ReplyDelete
  24. Hello Mohammed
    Thanks and is there any way to add just a navigation bar in the demo and download page ?

    ReplyDelete
  25. Thanks Mohammad, i have been looking for something like this but i tried it and it didnt work. '

    Do you have any solution or updates or another method?

    Thanks so much buddy.

    ReplyDelete
  26. This comment has been removed by the author.

    ReplyDelete
  27. When Click on demo or download links
    its shows a error "http://www.mybloggertricks.com/p/download.html?url=undefined"
    please fix it

    ReplyDelete
  28. Its showing like "download.html?url=undefined". How to fix it?

    ReplyDelete
  29. Hello Mohammad,
    What I could see is that the script works perfectly in chorme, IE and Opera. Already in Mozilla Firefox cause the following error download.html?url=undefined, that is, the script is incompatible with Firefox.


    Sincerely,
    Kaduh Santos

    ReplyDelete
  30. Dear Sir,

    I have a Blog hosted on Blogger and want to shift it from an existing custom domain to another custom domain without losing traffic and all.

    Got no place to ask, so posted here; kindly help, thanks in advance.

    ReplyDelete
  31. When i was trying in Demo blog it was showing error &amp;quot;Error parsing XML, line 2176, column 133: The element type &amp;quot;body&amp;quot; must be terminated by the matching end-tag &amp;quot;&amp;lt;/body&amp;gt;&amp;quot;...&amp;quot;

    What could be the solution ??

    Demo site is http://demo124.blogspot.in/

    ReplyDelete
  32. It's not working man

    @ Btemplate3s.blogspot.com

    All The link are have there own Url
    please update us
    Thanx

    ReplyDelete
  33. I think You are the best dude, thanks all for ur teach...cheers

    ReplyDelete
  34. Great, but I want to replace all outbound links, not my blog by adding a link like this?

    That are not possible?

    ReplyDelete
  35. How to make like this page ?
    http://goo.gl/9GBQ3

    ReplyDelete
  36. its really not work for me at templatezspot.com

    ReplyDelete
  37. Hai Mohammed Bhai
    It is not working in some templates ex apteachers.org

    ReplyDelete
  38. after implementing this code how to link back to you? To avoid copyright issues

    ReplyDelete
    Replies
    1. I have added below line in html

      /* Widget by http://www.mybloggertricks.com/
      copyright by mybloggertricks
      Dont edit without permission from the Copyright owner-------------------------------------*/

      Delete
  39. Code not Working! Please Help! its not showing my url but directly the other url where i am redirecting:(

    ReplyDelete
  40. This comment has been removed by the author.

    ReplyDelete
  41. Hey Mohammad, i appreciate this plugin. This is my favorite. Thank you very very veryvery much and a lot. I really love this one.

    ReplyDelete
  42. Update

    The script in step#9 has been updated and it works just fine. Thanks for reporting the problems.

    ReplyDelete
  43. Awesome post. Thanks

    <- - - - - - One quick question - - - - >
    Your article is just amazing. Please check this url : http://demo.dhetemplate.com/2013/08/kangis-magz-blogger-template.html
    Explanation Needed:
    demo.dhetemplate.com is a sub domain. I understood, when you open the given link you see it is redirecting to another demo site http://kangismagz.blogspot.in/. But the code is implemented in a blog post. How to implement in blog post? And You see a sticky bar on all demo pages how to implement it ( followed by next and prev links in bar ).
    In url you don't find any page like p/demo.html or p/download.html. And I don't think he is adding script code for every blog post to redirect. Hope mbt team would make this into consideration. Waiting for your reply sir.

    ReplyDelete
  44. Does it works with blogger free domain url or we have to own our own domain. As I tested it on blogger domain but its not working. Please do a reply.

    ReplyDelete
  45. Thanks sir...

    here is my website...
    www.books.pathlabstudy.com

    ReplyDelete
  46. It is not working on my blog
    please help me out

    ReplyDelete
  47. Yaa Its Not Working Showing as Undefinded

    ReplyDelete
  48. Not working - instead of Redirecting it's going to Address.

    ReplyDelete
  49. hi not working on https connection

    ReplyDelete
  50. Thanx for posting this i was looking for this a long time

    ReplyDelete
  51. Demo Link not working if > Right Click > Open Link New Tab

    ReplyDelete
  52. Hi Bro,
    I want to use this tricks with the images which i have on my blogger. i have created a page with the name of "Image"
    have installed your all script in my blogger template.
    now just guide me how it will work with images?
    its not working images any suggestion please.
    i am waiting for your quick response .

    ReplyDelete
  53. Really amazing..

    Latest bollywood songs are waiting for you here:
    http://entertainment-plateform.blogspot.com

    ReplyDelete
  54. m blogis redirected o templeteim plz messga me on ztareen98@gmail.com

    ReplyDelete
  55. Get Free Wapmaster Tutorials Of SEO - Wapsite Creating - Social Media Marketting Tips
    [url=http://www.howi.in/p/wapmaster-tools.html]Wapmaster Tutorials[/url]

    ReplyDelete
  56. i do not understand... i followed everything ... without result...i have a link A that i want my viewers to go.

    but if i put in the hush the link of the static page that we made what the difference from just a link that open? my link A where is it? i just see the empty blank page we made.
    what i made wrong. How can i see my link A inside the static page we made?

    thank you in advance

    ReplyDelete
  57. Oh man! you don't know how long I have been looking for this tuts until now, finally! i found it!

    How about adding an iframe box like this one? => http://2.bp.blogspot.com/-wrfYjC3IMj0/VfvXWh1ZMhI/AAAAAAAAAHA/u5apqv_vnt4/s1600/nav-blog.jpg

    Pls pls, update me on this one.. and I'm ready good to go.. Thanks man.

    ReplyDelete
  58. Hi, I can't seem to make it work. i followed everything, I even tested it on my other blog, it just doesn't work. Can you help me on this? I registered on your forum but I can't make a new topic yet.

    ReplyDelete
    Replies
    1. Sir when i set a demo page for other blog but how to show back my site button?

      Delete
  59. I am getting an error in the JQuery Code you have given in the 9th step. Its showing the below error after pasting the code.

    The element type "b:skin" must be terminated by the matching end-tag "

    ReplyDelete
  60. I have fixed the code (demo/download links now working) and I will update this post shortly

    ReplyDelete
  61. السلام عليكم
    Thank you brother for this topic
    I have been using the method on my blog for some time and it is very useful
    But it has become a problem
    Can you fix it
    After converting to HTTPS, web pages do not appear
    It appears blank without any content

    ReplyDelete