Cara Membuat 2 Tampilan Berbeda dalam 1 Halaman dengan Parameter URL

Salah satu fitur yang sangat berguna yang dimiliki platform Blogger blogspot adalah fitur parameter URL. Dengan fitur parameter URL ini kita dapat membuat lebih dari 1 tampilan dalam satu halaman dengan parameter URL Blogger. Namun sayangnya fitur parameter URL Blogger ini sangat jarang digunakan oleh para bloger.

Biasanya parameter URL Blogger ini digunakan pada blog safelink untuk mengatur dua tampilan yang berbeda dalam satu halaman dengan menambahkan parameter URL di akhir URL blog. Misalnya saja seperti ini:

https://www.domain.com/2023/03/blog-post.html?view=1

https://www.domain.com/2023/03/blog-post.html?view=2

Bahkan parameter URL sendiri sudah ada di setiap blog blogspot yang diakhiri dengan parameter ?m=1 jika blog diakses melalui perangkat mobile dan patameter URL ?m=0 jika blog diakses melalui perangkat desktop. Bener, kan?

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. Dan 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 pakai script versi jQuery. Jika blog kamu tidak menggunakan jQuery, kamu bisa pakai script JavaScript biasa. Namun lebih baik menggunakan versi JavaScript.

JavaScript (Direkomendasikan)

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

    var langContainer = document.getElementById('view1'); // 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>'; // BUNGKUS 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 pakai library jQuery yang mana saja. Misalnya library jQuery 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. 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>'; // BUNGKUS 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>'; // BUNGKUS 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, bungkus setiap kode HTML dalam script jQuery di atas. Untuk demo hasil dari script di atas, kamu bisa lihat melalui halaman donasi di blog ini. Di halaman tersebut terdapat dua tampilan berbeda untuk mengatur dua bahasa dalam satu halaman. Yaitu bahasa Indonesia (dengan parameter ?mode=id) dan bahasa Inggris (dengan parameter ?mode=en).