Cara Membuat 2 Tampilan Berbeda dalam 1 Halaman di Blog dengan Parameter URL

Salah satu fitur yang sangat berguna yang dimiliki platform Blogger blogspot namun sering kali diabaikan adalah fitur parameter URL. Setiap blog yang dibuat menggunakan platform Blogger pasti akan memiliki parameter URL meskipun sudah menggunakan kustom domain seperti domain .COM dan domain kustom lainnya. Penggunaan paramater URL tersebut digunakan sebagai pembeda antara blog dengan tamppilan mobile dan blog dengan tampilan desktop. Jadi jika blog diakses melalui perangkat ponsel, paramter URL yang muncul adalah ?m=1 dan jika blog diakses melalui desktop maka paramter URL yang muncul adalah ?m=0.

Tidak semua blog yang dibuat menggunakan platform Blogger memiliki parameter URL seperti yang dijelaskan di atas. Biasanya, mereka menyembunyikan parameter URL tersebut di akhir URL menggunakan JavaScript. Dan terkadang ada juga blog yang tidak memiliki parameter URL ?m=0 jika diakses melalui desktop jika pengaturan tampilan seluler diatur ke tampilan desktop dan menggunakan tema (template blogspot) kustom.

Namun banyak juga blog yang memanfaatkan pramater URL untuk membuat sebuah fitur tambahan seperti fitur safelink di blog agar dapat mengatur dua tampilan yang berbeda dalam satu halaman dengan menambahkan parameter URL di akhir URL blog. Misalnya saja seperti ini:

Dengan menggunakan tambahan parameter URL ?view=1, kamu dapat mengatur dan menampilkan beberapa elemen tertentu yang hanya akan muncul jika URL terdapat parameter ?view=1. Dan jika mengganti parameter URL dengan ?view=2, maka semua elemen dalam parameter ?view=1 tidak akan ditampilkan. Dan begitu juga sebaliknya.

Untuk membuat dua tampilan yang berbeda dalam satu halaman dengan parameter URL seperti ini, kita bisa membuatnya menggunakan sebuah script JavaScript sederhana kemudian menempatkan konten HTML dalam JavaScript. Tentunya kamu harus paham sedikit mengenai bahasa pemrograman JavaScript untuk membuat dua tampilan berbeda dengan parameter URL ini. Berikut script untuk membuat 2 tampilan berbeda dalam 1 halaman dengan parameter URL di blog.

Script Untuk Membuat 2 Tampilan Berbeda dalam 1 Halaman dengan Parameter URL

Saya akan sediakan dua script berbeda untuk membuat dua tampilan berbeda dalam satu halaman dengan parameter URL di blog. Yaitu script JavaScript dan script jQuery. Kamu bisa pakai salah satunya. Jika blog kamu menggunakan library jQuery, kamu bisa gunakan script versi jQuery. Tapi jika blog kamu tidak menggunakan jQuery, cukup gunakan script JavaScript biasa saja. Namun lebih baik menggunakan versi JavaScript karena lebih mudah pahami.

JavaScript (Direkomendasikan)

document.addEventListener('DOMContentLoaded', function() {
  var mode = window.location.href.indexOf('?view=1') > -1;
  if (mode) {
    var content = '?view=1<p>Lorem ipsum dolor sit amet...</p>?view=1'; // TULIS SEMUA KODE HTML DI SINI

    var langContainer = document.getElementById('?view=1view1?view=1'); // GANTI DENGAN ID YANG KAMU INGINKAN
    if (langContainer) {
      langContainer.innerHTML = content;
    }
  }
});

Keterangan:
?view=1 : adalah parameter URL yang ingin ditentukan untuk menampilkan kode dalam paramater ini.
var content : Kode HTML atau CSS yang ingin ditampilkan.
Nilai view1 pada var langContainer adalah ID HTML agar script berfungsi.^* Kamu bisa ganti semua teks yang ditandai sesuai dengan keinginan kamu.

