Pemrograman • Trick

Cara Membuat Redirect/Pengalihan Link Dengan Javascript

5 tahun ago
2 Comments
by Kahfie IDN

Cara Membuat Redirect/Pengalihan Link URL otomatis Dengan Html css dan Javascript Dengan countdown timer hitungan waktu mundur. Cara mengalihkan halaman Website atau Blog Ke halaman lain. Halo sobat blogger kali ini admin jagoankode akan membahas mengenai cara mengalihkan URL/link suatu website kepada halaman yang kita inginkan. Nah sebenarnya untuk membuat redirect suatu link dapat dilakukan dengan javascript pembuatannya juga sangat mudah sekali. Bahkan dengan script yang nanti akan saya bagikan bisa anda modifikasi sesuai keinginan anda .

Banyak sekali bahasa pemrograman yang bisa membuat redirect suatu link. salah satunya ialah menggunakan javasript. kenapa kali ini admin hanya membagikan dengan javascript karna pengunaannya sangat mudah sekali dan juga bisa kita buat di platform blogger gratisan. Pembuatan redirect link sendiri bisa kita kreasikan dengan mengunakan waktu. Jadi maksudnya kita bisa mengeksekusi suatu link dengan waktu yang ditentukan sebelum pada akhirnya halaman tersebut akan teralihkan kehalaman lainnya.

Contohnya seperti gambar berikut ini :

Script diatas saya letakan tepat didalam HTML blogger anda juga bisa mengkreasikannya didalam postingan ataupun ditempat temat lainnya yang anda inginkan.Nah untuk pembuatannya sangat mudah kita hanya perlu meletakan script dibawah ini kehalaman yang ingin anda buat redirect linknya

Untuk Demonya anda bisa lihat pada Link Berikut :

Cara Membuat Redirect/Pengalihan Link Dengan Javascript

Cara Membuat Redirect/Pengalihan LinkURL Otomatis Dengan Javascript

Oke sekarang kita akan masuk kepada proses pembuatannya, anda bisa meletakan script berikut di area postingan blog ataupun di html blog anda.

Baca Juga:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            var url = "https://jagoankode.blogspot.com/"; // url tujuan
            var count = 10; // dalam detik
            function countDown() {
                if (count > 0) {
                    count--;
                    var waktu = count + 1;
                    $('#kata').html('<b>Halaman Ini Akan Otomatis Di Redirect KE </b> ' + url + ' dalam ' + waktu + ' detik.');
                    setTimeout("countDown()", 1000);
                } else {
                    window.location.href = url;
                }
            }
            countDown();
        </script>
<html>
<head>
<style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<center>
<body>
<b>please disable adblock and active javasript to acess this page... if you use ucbrowser or operamini change it to default browser, because that browser disable javascript function.</b>
<br />
<center style="color: red;">
if you not redirected to download page click <a href="https://jagoankode.blogspot.com/"><b>HERE</b></a>
<br />
<div class="loader">
</div>
</center>
</body>
</center>
</html>

Catatan :
Ganti : https://jagoankode.blogspot.com/ dengan link yang anda punya
Ganti : var count = 10 dengan waktu pengalihan yang anda inginkan
Ganti : Tulisan Biru dengan kata kata anda

Redirect Link Part 2

Jika anda ingin sekali membuat redirect link dengan animasi yang lain seperti gambar dibawah ini

Pengalihan Link Javascript

Langkah pembuatannya sangatlah mudah sekali anda tinggal mengcopy script berikut ini :

