Cara Membuat Subdomain Demo di Blogger Persis Seperti Wendy Code Tanpa Beli Domain Baru

Table of Contents

Cara Membuat Subdomain Demo di Blogger Persis Seperti Wendy Code Tanpa Beli Domain Baru

Bagi Anda yang sering berbagi tutorial kode HTML, CSS, hingga pemasangan widget di Blogger, pasti sering melihat situs populer seperti Wendy Code yang memiliki alamat khusus untuk menampilkan contoh tampilan, yaitu demo.wendycode.com. Ketika Anda mengetik alamat dasar tersebut saja, Anda akan otomatis dibawa ke halaman utama situs mereka. Namun, jika Anda membuka tautan lengkap contohnya seperti https://demo.wendycode.com/2025/06/no-internet.html?m=1, halaman itu tetap terbuka di sana, tidak berpindah, dan menampilkan tampilan murni tanpa gangguan menu atau elemen lain.

Pola kerja yang sangat rapi, profesional, dan hemat biaya ini bisa Anda terapkan seratus persen di situs Anda sendiri tanpa perlu membeli nama domain baru sama sekali. Kita hanya akan memanfaatkan fitur Subdomain yang sudah disediakan secara gratis dari domain utama yang Anda miliki, yaitu lintasiana.com. Artikel ini disusun secara lengkap, mendalam, dan langkah demi langkah agar Anda bisa menirunya dengan mudah meskipun belum pernah mengatur hal teknis seperti ini sebelumnya.

Memahami Pola Kerja Sistem Halaman Demo Wendy Code

Sebelum masuk ke teknis, mari kita pastikan kita paham persis apa yang terjadi pada sistem yang kita contohkan:

• Kondisi Pertama: Jika pengunjung membuka alamat dasar saja, misalnya https://demo.lintasiana.com/, maka sistem akan otomatis langsung mengarahkan pengunjung ke alamat utama https://lintasiana.com. Tidak ada halaman kosong, tidak ada halaman selamat datang, langsung kembali ke rumah utama situs Anda.
• Kondisi Kedua: Jika pengunjung membuka alamat lengkap artikel atau contoh, misalnya https://demo.lintasiana.com/2026/07/nama-kode.html, maka halaman tersebut tetap berada di sana, tidak berpindah tempat sama sekali. Halaman akan menampilkan apa yang ada di dalamnya—kode yang berjalan, tombol yang bisa diklik, atau tampilan desain—secara murni tanpa gangguan elemen tambahan.
• Parameter Tambahan: Jika ada tambahan alamat di belakang seperti ?m=1 yang biasa digunakan Blogger untuk tampilan seluler, sistem tetap mengenali ini sebagai halaman artikel sehingga tidak akan dialihkan ke tempat lain.

Inilah struktur yang membuat sistem Wendy Code terlihat sangat profesional dan rapi. Subdomain berfungsi hanya sebagai wadah penyimpanan tampilan, bukan situs baru yang berdiri sendiri secara utuh.

Apa Itu Subdomain dan Mengapa Ini Sepenuhnya Gratis

Banyak orang masih beranggapan bahwa untuk membuat alamat seperti demo.lintasiana.com kita harus membeli domain baru. Anggapan itu adalah hal yang keliru.

Domain utama adalah nama yang Anda beli dan bayar biaya tahunannya, yaitu lintasiana.com. Anda adalah pemilik sah penuh atas nama ini. Sedangkan Subdomain adalah bagian tambahan yang diletakkan di depan nama domain utama tersebut, yang sepenuhnya disediakan secara gratis oleh penyedia layanan domain.

Karena ini masih berada di bawah naungan domain yang sudah Anda miliki, Anda tidak akan dikenakan biaya sepeser pun untuk membuatnya. Anda bisa membuat ratusan variasi subdomain lainnya, seperti tes.lintasiana.com, lab.lintasiana.com, atau uji.lintasiana.com, semuanya menggunakan satu domain yang sama tanpa tambahan biaya tahunan.

Inilah persis cara kerja sistem yang digunakan Wendy Code: pemiliknya hanya membeli satu domain utama yaitu wendycode.com, lalu membuat subdomain bernama demo di depannya tanpa biaya tambahan apa pun.