jQuery

$(document).ready(function() {
  var mode = window.location.href.indexOf('?view1') > -1;
  if (mode) {
    var content = '<p>Lorem ipsum dolor sit amet</p>'; // TULIS KODE HTML DI SINI

    var langContainer = $('#view1');
    if (langContainer.length) {
      langContainer.html(content);
    }
  }
});

Jika kamu menggunakan script versi jQuery di atas, pastikan di blog kamu sudah terpasang library jQuery. Karena jika blog tidak terpasang library jQuery, maka script di atas tidak akan berfungsi. Bebas menggunakan library jQuery yang mana saja. Misalnya saja library jQuery dari official CDN berikut:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

HTML Pemanggil Script

Agar kedua script di atas bisa berfungsi dengan baik (hanya menampilkan kode HTML tertentu dalam parameter ?view=1), tambahkan kode HTML pemanggil di bawah ini:

<div id="view1"></div>

Sesuaikan ID view1 di atas dengan ID yang kamu atur dalam JavaScript "var langContainer". Pastikan untuk menuliskan ID ini sesuai dengan ID yang ada dalam JavaScript. Karena jika ID ini tidak sama dengan ID yang ada dalam JavaScript, maka kode HTML tidak akan ditampilkan.

Kesimpulan

Itu dia cara membuat 2 tampilan berbeda dalam 1 halaman dengan parameter URL menggunakan JavaScript dan jQuery. Jika kamu ingin membuat lebih dari satu atau dua tampilan berbeda, pastikan untuk menambahkan script tersebut dan menyesuaikan setiap parameternya. Misalnya seperti berikut:

// SCRIPT TAMPILAN KE-1 DENGAN PARAMETER ?VIEW=1
document.addEventListener('DOMContentLoaded', function() {
  var mode = window.location.href.indexOf('?view=1') > -1;
  if (mode) {
    var content = '<p>Lorem ipsum dolor sit amet (VIEW1)</p>'; // TULIS SEMUA KODE HTML UNTUK ?VIEW1 DI SINI

    var langContainer = document.getElementById('view1'); // GANTI DENGAN ID VIEW1 YANG KAMU INGINKAN
    if (langContainer) {
      langContainer.innerHTML = content;
    }
  }
});

// SCRIPT TAMPILAN KE-2 DENGAN PARAMETER ?VIEW=2
document.addEventListener('DOMContentLoaded', function() {
  var mode = window.location.href.indexOf('?view=2') > -1;
  if (mode) {
    var content = '<p>Lorem ipsum dolor sit amet... (view2)</p>'; // TULIS KODE HTML UNTUK ?VIEW2 DI SINI

    var langContainer = document.getElementById('view2'); // GANTI DENGAN ID VIEW2 YANG KAMU INGINKAN
    if (langContainer) {
      langContainer.innerHTML = content;
    }
  }
});

/* TAMBAHKAN SCRIPT TAMPILAN KE-3 DI SINI */

Dan tambahkan juga HTML untuk menampilkan kode dalam parameter ?view2. Misalnya saja seperti ini:

<!--[ ID PEMANGGIL UNTUK PARAMETER ?VIEW1 ]-->
<div id="view1"></div>

<!--[ ID PEMANGGIL UNTUK PARAMETER ?VIEW2 ]-->
<div id="view2"></div>

<!--[ ID PEMANGGIL UNTUK PARAMETER TAMPILAN KE-3 ]-->

Begitu juga dengan script versi jQuery, tulis setiap kode HTML dalam script jQuery di atas. Untuk demo atau preview hasil dari script di atas, kamu bisa lihat melalui halaman demo yang sudah disediakan di atas atau cek di halaman forum member. Di halaman itu saya menggunakan metode yang sama dengan script di atas untuk menampilkan konten member. Jika ada yang ingin ditanyakan mengenai script di atas, kamu bisa tanyakan di kolom komentar.