<html>
<head>
<style>
#fountainG{position:relative;width:234px;height:28px;margin:auto;}.fountainG{position:absolute;top:0;background-color:rgb(0,0,0);width:28px;height:28px;animation-name:bounce_fountainG;-o-animation-name:bounce_fountainG;-ms-animation-name:bounce_fountainG;-webkit-animation-name:bounce_fountainG;-moz-animation-name:bounce_fountainG;animation-duration:1.5s;-o-animation-duration:1.5s;-ms-animation-duration:1.5s;-webkit-animation-duration:1.5s;-moz-animation-duration:1.5s;animation-iteration-count:infinite;-o-animation-iteration-count:infinite;-ms-animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-direction:normal;-o-animation-direction:normal;-ms-animation-direction:normal;-webkit-animation-direction:normal;-moz-animation-direction:normal;transform:scale(.3);-o-transform:scale(.3);-ms-transform:scale(.3);-webkit-transform:scale(.3);-moz-transform:scale(.3);border-radius:19px;-o-border-radius:19px;-ms-border-radius:19px;-webkit-border-radius:19px;-moz-border-radius:19px;}#fountainG_1{left:0;animation-delay:0.6s;-o-animation-delay:0.6s;-ms-animation-delay:0.6s;-webkit-animation-delay:0.6s;-moz-animation-delay:0.6s;}#fountainG_2{left:29px;animation-delay:0.75s;-o-animation-delay:0.75s;-ms-animation-delay:0.75s;-webkit-animation-delay:0.75s;-moz-animation-delay:0.75s;}#fountainG_3{left:58px;animation-delay:0.9s;-o-animation-delay:0.9s;-ms-animation-delay:0.9s;-webkit-animation-delay:0.9s;-moz-animation-delay:0.9s;}#fountainG_4{left:88px;animation-delay:1.05s;-o-animation-delay:1.05s;-ms-animation-delay:1.05s;-webkit-animation-delay:1.05s;-moz-animation-delay:1.05s;}#fountainG_5{left:117px;animation-delay:1.2s;-o-animation-delay:1.2s;-ms-animation-delay:1.2s;-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;}#fountainG_6{left:146px;animation-delay:1.35s;-o-animation-delay:1.35s;-ms-animation-delay:1.35s;-webkit-animation-delay:1.35s;-moz-animation-delay:1.35s;}#fountainG_7{left:175px;animation-delay:1.5s;-o-animation-delay:1.5s;-ms-animation-delay:1.5s;-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;}#fountainG_8{left:205px;animation-delay:1.64s;-o-animation-delay:1.64s;-ms-animation-delay:1.64s;-webkit-animation-delay:1.64s;-moz-animation-delay:1.64s;}@keyframes bounce_fountainG{0%{transform:scale(1);background-color:rgba(33,98,196,0.98);}100%{transform:scale(.3);background-color:rgb(92,90,92);}}@-o-keyframes bounce_fountainG{0%{-o-transform:scale(1);background-color:rgba(33,98,196,0.98);}100%{-o-transform:scale(.3);background-color:rgb(92,90,92);}}@-ms-keyframes bounce_fountainG{0%{-ms-transform:scale(1);background-color:rgba(33,98,196,0.98);}100%{-ms-transform:scale(.3);background-color:rgb(92,90,92);}}@-webkit-keyframes bounce_fountainG{0%{-webkit-transform:scale(1);background-color:rgba(33,98,196,0.98);}100%{-webkit-transform:scale(.3);background-color:rgb(92,90,92);}}@-moz-keyframes bounce_fountainG{0%{-moz-transform:scale(1);background-color:rgba(33,98,196,0.98);}100%{-moz-transform:scale(.3);background-color:rgb(92,90,92);}}
</style>
</head>
<center>
<body>
please disable adblock and active javasript to acess this page... if you use ucbrowser or operamini change it to default browser, because that browser disable javascript function.
<br />
<center style="color: red;">
if you not redirected to download page click <a href="https://jagoankode.blogspot.com/"><b>HERE</b></a>
<br />
<div class="loader">
</div>
</center>
<div id="fountainG">
 <div class="fountainG" id="fountainG_1">
</div>
<div class="fountainG" id="fountainG_2">
</div>
<div class="fountainG" id="fountainG_3">
</div>
<div class="fountainG" id="fountainG_4">
</div>
<div class="fountainG" id="fountainG_5">
</div>
<div class="fountainG" id="fountainG_6">
</div>
<div class="fountainG" id="fountainG_7">
</div>
<div class="fountainG" id="fountainG_8">
</div>
</div>
</body>
</center>
</html>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            var url = "https://jagoankode.blogspot.com/"; // url tujuan
            var count = 10; // dalam detik
            function countDown() {
                if (count > 0) {
                    count--;
                    var waktu = count + 1;
                    $('#kata').html('<b>Halaman Ini Akan Otomatis Di Redirect KE </b> ' + url + ' dalam ' + waktu + ' detik.');
                    setTimeout("countDown()", 1000);
                } else {
                    window.location.href = url;
                }
            }
            countDown();
        </script>

Catatan :
Ganti : https://jagoankode.blogspot.com/ dengan link yang anda punya
Ganti : var count = 10 dengan waktu pengalihan yang anda inginkan
Ganti : Tulisan Biru dengan kata kata anda

anda bisa memodifikasi kode diatas dengan kode anda sendiri. Demikianlah tutorial admin mengenai Cara Membuat Redirect/Pengalihan Link Dengan Javascript. semoga informasi ini dapat membantu 🙂

You may also like

About the author

Kahfie IDN

Pengetahuan adalah kebebasan, dan ketidaktahuan adalah perbudakan.

View all posts

Leave a Comment

2 Comments