Blogging Ethics

MBT Tube

February 7, 2013

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 »

98 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Really useful, your a great blogger bro..thanks for giving this.keep sharing bro..

    Regards:
    www.bloggerheroe.com/

    ReplyDelete
  2. Hello bro,if i will do the right and then open link in new tab..didn't work bro.how to do?

    Thanks..

    ReplyDelete
  3. What an excellent and useful post! I'm really gonna implement it on my blog and share my results here.
    -------------------------------------------
    Daily technology

    ReplyDelete
  4. it is Awesome. Really bro keep it :)

    Regards
    Rahul Kashyap
    Blog: SDMMovies.com

    ReplyDelete
  5. 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
  6. This is really very useful info bro. thanks for sharing.

    www.NewBloggerTips.com

    ReplyDelete
  7. very nice thanks u so much for sharing but i will ask u 1 thing how to make a one time popup site on my blog

    I Recently Post On My Blog Avast! All Version With Key Download Free

    ReplyDelete
  8. Here must b a redirection Url in Comments link, Isn;t it??

    I was finding it from 1 year when i saw a blog of redirecting urls, I post it in many forums but gets no answer

    Free Premium Accounts

    ReplyDelete
  9. 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
  10. I'm using this theme! it works perfectly well for me! ;)

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

    :D

    ReplyDelete
  12. Very nice tip. I have a redirect page but it very slow. When I read your tip, I very like it.

    SEO

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

    ReplyDelete
  14. Nice job. Really sir your work is really awesome. I daily visit to your website. My website is HiFiFun.Com All Kind of tips and Tricks!

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

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

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

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

    ReplyDelete
  19. @Aravind Palla

    Aravind try to add a sticky bar code above this code in the demo or download page,I don`t know if it will work but this is just a guess or a personal view. :)

    ReplyDelete
  20. 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
  21. 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
  22. @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
  23. @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
  24. @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
  25. @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
  26. hi, the code is not working on my website www.o-alevel.com

    ReplyDelete
  27. @Mehul


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

    ReplyDelete
  28. 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
  29. 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
  30. awesome tricks bro realy
    u guys can also find some good tricks at www.techtricks.info

    ReplyDelete
  31. fantastic post bro u r great

    http://mybloggingclub.blogspot.com/

    ReplyDelete
  32. 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
  33. Google crawler will come or not come on your website but it is sure that crawler will go on social media sites and crawl your page from social media sites.
    India Dedicated SEO Services Company

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

    ReplyDelete
  35. we are on the process of getting design of our new website and this tips will sure make that we can solve issue of redirection on our website. Best Search Engine Optimization Services

    ReplyDelete
  36. 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
  37. This comment has been removed by the author.

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

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

    ReplyDelete
  40. 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
  41. Nice Trick Mohammad, i think it's very smart to use your blog as a url demo redirection, which it will add more professionally to you as a pro blogger, i want to say that you have new tricks everyday, hope you keep it up bro.

    i'm Abdelkarim from Morocco.

    ▁▂▃▄▅▆▇▉⇜Blogger♛Geek⇝▉▇▆▅▄▃▂▁

    Greeting.

    ReplyDelete
  42. 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
  43. it's not working sir plz any one tel me or video tutorial link plz
    dudes

    ReplyDelete
  44. Thanks this is very help full cause i just build a blog about blogger responsive template sharing

    ReplyDelete
  45. i had try this but this is not work on chrome, IE and firefox, any other ideas ? i want to implements this on my coloring pages blogs

    ReplyDelete
  46. 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
  47. It's not working man

    @ Btemplate3s.blogspot.com

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

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

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

    That are not possible?

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

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

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

    ReplyDelete
  53. 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
  54. Code not Working! Please Help! its not showing my url but directly the other url where i am redirecting:(

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

    ReplyDelete
  56. 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
  57. Update

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

    ReplyDelete
  58. 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
  59. 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
  60. Thanks sir...

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

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

    ReplyDelete
  62. Yaa Its Not Working Showing as Undefinded

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

    ReplyDelete
  64. Not working, no redirecting. Help me please!

    http://celahgoogle.blogspot.com/

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

    ReplyDelete
  66. hi not working on https connection

    ReplyDelete
  67. thanks for this buddy, So many steps but Cool....
    Regards,
    http://tronicflow.blogspot.com/

    ReplyDelete
  68. terimakasih sobat tutorialnya keren , ijin mencoba :D



    admin " Variasi Blogger "

    ReplyDelete
  69. Worked, on www.payzeroworld.com thank you.

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

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

    ReplyDelete
  72. sir not working on my blog i have applied all things correctly according to me see my page http://www.comlab.tk/2014/03/avira-system-speedup-1219800-full.html i have applied on this page.

    ReplyDelete
  73. hi Mohammad
    nice code but ... how to make these code more generic e.g. using the cycle like

    /* pseudocode */
    array linkscount;
    array anchorscount;
    for (i=0; i<linkscount;i++) {
    $('[data-MBT+anchorscount(i)]').click(function (e) {
    e.preventDefault();
    var target = e.target || e.srcElement;
    if ($(target).attr('target') == "_blank") {
    window.open(linkscount(i)?url=" + $(target).attr('href'), '_blank');
    } else {
    window.location = "linkscount(i)?url=" + $(target).attr('href');
    }
    });
    /* END pseudocode */

    ?

    thanks

    ReplyDelete
  74. Is there something wrong in this code??? thanks for help. :)
    Regards,
    Clipping Path

    ReplyDelete
  75. 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
  76. Really amazing..

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

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

    ReplyDelete
  78. I used this trick on my another blog. They are working. But I have been applied this trick on my Blogger Maruf Blog. But its not working. Brother, plz help me .

    My Demo Page Link: http://www.bloggermaruf.com/p/blog-page_14.html
    Download Page Link: http://www.bloggermaruf.com/p/blog-page_689.html

    ReplyDelete

Widgets + Web Designing

Workshops

SEO Mashup