Minggu, 14 Juli 2013

Membuat halaman redirect diblogger


Entah sudah berapa ratus kali (gak sampe juga sih) aku mengelilingi dunia maya ini tapi belum ada satupun aku temukan tutorial yang aku cari yaitu redirect halaman menggunakan javascript, tapi beruntungnya, dengan beberapa koleksi javascript yg ada diblog ini akhirnya aku bisa menggabungkan dan sedikit menambahkan/memodifikasi kodenya sehingga bisa menjadi fungsi redirect page yang (lumayan) mirip dengan redirect website2 yang menggunakan system redirect seperti Google, Facebook dan lain-lain.

Kalau versi aku sih aku membuat satu halaman (page) yang kosong alias tidak ada isinya sama sekali, fungsinya sebagai halaman redirect. kan kalau sistem redirect website2 tuh, pasti pertamanya linknya menuju kesebuah halaman yang khusus untuk meredirect page/halaman. nah pada halaman kosong tersebut aku mengisikan javascriptnya yang fungsinya untuk meredirect URL. Alasan page/halamannya kosong agar redirect pagenya lebih cepat. Bisa juga tidak menggunakan Halaman kosong, dengan cara langsung menyimpan kodenya secara bersamaan.

1. Simpan kode javascript dibawah ini diatas </head>

<script type='text/javascript'>
  //<![CDATA[
var link = 'http://nama_blog_anda.blogspot.com';//ganti dengan nama blog anda
function outLinks() {
  var outLink;
  if (document.getElementsByTagName('a')) {
    for (var i = 0; (outLink = document.getElementsByTagName('a')[i]); i++) {
      if (outLink.href.indexOf(link) == -1) {
 var f = outLink.href;
//Ubah http://zhinto.blogspot.com/p/test-coded.html dengan halaman kosong anda.
        outLink.setAttribute('href','http://zhinto.blogspot.com/p/test-coded.html?redirect='+encodeURIComponent(f));
 outLink.setAttribute('target','_blank');
      }
    }
  }
}
if (window.addEventListener) {
    window.addEventListener("DOMContentLoaded", outLinks, false);
} else if (window.attachEvent) {
    window.attachEvent("onreadystatechange", outLinks);
}
//]]>
</script>

Fungsi script diatas untuk mengubah link external agar menjadi link redirect.

Nah Struktur Template pada halaman kosong tersebut seperti ini..

<!DOCTYPE html>
<HTML>
<head>
</head>
<body>
</body>
</html>

Lalu diantara <head>...</head> simpan javascript dibawah ini.

<script type='text/javascript'>
//<![CDATA[
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);
}
var g = getQueryVariable('redirect');
if(window.location.search.indexOf('redirect') != -1){
window.location.replace(decodeURIComponent(g))
}
//]]>
</script>

Jadi seperti ini.

<!DOCTYPE html>
<HTML>
<head>
<b:if cond='data:blog.url == "URL halaman kosong"'>
<script type='text/javascript'>
//<![CDATA[
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);
}
var g = getQueryVariable('redirect');
if(window.location.search.indexOf('redirect') != -1){
window.location.replace(decodeURIComponent(g))
}
//]]>
</script>
</b:if>
</head>
<body>
</body>
</html>

Lalu bagaimana kita mengosongkan isi template..?? caranya adalah menggunakan tag kondisional, perhatikan struktur HTML template anda, contoh (anggap sebagai struktur template kita).

<!DOCTYPE html>
<HTML>
<head>
<b:skin>
....
...
</b:skin>
</head>
<body>
<div class='header'>
...
</div>
</body>
</html>

Cara memberi tag kondisional,

<!DOCTYPE html>
<HTML>
<head>
<b:if cond='data:blog.url != "URL halaman kosong"'>
<b:skin>
....
...
</b:skin>
</b:if>
</head>
<body>
<b:if cond='data:blog.url != "URL halaman kosong"'>
<div class='header'>
...
</div>
</b:if>
</body>
</html>

Perhatikan baik-baik tag kondisional pembuka harus tepat dibawah <head> Lalu tag kondisional penutup harus berada tepat diatas </head> begitu juga tag kondisonal pada <body> dengan begitu kosonglah template kita walaupun gak 100% kosong, karena masih ada kode default blogger yang tidak bisa dihapus.

Atau jika anda bingung dengan kode diatas, anda bisa menggunakan cara kedua yaitu dengan cara menyimpan langsung kode javascript dibawah ini, Dibawah kode <head>

<script type='text/javascript'>
  //<![CDATA[
var link = 'http://nama_blog_anda.blogspot.com';//ganti dengan nama blog anda
function outLinks() {
  var outLink;
  if (document.getElementsByTagName('a')) {
    for (var i = 0; (outLink = document.getElementsByTagName('a')[i]); i++) {
      if (outLink.href.indexOf(link) == -1) {
 var f = outLink.href;
        outLink.setAttribute('href',window.location.href+'?redirect='+encodeURIComponent(f));
 outLink.setAttribute('target','_blank');
      }
    }
  }
}
if (window.addEventListener) {
    window.addEventListener("DOMContentLoaded", outLinks, false);
} else if (window.attachEvent) {
    window.attachEvent("onreadystatechange", outLinks);
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
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);
}
var g = getQueryVariable('redirect');
if(window.location.search.indexOf('redirect') != -1){
window.location.replace(decodeURIComponent(g))
}
//]]>
</script>

Jika anda menggunakan cara ini, biasanya halaman harus dimuat terlebih dahulu lalu halaman akan redirect. itu pilihan anda terserah mau menggunakan cara pertama atau kedua. silahkan lihat Contoh yang menggunakan metode kedua

CONTOH