Persiapan Sebelum Membuat Halaman Demo Di Blogger

Pastikan Anda sudah menyiapkan hal-hal berikut agar proses berjalan lancar tanpa hambatan:

1. Domain utama lintasiana.com sudah aktif dan terhubung dengan blog utama Anda di Blogger.
2. Anda memiliki nama pengguna dan kata sandi untuk masuk ke halaman pengelolaan domain atau pengaturan DNS di tempat Anda membeli nama domain tersebut.
3. Anda masih ingat kata sandi akun Blogger yang digunakan untuk mengelola situs Lintasiana.
4. Tentukan nama subdomain yang akan digunakan—dalam panduan ini kita menggunakan nama yang paling umum dan mudah dipahami yaitu demo.

Membuat Blog Baru Khusus Tempat Demo Di Blogspot 

Di Blogger, setiap alamat domain atau subdomain membutuhkan satu wadah blog tersendiri. Oleh karena itu, langkah pertama yang harus dilakukan adalah membuat wadah kosong yang khusus fungsinya hanya untuk menyimpan tampilan contoh kode atau tutorial:

1. Masuk ke halaman dasbor Blogger menggunakan akun yang sama dengan akun Lintasiana.
2. Di bagian paling atas sebelah kiri, klik tanda panah kecil di samping nama blog Anda saat ini.
3. Pilih menu bertuliskan Buat Blog Baru.
4. Isi Judul Blog sesuai keinginan, misalnya Demo Lintasiana atau Contoh Tampilan Lintasiana.
5. Isi alamat blog sementara dengan nama yang tersedia, misalnya lintasiana-demo.blogspot.com—jangan khawatir, alamat ini nanti akan kita ganti sepenuhnya.
6. Pilih salah satu tema sederhana apa saja, lalu klik tombol Buat Blog.

Perlu diketahui bahwa blog ini benar-benar terpisah wadahnya, namun dikelola dari satu akun yang sama persis dengan blog utama Anda.

Mengatur Alamat Subdomain di Blogger

Sekarang kita akan memberinya alamat resmi yang kita inginkan agar bisa diakses publik:

1. Masuk ke halaman dasbor blog baru yang baru saja Anda buat.
2. Klik menu Setelan yang ada di bilah sisi sebelah kiri.
3. Cari bagian bernama Penerbitan, lalu klik submenu Domain Khusus.
4. Di kolom isian yang tersedia, ketikkan alamat lengkap persis: demo.lintasiana.com.
5. Klik tombol bertuliskan Simpan.

Penting: Jangan kaget jika nanti muncul pesan bertuliskan merah yang berbunyi "Kami tidak dapat memverifikasi kepemilikan domain Anda". Hal ini adalah hal yang wajar dan memang proses yang harus dilalui. Di situ akan muncul dua baris kode yang harus Anda salin dan catat: baris pertama bernama demo menunjuk ke ghs.google.com, dan baris kedua berupa kode unik huruf dan angka menunjuk ke alamat berakhiran .dv.googlehosted.com. Simpan informasi ini dengan benar karena kita akan menggunakannya segera.

Pengaturan Catatan DNS di Penyedia Domain

Ini adalah langkah teknis yang paling penting. Di sini kita akan memberitahu sistem internet ke mana arah alamat demo.lintasiana.com ini ditujukan:

1. Buka situs tempat Anda membeli domain lintasiana.com, lalu masuk ke akun Anda.
2. Masuk ke daftar layanan yang Anda miliki, lalu pilih Kelola Domain pada nama domain lintasiana.com.
3. Cari menu bernama DNS, Pengelolaan DNS, atau Catatan DNS.

Peringatan Keras: Jangan ubah, hapus, atau ganggu catatan yang sudah ada di halaman tersebut! Itulah pengaturan yang membuat blog utama Anda tetap bisa diakses oleh orang. Kita hanya akan menambahkan catatan baru saja, tanpa mengubah satu pun baris yang sudah tercatat sebelumnya.

Kemudian tambahkan dua catatan baru berikut ini:

