How To Create a Redirect Page For External Links[Automatic & Manual] For Blogger

Today I will share with you in this tutorials How To Create a Redirect Page For External Links[Automatic & Manual] For Blogger, this page can contains your ads, so more earning....
First Let show a preview of our page:


Now, we are ready to start our method step by step let's do it..

Step 1:Go to Blogger.com >> Pages >> New Page
Copy Paste The code Bellow
<div dir="ltr" style="text-align: center;" trbidi="on">
<style type="text/css">
* html #exestylepopupdiv {position:absolute;}
#ediv {z-index: 999999;display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXdf65MTb82T5lN5FSzlIndEMqxeNIDoE7_RlQcyQHRHLg7mVbAEG9kyo9xekG9S7y7JOE98JjlS1RZobt1Kcj7pUxnnTZjx_KwQ-MU-RTgV0pi9lUUEbnPaHCVKT8QACNTmceUkZI6Q/s128/exeideasopacity0.5.png');margin:0; overflow-y:auto;}
#ep {background-color: #fff; overflow:none;}
.ep {width:100%!important; height:100%!important; position:fixed!important;}
body {
overflow:hidden;
display:block;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->

<br />
<div id="ediv">
<div class="ep" id="ep">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
You will be redirected after <span id="countdown"> 5 </span> Second(s) </div>
<a href="https://bloggerwidgets4free.blogspot.com#" id="reload"></a>
<i class="fa fa-spinner fa-spin" style="font-size: 45px;"></i>
<script type="text/javascript">
var seconds;
var temp;
function removem1() {
var xkl = getQueryVariable("url");
var nkl=xkl.replace("&m=1", "");
document.getElementById("reload").innerHTML=nkl;
}
removem1();
document.getElementById('reload').href=window.location.href;
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("?&&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=_");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
function countdown() {
seconds = document.getElementById('countdown').innerHTML;
seconds = parseInt(seconds, 10);

if (seconds == 0) {
temp = document.getElementById('countdown');
parent.location.replace(document.getElementById("reload").innerHTML)
return;
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML = seconds;
timeoutMyOswego = setTimeout(countdown, 1500);
}
setTimeout(function(){ countdown(); }, 5000);
</script>
<a href="https://bloggerwidgets4free.blogspot.com/" style="display: none;">Widgets4free</a>
<br />
<center>
<div style="border: 2px solid #000; display: block; width: 730px;">
<!--Your_Code_of_Ads_Here-->
Place Your Ads Here
<!--Your_Code_of_Ads_Here-->
</div>
</center>
</div>
</div>
</div>
Chnage The Red with your number of seconds and the Blue with seconds before the Countdown start (1 Second = 1000).
Step 2 : Go to Blogger.com >> Template >> Edit template
copy paste the code bellow after the Tag </b:skin>
<b:if cond='data:blog.url == "https://bloggerwidgets4free.blogspot.com/p/redirect.html"'>
<style>
body {display:none;}
</style>
</b:if>
Change the Red with URL of redirection Page Created in Step 1.
Step 3: How To Use This Page

  • Part 1: Automatic redirection of external links

Chapter 1 :All External links
in this chapter, we want to redirect any external links to this page.So to do that go to Template >> Edit Template and search of this tag </body> and copy paste this code before it
<script type='text/javascript'>
//<![CDATA[
var GetAllExternalLinks=document.getElementsByTagName("a");
for(var c=0;c<GetAllExternalLinks.length;c++)
{
if(GetAllExternalLinks[c].hostname!="bloggerwidgets4free.blogspot.com" && GetAllExternalLinks[c].hostname!="")
{
GetAllExternalLinks[c].href="https://bloggerwidgets4free.blogspot.com/p/redirect.html??&&url=_"+GetAllExternalLinks[c].href;
}
}
//]]>
</script>
Change The Red with your blog domain and The Blue with URL of Redirect Page

Chapter 2 :External links with specific ID
in this chapter, we will redirect only external links with specific ID.See Example bellow

<a href="Link_Here" id="mustredirect">Your_Link_Text</a>

So every link with Id="mustredirect" will be redirected if you copy paste the code bellow before </body> Tag
<a href="http://bloggerwidgets4free.blogspot.com/" style="display:none;">Widget4free</a>
<script type='text/javascript'>
var anchors = document.querySelectorAll("#mustredirect");
Array.prototype.forEach.call(anchors, function (element, index) {
var url = element.href;
var arr = url.split("/");
var result =arr[2];
if (result!="bloggerwidgets4free.blogspot.com") {
element.href = "https://bloggerwidgets4free.blogspot.com/p/redirect.html??&&url=_"+element.href;
}
});
</script>
Change The Red with your blog domain and The Blue with URL of Redirect Page.
Note if you change The Id from the link you must change it from the script above.

  • Part 2 :Manual redirection
you can use it by placing your link at the end of the link bellow:
https://bloggerwidgets4free.blogspot.com/p/redirect.html??&&url=_XXXXXX
Change The Blue with you URL of Redirect Page and The Red with external link
Example :
https://bloggerwidgets4free.blogspot.com/p/redirect.html??&&url=_http://www.google.com

That's it, if you  have a question put it in comment box.

Tags: