Cara Advance Redirect untuk Blog yang Telah Migrasi dengan Menggunkaan JavaScript

Blogger, CMS, Javascript, Programing, Programming, Tutorial, Website

Melanjutkan tutorial redirect yang sebelum nya telah dipublikasikan oleh salah 1 team member kami yaitu AR tentang Redirect URL BLOG, pada kesempatan kali ini saya akan membahas tentang redirect juga namun lebih lanjut.

Cara Advance Redirect untuk Blog yang Telah Migrasi dengan Menggunkaan JavaScript

Terkait pembasahan yang mendasar mungkin tidak perlu saya jelaskan lagi ya. Jika rekan-rekan untuk membaca artikel tersebut anda dapat mengaksesnya melalui link berikut : Cara Redirect URL atau Alamat Blog yang Telah Migrasi.

Perbedaan Redirect  dan Advance Redirect

Sebenarnya terkait 'Advance Redirect' hanyalah sekedar istilah yang saya gunakan untuk membedakan dengan artikel sebelumya. Dalam case ini saya hanya berniat untuk berbagi pengetahuan tentang cara melakukan redirect url post pada blog yang telah migrasi atau telah ke domain baru dengan option yang lebih dimanis yaitu dengan menerapkan JavaScript.

Perbedaan artikel redirect kali ini memiliki embel-embel berupa 'Advance' dengan artikel sebelumnya adalah :

  • Seperti halnya dengan artinya redirect adalah meneruskan, Pada kesempatan ini kita akan melakukan redirect pada semua content post dari suatu blog ke blog lain.
  • Bahakan jika anda cukup ahli dalam mengembangkan code yang saya bagikan, anda dapat mepersingkat dan  menredirect semua url pada blog anda.
  • Disini kita akan bersenang-senang bermain-main dengan menggunakan bahasa pemrograman JavaScript untuk mengimplemantasikan redirect. 

Struktur URL

Sebelum kita membahas tentang codingan, sebelumnya mari kita pelajari structur dulu URL. Mohon maaf sebelumnya saya tidak membasah tentang detail URL, saya hanya akan membahas bagian-bagian yang mungkin akan kita ganti nantinya.

Berikut adalah contoh url dari salah 1 post di blog kami :

https://langittutorial.blogspot.com/2019/10/cara-redirect-url-atau-alamat-blog-yang-telah-migrasi-ke-blog-lain.html

Atau mingkin untuk lebih detailnya berikut :

  • https : Hypertext Transfer Protocol Secure, versi secure transfer protocol yang digunakan untuk mendukung komunikasi atau transfer data pada suatu website.
  • langittutorial.blogspot.com : Domain, atau main url (Home) dari blog anda.
  • 2019 : Format tahun, tahun yang tercantum biasanya merupakan tahun dimana artikel tersebut dipublish
  • 10 : Format bulan, bulan yang juga merupakan bulan dimana artikel tersebut dipublish. terkait bulan dan tahun ini bisa di custom untuk dihilangakan jika rekan-rekan menggunakan wordpress. kalau diblogger sepertinya belum bisa ya.
  • cara-redirect-url-atau-alamat-blog-yang-telah-migrasi-ke-blog-lain : content slug, yang merupakan identiy dari articel atau post anda.
  • html : saya rasa adalah sudah pasti format file. Meskipun sejujurnya saya juga kurang tau mekanisme storage post dan artikel pada blogger dari sisi backendnya.
Jadi kita akan redirect adalah halaman blog berupa artikel atau post, dengan mengenal bagian-bagian dari url tersebut maka akan memudahkan kita dalam memanipulasinya nanti.

Beberapa Command JavaScript yang dapat di Implementasikan pada

Satu hal lagi yang mungkin perlu saya bahas sedikit tenang beberapa function / command pada JavaScript yang beririsan dengan kasus kita kali ini dan dapat diimplementasikan dalam advance redirect.

A. Window Location

Window Location, adalah object yang menyimpan informasi tentang current url yang sedang diakses pada suatu window. Untuk window location lebih lanjutnya lagi akan saya bahas di artikel lain. Anyway yang kita butuhkan pada case ini adalah berikut:

  1. window.location.href, adalah command untuk mengekstrak atau mengambil url pada address bar browser anda.
  2. window.location.assign, adalah command untuk meredirect window ke url target.

B. String Manipulation

String Manipulation, Memanipulasi variable yang memiliki typedata String atau Text. Cara penggunaan string manipulation yaitu dengan mendekalrasikan variable dengan tipedata String lalu, dapat diikut dengan '.' titik dan dilanjutkan dengan command nya. Contoh pendeklarasian string varibale di JavaScript:

let teks = 'Belajar Coding';
console.log(teks); // hasil: Belajar Coding

Berikut beberapa contoh command yang dapat anda implemantasikan pada case Advence Redirect:

  1. .replace(), adalah command yang dapat anda gunakan untuk mengganti string yang cocok dengan string yang baru. Bisa dikatakan bahwa proses di dalam command .replace() menerapkan regular expression (Regex). Berikut contoh source code nya:

    teks.replace('Belajar', 'Mencoba');
    console.log(teks); // hasil: Mencoba Coding

  2. .toLowerCase(), adalah command untuk mengubah string menjadi lower case, karena pada dasarnya url itu sangatlah sesitive case. Berikut contoh source code nya:

    teks.toLowerCase();
    console.log(teks); // hasil: mencoba coding

C. Array

Okey, baiklah saya anggap rekan-rekan sudah paham dengan Array. Untuk kedepannya mungkin akan saya bahas lebih detail tentang array di artikel lain ya. Intinya Array dalam case ini akan diimplementasikan untuk menyimpan data yang terstruktur. Berikut adalah contoh pendeklarasiannya :

let dataArr = [];
dataArr = ['Sky', 'Light', 'Animation'];
console.log(dataArr[0].dataArr[1]); // hasil: SkyLight

Anyway berikut command yang dapat kita implementasikan dalam case advance redirect:

  1. .findIndex(), adalah command yang dapat anda gunakan untuk mencari index suatu nilai dari pada variable yang memiliki tipe data array. Berikut contoh source code untuk mencari index pada Array by value :

    let index = dataArr.findIndex(item => item == 'Animation');
    console.log(index); // hasil: 2

D. Array Object

Tidak puas dengan pengguaan Array, dalam case ini saya menutuskan juga untuk mengimplementasikan Array Object, memenag karena bagi saya lebih mudah untuk diimplemantasi. Berikut adalah contoh pendeklarasiannya dari Array Object:

let dataArrObject = [
{
'text':'Cara Redirect URL atau Alamat Blog yang Telah Migrasi',
'url':'https://footstepofthedragon.blogspot.com/2025/09/cara-redirect-url-atau-alamat-blog-yang-telah-migrasi-ke-blog-lain.html'
},
{
'text':'Cara Advance Redirect untuk Blog yang Telah Migrasi dengan Menggunkaan JavaScript',
'url':'https://footstepofthedragon.blogspot.com/2025/09/cara-advance-redirect-untuk-blog-yang-telah-migrasi-dengan-menggunkaan-javascript.html'
},
];

Kemudahan dari implemantasi Array Object adalah pengaksesan datanya, seperti pada contoh code berikut :

console.log(dataArrObject[0].text); // hasil: Cara Redirect URL atau Alamat Blog yang Telah Migrasi
console.log(dataArrObject[1].url); // hasil: https://footstepofthedragon.blogspot.com/2025/09/cara-advance-redirect-untuk-blog-yang-telah-migrasi-dengan-menggunkaan-javascript.html

Dalam Array Object dapat mengimplementasikan juga command parktis untuk mencari index seperti yang saya jelaskan sebelumnya di atas .findIndex(). Berikut adalah contoh source code untuk mencari index pada Array Object by value :

let indexArrObject = dataArrObject.findIndex(item => item.url == 'https://footstepofthedragon.blogspot.com/2025/09/cara-advance-redirect-untuk-blog-yang-telah-migrasi-dengan-menggunkaan-javascript.html');
console.log(indexArrObject); // hasil: 1, karena url tersebut tersimpan pada index 1.
let indexArrObject = dataArrObject.findIndex(item => item.url == 'coba dengan data yang salah!')
console.log(indexArrObject); // hasil: -1

Dalam case ini dapat dianalogikan dilakukan pengecekkan untuk url di tiap-tiap row dan akan return ketika mendapatkan nilai yang sesuai dengan kondisi, namun jika tidak dapat ditemukan data yang cocok maka akan menghasilkan nilai -1.

Berikut Tutorial Advance Redirect post dan Artikel blog.

Pada Artikal kali ini saya akan membagikan 2 metode tekait advance redirect. Nah, berikuti inilah masing-masing caranya:

A. Replace Domain

Sesuai dengan namanya Replace Domain, mengganti text bagian domainnya saja. Cara ini cocok untuk diimplementasikan untuk blog yang migrasi dari platform yang sama (misalkan platrom yang bersifat baku / tidak bebas dalam mengkonfigrasi dari sisi server nya.) atau hanya sekedar ganti domain saja, dengan begitu berupah hanyalah nama domain saja dan terkait slug post / artikel tetap aman (tidak berubah).

Untuk memudahkan saya dalam menjelaskan, sebelum kita mulai mari kita bayangkan terlebih dahulu bahwa saya punya 2 buah blog yaitu :