Catatan Pertama:
Jenis catatan: pilih CNAME
Nama atau Host: tulis persis demo
Nilai atau Menunjuk ke: tulis persis ghs.google.com
Biarkan pengaturan TTL seperti bawaan sistem, lalu simpan.

Catatan Kedua:
Jenis catatan: pilih CNAME
Nama atau Host: salin kode unik yang diberikan Blogger pada langkah sebelumnya
Nilai atau Menunjuk ke: salin juga alamat tujuan yang berakhiran .dv.googlehosted.com
Klik simpan atau tambahkan catatan.

Selesai pengaturan DNS. Sekarang Anda tinggal menunggu proses penyebaran data ini ke seluruh server internet dunia, yang biasanya berlangsung cepat sekitar sepuluh hingga tiga puluh menit, namun bisa memakan waktu hingga maksimal dua puluh empat jam tergantung penyedia layanan Anda.

Aktifkan HTTPS dan Pola Pengalihan

Setelah beberapa saat berlalu, kembali ke halaman Setelan Blog Demo untuk menyelesaikan prosesnya:

1. Klik tombol Simpan lagi pada bagian Domain Khusus. Jika pengaturan DNS sudah benar, maka kali ini akan berhasil disimpan tanpa pesan error.
2. Segera cari bagian bernama Ketersediaan HTTPS, lalu ubah tombolnya menjadi Ya atau Aktifkan HTTPS.
3. Lalu di bagian bawahnya ubah juga pengaturan Alihkan otomatis dari http ke https menjadi Ya.

Catatan: Seringkali tombol untuk mengaktifkan HTTPS baru bisa diklik sepuluh hingga dua puluh menit setelah domain berhasil disimpan. Hal ini wajar karena sistem Google sedang membuatkan sertifikat keamanan khusus untuk subdomain baru Anda. Jika belum bisa diklik, tunggu sebentar lalu muat ulang halaman.

Memasang Kode Pengalihan Halaman Utama

Inilah bagian kunci yang membuat sistem Anda persis sama persis dengan cara kerja Wendy Code. Kita akan memasang kode yang membedakan mana halaman depan dan mana halaman artikel, sehingga aturan pengalihan bisa berjalan tepat sasaran:

1. Di Blog Demo yang alamatnya demo.lintasiana.com, buka menu Tema lalu klik Edit HTML.
2. Cari kode pembuka kepala halaman yaitu baris <head> yang biasanya ada di baris paling atas.
3. Tempelkan kode yang diberikan di bawah ini, tepat di bawah baris kode <head> tersebut.

<script> (function(){ const lokasi = window.location; const jalur = lokasi.pathname; const domainUtama = 'https://lintasiana.com'; const adalahArtikel = /^\/\d{4}\/\d{2}\//.test(jalur) || /^\/p\//.test(jalur); if(!adalahArtikel){ lokasi.replace(domainUtama); } })(); </script>

Kemudian klik tombol Simpan Tema. Selesai. Cara kerja kode ini sangat sederhana namun akurat: sistem akan memeriksa alamat yang dikunjungi pengunjung. Jika alamatnya hanya berisi garis miring atau halaman utama saja, maka langsung kirim ke blog utama. Namun jika alamatnya mengikuti pola artikel Blogger yaitu tahun dan bulan, maka biarkan halaman tersebut terbuka dan menampilkan isinya. Parameter tambahan seperti ?m=1 tidak akan mengganggu kerja kode ini.

Menyiapkan Tampilan Bersih Tanpa Gangguan

Karena fungsinya hanya untuk menampilkan contoh kode, Anda harus membersihkan elemen yang tidak perlu agar tidak mengganggu tampilan asli dari kode yang Anda bagikan:

1. Masuk ke menu Tata Letak di blog demo tersebut.
2. Hapus semua elemen atau widget yang tidak dibutuhkan, seperti menu utama, iklan, kotak pencarian, daftar artikel populer, footer, dan elemen lain yang bukan bagian dari postingan artikel.
3. Sisakan hanya satu bagian tempat postingan artikel saja.
4. Sebaiknya gunakan tema yang paling dasar, polos, dan tanpa hiasan yang berlebihan.

Tujuannya adalah agar saat pengunjung membuka tautan demo, apa yang mereka lihat adalah seratus persen hasil kerja kode yang Anda tulis, tanpa ada gangguan warna, menu, atau elemen lain dari tampilan blog.

Membuat Tautan Tombol Demo di Artikel Utama

Setelah sistem siap sepenuhnya, Anda tinggal membuat tombol di artikel blog utama yang mengarah ke tampilan contohnya. Anda bisa menggunakan kode tautan berikut ini sebagai contoh:

<a href="https://demo.lintasiana.com/2026/07/nama-contoh-kode.html" target="_blank" style="display:inline-block; padding:12px 25px; background:#2E7D32; color:#ffffff; border-radius:6px; text-decoration:none; font-weight:600; font-size:1rem;">LIHAT DEMO CARA KERJA</a>

Menggunakan atribut target="_blank" berfungsi agar halaman demo terbuka di tab peramban yang baru, sehingga pembaca tidak harus meninggalkan halaman artikel yang sedang mereka baca saat ini.

Menambahkan Tautan Kembali ke Tutorial Asli

Persis seperti yang dilakukan Wendy Code yang menuliskan kalimat untuk kembali ke sumber aslinya, Anda juga sangat disarankan menambahkan tautan balik di bagian atas atau bawah postingan yang ada di blog demo:

<div style="background:#f8f9fa; padding:12px 18px; border-radius:6px; margin-bottom:20px; border-left:4px solid #2E7D32;"> Ingin tahu cara membuat tampilan ini? <br><a href="https://lintasiana.com/2026/07/artikel-asli-tutorialnya.html" target="_blank">Baca Tutorial Lengkap di Lintasiana.com</a> </div>

Hal ini penting dilakukan agar pengunjung tahu di mana letak penjelasan aslinya, sekaligus ini akan menaikkan jumlah kunjungan dan kepopuleran artikel utama Anda.

Pertanyaan yang Sering Diajukan

Apakah saya harus membayar lagi untuk membuat subdomain ini?

Sama sekali tidak. Subdomain adalah fitur tambahan gratis yang sudah menjadi hak Anda sebagai pemilik domain utama. Anda hanya membayar satu kali untuk domain lintasiana.com itu sendiri, dan bisa membuat subdomain sebanyak yang Anda butuhkan tanpa biaya tambahan.

Apakah Google akan menganggap konten ini sebagai duplikat?

Selama di blog demo hanya Anda memposting contoh tampilan murni tanpa artikel penjelasan lengkapnya, Google tidak akan menganggapnya sebagai konten duplikat. Penjelasan lengkap dan uraian tutorial hanya diletakkan di blog utama, sedangkan blog demo hanya berisi tampilan hasil kodenya saja.

Apakah ini akan membebani penyimpanan atau biaya layanan?

Blogger menyediakan layanan pembuatan blog baru secara gratis dalam batasan kewajaran penggunaan. Tidak ada biaya tambahan yang dikenakan oleh Google untuk membuat blog baru di bawah satu akun yang sama.

Kesimpulan

Membuat sistem demo persis seperti Wendy Code menggunakan alamat demo.lintasiana.com adalah solusi yang cerdas, hemat biaya, dan sangat profesional untuk situs tutorial Anda. Dengan memanfaatkan fitur subdomain gratis yang sudah ada, pengaturan catatan DNS yang benar, serta penambahan kode pengalihan sederhana, kini Anda memiliki struktur situs yang sangat rapi dan mudah dipahami:

• Alamat dasar demo.lintasiana.com akan langsung mengarah ke halaman utama situs Anda di lintasiana.com.
• Alamat lengkap artikel atau contoh kode akan tetap terbuka di tempatnya, menampilkan hasil karya secara utuh tanpa gangguan elemen situs lain.

Kombinasi ini membuat pengunjung menjadi nyaman saat belajar, contoh kode bisa berjalan dengan sempurna tanpa tabrakan elemen, dan sekaligus memperkuat identitas merek situs Anda di mata pengikut setia.