Did you ever seen a webpage like this:
I wonder how they could keep the traffic for their host. IS it true that people use this method too keep their main domain traffic. I found something usefull and aplly a my blog themes at first for testing. Now, lets go through it.
YOu could see this kind of method through many sites, but rarely with a blogger. Now, with this helpfull HTML/Jave script, you could enjoy it and feel the power, easy and especially FREE of this great service.
Demo
Download
For sample: I want to redirect my viewer ot the demo of BTNT site, a blog themes site, and the Download redirect them to thee main page, where people could find a download BTNT blog theme there.
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 "http://freecoat.blogspot.com/". 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.
You must check for sure that you have intro jQuerry first. So, search for this tag and check some lines below it about jQuerry. I you found nothing like that, you need to add this line to tell Web Browser that you have something need to control by jQueery
You must check for sure that you have intro jQuerry first. So, search for this tag
With all that said, lets get to work. Kindly follow the easy steps below:
- 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>
- Now setup up your blogger post editor settings. Click options and then under Line Breaks, choose "Use <br> tag" Hit Done.
- Save your page
- 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'>
- Next find </body>
- Paste the following code just above it:
</div><!--MBT-REDIRECTION ENDS-->
- Now search for ]]></b:skin>
- Paste the following Jquery code just below it:
Script
<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://sitesmyself.blogspot.com/p/demo.html?url=" + $(target).attr('href'), '_blank'); } else { window.location = "http://sitesmyself.blogspot.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://sitesmyself.blogspot.com/p/download.html?url=" + $(target).attr('href'), '_blank'); } else { window.location = "http://sitesmyself.blogspot.com/p/download.html?url=" + $(target).attr('href'); } }); }); //]]> </script>
- Change color paragraph by your URL of Demo, Download static page you've made already.
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?
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.
- 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
Opening in new tab
You have two options when open a hyper link. Onpage or on a new windows. With this kind of link, you should open it in a new tab to keep the user stay longer on your blog.
You have to modify 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.
0 comments