-. Foot Step of the Dragon, sebagai blog lama yang akan saya redirect ke LangIT Tutorial. Salah 1 contoh linknya adalah : https://footstepofdragon.blogspot.com/2019/10/cara-redirect-url-atau-alamat-blog-yang-telah-migrasi-ke-blog-lain.html

-. LangIT Tutorial, adalah blog baru yang akan menjadi target dari redirect. Salah 1 contoh linknya adalah : https://langittutorial.blogspot.com/2019/10/cara-redirect-url-atau-alamat-blog-yang-telah-migrasi-ke-blog-lain.html

Berikut adalah langkah-langkah yang dapat rekan-rekan lakukan untuk mengimplementasikan redirect dengan replace domain menggunakan javascript.

  1. Pertama-tama silahkan copy source code berikut:

  2. Kemudian anda bisa memodifikasi bagian ini old-domain.com  dan new-domain.com  untuk dapat disesuaikan dengan domain baru atau alamat blog anda yang sebelumnya dan tentu saja yang baru. Berikut contoh source code yang telah saya dimodifikasi.

    <script>
    let currentUrl = window.location.href;
    let newUrlRedirect = currentUrl.replace('footstepofdragon.blogspot.com',
    'langittutorial.blogspot.com').toLowerCase();
    window.location.assign(newUrlRedirect);
    </script>

    Jangan lupa jika anda akan mengimplemantasikan langsung pada HTML pastikan anda membungkus code anda dengan menggunakan TAG <script>*source code anda</script>.

    Terkait comamnd .toLowerCase(), bersifat optional. Jika di blog baru anda permalink atau slug dari post / artikel anda telah berubah menjadi lower case anda dapat menggunakan command .toLowerCase(), untuk memastikan text url redirect anda telah menjadi lowercase semua. namun jika tidak anda dapat untuk tidak mengimplementasikannya.

  3. Selanjutnya, jika anda pengguna Blogger anda dapat, membuka konfiguarasi Theme dengan mode HTML Editor, seperti pada gambar di bawah ini.



    Gambar Membuka konfigurasi template HTML dengan webpage.

  4. Selanjutnya silahkan cari </body> di template blog anda, kemudian paste source code yang telah anda modifikasi di atas  </body>.


    Paste, Source Code JavaScript Advance Redirect di atas TAG </body>

    Gambar paste source code JavaScript Advance Redirect di atas TAG </body>

  5. Kemudian Save


    Hasil Update Code JavaScript Advance Redirect pada Template

    Gambar Hasil Update Code JavaScript Advance Redirect pada Template

Metode ini mungkin cukup worth it jika digunakan pada platform blogger, namun rekan-rekan harus memastikan permalink / slug pada masing-masing post / artikel, jika permalink / slug di blog anda yang baru tidak sesuai maka bisa jadi redirect akan mengarah ke 404 atau ke homepage.

Jika anda menggunakan hosting sebenarnya anda dapat mengsetting dari sisi .htaccess nya di blog yang lama.

B. Mapping Article URL

Metode ini memungkinkan untuk dapat digunakan apabila anda tidak mengganti judul post atau artikel anda, namun terdapat perubahaan yang cukup signifikan pada permalink / slug / url anda. Jadi judul post atau artikel akan kita gunakan sebagai wild guard atau acuan dalam pencocokan url yang akan di-redirect.

Sebelumnya dalam mengimplementasikan metode ini membutuhkan kesabaran tingkat tinggi yaitu, anda harus mengekport masing-masing Judul dan URL post atau artikel pada blog anda terlebih dahulu.

Jadi jika blog yang bermigrasi memilki 100 artikel maka anda harus membuat list judul dan URL dari artikel tersebut, dan anda harus melakukannya di blog lama dan blog baru anda. Jujur sebenarnya saya punya cara cepat khusus bagi rekan-rekan yang menggunakan platform Blogger, namun saya berencana mempublishnya secara terpisah.

Berikut adalah link cara untuk mengexport Judul dan url Blog Anda : COMMING SOON.

Okey, mari kita lanjutkan tutorial kali ini. Anggaplah kita telah memiliki list judul dan URL dari masing-masing blog. Berikut adalah langkah-langkah yang dapat anda lakukan untuk mengimplementasikan Mapping Article URL untuk Advance Redirect:

  1. Pertama-tama silahkan copy code berikut ini :

  2. Lalu silahkan amati kira-kira bagian mana saja yang bisa dikonfigurasi, jika anda sudah menyerah dalam mengidentifikasi anda dapat menggukan acuan di bawah ini untuk melakukan konfigurasi :

    • line 2-9 : Silahkan ganti dengan data list url dan judul dari current blog yang akan anda redirect dengan format Array Object JavaScript yang telah anda siapkan sebelumnya.

    • line 12-19 : Silahkan ganti dengan data list url dan judul dari blog target redirect anda dengan format Array Object JavaScript yang telah anda siapkan sebelumnya.

    • line 24 : Silahkan ganti dengan url home page dari blog baru anda, kenapa hal ini diperlukan karna untuk memitigasi jika url yang diredirect bukan post atau artikel, misalkan page, tag, category, maka dapat diredirect ke home page pada blog yang baru

    • line 41 : urlBlogCurrent.replace('footstepofdragon.blogspot.com', 'langittutorial.com');

      footstepofdragon.blogspot.com : ganti dengan domain current blog yang akan anda redirect. 

      langittutorial.com : ganti dengan domain blog yang menjadi target redirect anda.

    • Terakhir untuk konfigurasi source code nya jangan lupa untuk membungkus code anda dengan menggunakan TAG <script>*source code anda</script>.*

  3. Selanjutnya mari kita tanam code di atas di blog yang akan anda redirect :

    Jika anda menggunakan Blogger maka silahkan buka Layout,
    Kemudain membuat gadget atau widget dengan cara klik Add a Gadget,
    kemudian pilih HTML /JavaScript,
    kemudian akan muncul form Configure HTML/Javascript.
    Silahkan paste code yang telah anda konfigurasi pada kolom Content di form Configure HTML/Javascript,

    Cara paste source code, pada configurasi widget blogger

    Cara menanam source code yang telah dikonfigurasi pada widget Blogger

    Terkait penanaman source code configurasi sebenarnya bisa anda lakukan dengan menggunakan cara pada Metode Replace Domain, hasil nya sama saja.

  4. Terakhir silahkan Save. Next, anda dapat mencoba apakah dapat bekerja sesuai dengan ekspetasi anda.

Sebenarnya dalam penggunaan metode ini sangat memungkin untuk dilakukan memappingkan URL dari Tag / Label / Category, Page, dengan catatan anda bisa mengekstrak masing-masing name/judul dan urlnya, dan juga memastikan nama/judul tidak lah berubah karena digunakan sebagai acuan pengecekkan pada kondisi nya. 

Pembahasan

Lanjut ke babak pembahasan, jadi berikut adalah flowchart dari source code di atas Mapping Article URL untuk Advance Redirect. Jadi Domain Replace juga menjadi bagian dari Mapping Article URL, fungsinya adalah untuk meng-handle url tidak ditemukan di variable dataPostBlogCurrent.

Gambar Flowchart Advance Redirect Mapping Article URL

Gambar Flowchart Advance Redirect Mapping Article URL

Meskipun codenya lebih simple, namun secara garis besarnya telah tersampaikan oleh flowchart di atas. Terdapat 2 bagian loop data yaitu : 

  1. Loop pertama, melakukan melakukan looping pada row data dataPostBlogCurrent dan dilakukan  pengecekkan, memerikas url current blog / blog lama untuk mendapatkan judul / name dari post atau artikel.

  2. Loop kedua, melakukan pengecekkan pada dataPostBlogTarget, jadi output dari loop pertama yang berupa judul / nama dari suatu post atau artikel akan digunakan dicocokan pada setiap row di Array Object dataPostBlogTarget untuk mendapatkan url di blog target atau blog yang baru. Jika berhasil ditemukan maka akan dilakukan redirect ke post / artikel di blog target, namun jika gagal akan di-redirect di homepage blog target.

KESIMPULAN

Jadi dengan membaca artikel Advance Redirect dan mengimplementasikannya anda secara tidak langsung anda telah mempelajari beberapa basic command di JavaScript, yaitu :

  • Window Location : .href, .assign
  • String Manipulation : .replace(), .toLowerCase()
  • Array : .findIndex()

Dari beberapa function di atas dapat kami kembangkan menjadi 2 buah metode untuk meredirect blog, dan salah satunya relative cukup dinamis, yaitu : Replace Domain dan Mapping Article URL.

Dalam mengimplementasikan Advance Redirect sepertinya cukup mudah hanya tinggal copy, config sedikit lalu paste. Namun akan lebih mudah apabila anda dapat memahami codenya. oleh sebab itu saya coba berikan beberapa penjelasan dari meberapa basic code JavaScript.

LANGIT TUTORIAL

NOTE:

Terkait name metode Advance Redirect, Mapping Article URL, dan Domain Replace, adalah nameing karangan saya saja jadi mungkin tidak harfiah, dan mungkin tidak akan relate dengan artikel sebelumnya yang membahas tentang Redirect.

LANGIT TUTORIAL

Demikian tutorial dari kami banyak kekurangan mohon maaf. Terima kasih telah berkunjung. Jika dari rekan-rekan ada yang mau ditanyakan atau ada yang mau ditambahkan jangan sungkan silahkan berkomentar.

~Semoga Bermanfaat~

 

Tags: , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *