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.
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
- Go To Blogger > Pages
- Create a Static Page with title Demo or any name you prefer
- Switch to its HTML view mode
- 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.
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.
- Go To Blogger > Template
- Backup your template
- Click Edit HTML
- Search for <body> or a similar by searching just <body
- 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 »
Mohammad
2/07/2013
Webmaster Tools
,
Widgets
Thanks! :)
ReplyDeleteHello bro,if i will do the right and then open link in new tab..didn't work bro.how to do?
ReplyDeleteThanks..
Great Mohammad! I have also tried to code such an iframe redirection page for my Blogger blog. Failed! Never thought of jquery.
ReplyDeleteThanks for giving me a better idea. Amazing.
Ahmad Khoirul Azmi @ buka-rahasia.blogspot.com.
Cool One (y)
ReplyDeleteBy the way, tomorrow MBT In Sha Allah is gonna enter 4k Alexa Rank
CLAPPINGGGGGG !!!!!
Party to banti hai Boss :P
I'm using this theme! it works perfectly well for me! ;)
ReplyDeleteReally good work mohammad. Highly technical and advanced. I seriously expected this FROM YOU! Just A word more..
ReplyDelete...
...
...
WOW
:D
Hey Mustafa. DO you know you're genius? I like the way you add value to Blogger. Keep the good work sir.
ReplyDeleteAwesome work bro :>
ReplyDeleteCan't Understand Still... there is simple link in demo.....
ReplyDeleteAwesome, i will definitely try this p
ReplyDeletehttp://blogatoms.blogspot.com
I want to insert a sticky bar in the demo page. Is it possible?
ReplyDeleteNice plugin and it would help a lot to all those who provide blogger templates for download and live demo for them.
ReplyDeleteMOHAMMAD SIR!! PLEASE HELP ME!! THERE IS A MASSIVE TROUBLE!
ReplyDeleteAS 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!!!!!!!!!!!!!!!!!!!?????????????
MOHAMMAD SIR!! PLEASE HELP ME!! THERE IS A MASSIVE TROUBLE!
ReplyDeleteAS 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!!!!!!!!!!!!!!!!!!!?????????????
@Mehul Mohan
ReplyDeleteHello 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.
@Mehul Mohan: The most effective way is by making a post in Google Product Forum for Blogger. go to this url:
ReplyDeletehttp://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!
@Mehul
ReplyDeleteThat 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.
@adrian
ReplyDeleteAbout 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! :)
hi, the code is not working on my website www.o-alevel.com
ReplyDelete@Mehul
ReplyDeleteA post has been scheduled tonight especially for you. :)
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 :>
ReplyDeleteThe 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 ?
ReplyDeleteawesome tricks bro realy
ReplyDeleteu guys can also find some good tricks at www.techtricks.info
Update:
ReplyDeleteThe 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. :)
Hello Mohammed
ReplyDeleteThanks and is there any way to add just a navigation bar in the demo and download page ?
Thanks Mohammad, i have been looking for something like this but i tried it and it didnt work. '
ReplyDeleteDo you have any solution or updates or another method?
Thanks so much buddy.
This comment has been removed by the author.
ReplyDeleteWhen Click on demo or download links
ReplyDeleteits shows a error "http://www.mybloggertricks.com/p/download.html?url=undefined"
please fix it
Its showing like "download.html?url=undefined". How to fix it?
ReplyDeleteHello Mohammad,
ReplyDeleteWhat 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
Dear Sir,
ReplyDeleteI 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.
Please Fix Firefox Bug
ReplyDeleteWhen i was trying in Demo blog it was showing error &quot;Error parsing XML, line 2176, column 133: The element type &quot;body&quot; must be terminated by the matching end-tag &quot;&lt;/body&gt;&quot;...&quot;
ReplyDeleteWhat could be the solution ??
Demo site is http://demo124.blogspot.in/
It's not working man
ReplyDelete@ Btemplate3s.blogspot.com
All The link are have there own Url
please update us
Thanx
I think You are the best dude, thanks all for ur teach...cheers
ReplyDeleteGreat, but I want to replace all outbound links, not my blog by adding a link like this?
ReplyDeleteThat are not possible?
How to make like this page ?
ReplyDeletehttp://goo.gl/9GBQ3
Thanks!. i love it. :D
ReplyDeleteits really not work for me at templatezspot.com
ReplyDeleteHai Mohammed Bhai
ReplyDeleteIt is not working in some templates ex apteachers.org
after implementing this code how to link back to you? To avoid copyright issues
ReplyDeleteI have added below line in html
Delete/* Widget by http://www.mybloggertricks.com/
copyright by mybloggertricks
Dont edit without permission from the Copyright owner-------------------------------------*/
Code not Working! Please Help! its not showing my url but directly the other url where i am redirecting:(
ReplyDeleteyes code aren'tworking
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHey Mohammad, i appreciate this plugin. This is my favorite. Thank you very very veryvery much and a lot. I really love this one.
ReplyDeleteUpdate
ReplyDeleteThe script in step#9 has been updated and it works just fine. Thanks for reporting the problems.
sir how to this in wordpress?
ReplyDeleteAwesome post. Thanks
ReplyDelete<- - - - - - 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.
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.
ReplyDeleteThanks sir...
ReplyDeletehere is my website...
www.books.pathlabstudy.com
It is not working on my blog
ReplyDeleteplease help me out
Yaa Its Not Working Showing as Undefinded
ReplyDeleteNot working - instead of Redirecting it's going to Address.
ReplyDeletehi not working on https connection
ReplyDeleteThanx for posting this i was looking for this a long time
ReplyDeleteexcellent bro
ReplyDeleteDemo Link not working if > Right Click > Open Link New Tab
ReplyDeleteHi Bro,
ReplyDeleteI 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 .
Really amazing..
ReplyDeleteLatest bollywood songs are waiting for you here:
http://entertainment-plateform.blogspot.com
m blogis redirected o templeteim plz messga me on ztareen98@gmail.com
ReplyDeleteGet Free Wapmaster Tutorials Of SEO - Wapsite Creating - Social Media Marketting Tips
ReplyDelete[url=http://www.howi.in/p/wapmaster-tools.html]Wapmaster Tutorials[/url]
i do not understand... i followed everything ... without result...i have a link A that i want my viewers to go.
ReplyDeletebut 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
Wow this is awesome trick!!!
ReplyDeleteOh man! you don't know how long I have been looking for this tuts until now, finally! i found it!
ReplyDeleteHow 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.
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.
ReplyDeleteSir when i set a demo page for other blog but how to show back my site button?
Deletei need some help in this.
ReplyDeleteI am getting an error in the JQuery Code you have given in the 9th step. Its showing the below error after pasting the code.
ReplyDeleteThe element type "b:skin" must be terminated by the matching end-tag "
I have fixed the code (demo/download links now working) and I will update this post shortly
ReplyDeleteالسلام عليكم
ReplyDeleteThank 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