Membuat 2 Tampilan Berbeda di Blog dengan Parameter URL #2

Di artikel sebelumnya, saya pernah membagikan tutorial cara membuat 2 tampilan berbeda di blog dengan memanfaatkan parameter URL menggunakan JavaScript. Pada script sebelumnya, isi konten HTML ditulis dalam kode JavaScript, bukan ditulis secara terpisah. Alhasil, metode pada script sebelumnya kurang efektif karena bagi yang kurang paham JavaScript akan merasa kesulitan dalam mengedit kodenya. Selain itu, metode pada script tersebut juga kurang efektif dari sisi kecepatan loading karena mengandalkan JavaScript sepenuhnya.

Nah, supaya cara sebelumnya menjadi lebih efektif, saya memindahkan isi konten HTML yang ditulis dalam kode JavaScript menjadi konten HTML langsung. Selain memudahkan dalam mengedit isi konten HTML nya, metode baru ini juga hanya menggunakan sedikit kode JavaScript sehingga tidak akan memberatkan kecepatan loading blog. Berikut update script cara membuat 2 tampilan berbeda di blog dengan parameter URL (bagian 2).

Tentang Parameter URL

Bagi yang belum tahu mengenai parameter URL, parameter URL adalah bagian dari URL yang digunakan untuk mengirim data ke halaman web. Parameter ini biasanya ditulis setelah tanda tanya (?) dalam format key=value, dan jika ada lebih dari satu parameter, dipisahkan dengan tanda &. Parameter URL sendiri sudah ada di setiap blog yang dibuat menggunakan platform Blogger atau Blogspot. Parameter URL tersebut adalah ?m=1 yang menunjukkan bahwa blog sedang diakses melalui perangkat mobile dan ?m=0 menunjukkan bahwa blog sedang diakses melalui perangkat desktop.

Fungsi dan Kegunaan Parameter URL

Ada banyak sekali fungsi dan kegunaan dari parameter URL ini. Salah satunya adalah navigasi halaman dinamis. Kita dapat menentukkan lebih dari satu tampilan yang berbeda dalam satu halaman atau URL yang sama, sama seperti yang sedang dibahas kali ini. Berikut beberapa contoh fungsi dan kegunaan dari parameter URL.

Navigasi Halaman Dinamis

Seperti yang sudah dijelaskan sebelumnya, salah satu fungsi dari parameter URL ini adalah untuk membuat dua tampilan atau lebih yang berbeda dalam satu halaman atau URL yang sama. Sebagai contoh, kita dapat mengatur dua konten yang berbeda dalam satu URL halaman yang sama seperti ini.

Dengan memanfaatkan parameter tersebut, kita dapat mengatur konten atau tampilan halaman secara dinamis. Sehingga isi konten dalam halaman akan disesuaikan dengan nilai parameter URL yang sedang diakses oleh pengguna. Jika parameter URL-nya adalah ?page=tampilan1, maka isi konten yang akan ditampilkan adalah isi konten tampilan 1 dan konten untuk tampilan 2 tidak akan ditampilkan, begitupun sebaliknya.

Melacak Sumber Trafik Website

Fungsi lainnya dari parameter URL adalah untuk melacak sumber trafik sebuah website. Hal ini biasanya digunakan pada sebagian besar search engine seperti Google dan Bing. Contoh parameter URL-nya seperti ini.

Filter dan Pencarian Data

Pada setiap website bahkan blog Blogger, fungsi ini biasanya sudah diterapkan. Parameter ini digunakan untuk menentukan konten atau halaman mana yang harus ditampilkan ketika pengguna mencari menggunakan query tertentu. Berikut adalah contoh parameter URL yang diguanak sebagai filter dan pencarian data pada blog Blogger.

Pada URL di atas, menunjukkan bahwa pengguna sedang mencari konten artikel dengan query atau kata kunci tutorial dan tentunya isi konten yang akan ditampilkan adalah semua artikel yang memiliki kata kunci tutorial.

Cara Membuat 2 Tampilan Berbeda di Blog dengan Parameter URL #2

Saya akan memberikan dua opsi script untuk membuat 2 tampilan berbeda di blog. Script pertama adalah script menggunakan JavaScipt dan scipt yang kedua adalah script menggunakan jQuery. Kamu bisa pilih salah satu script tersebut. Jika blog kamu menggunakan jQuery, kamu bisa gunakan script versi jQuery. Tetapi jika blog kamu tidak menggunakan jQuery, kamu bisa menggunakan script versi JavaScript (direkomendasikan). INGAT, CUKUP PASANG 1 SCRIPT SAJA.

Kode JavaScript (Direkomendasikan)

Kode jQuery

Jika blog kamu menggunakan jQuery, kamu bisa gunakan script versi jQuery di bawah ini.

// SCRIPT NAVIGASI HALAMAN DINAMIS BLOGGER BY IGNELIUS.COM
$(document).ready(function() {
  // Ambil parameter 'view' dari URL
  var params = new URLSearchParams(window.location.search);
  var view = params.get("page"); // nama parameter URL, ganti "page" sesuai kebutuhan

  // Sembunyikan semua konten terlebih dahulu
  $(".isi-konten").hide();

  // Tampilkan konten sesuai dengan nilai parameter URL
  if (view === "halaman1") {
    $(".halaman1").show();
  } else if (view === "halaman2") {
    $(".halaman2").show();
  } else if (view === "halaman3") {
    $(".halaman3").show();
  } else {
    $(".default").show(); // selektor isi konten HTML default
  }
});

Jika ingin menggunakan script versi jQuery di atas, pastikan blog kamu sudah terpasang library jQuery. Bebas mau pakai library jQuery mana saja. Jika library jQuery belum terpasang, kamu bisa pasang official library jQuery di bawah ini.

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

Kode HTML

Untuk membuat konten yang berbeda di postingan atau halaman statis blog, tulis setiap konten HTML pada selektornya masing-masing. Berikut kode HTML untuk membuat 2 tampilan berbeda di blog.

<!--[ KONTEN HTML UTAMA / DEFAULT ]-->
<div class="isi-konten default">
  <!--[ TULIS KONTEN HTML UTAMA (TANPA PARAMETER URL) DI SINI ]-->
</div>

<!--[ KONTEN HTML TAMPILAN 2 ]-->
<div class="isi-konten halaman1">
  <!--[ TULIS KONTEN HTML UNTUK TAMPILAN KE 2 DI SINI (TERLIHAT JIKA MEMILIKI PARAMETER URL "?page=halaman1" ]-->
</div>

<!--[ KONTEN HTML TAMPILAN 3 ]-->
<div class="isi-konten halaman2">
  <!--[ TULIS KONTEN HTML UNTUK TAMPILAN KE 3 DI SINI (TERLIHAT JIKA MEMILIKI PARAMETER URL "?page=halaman2" ]-->
</div>

<!--[ KONTEN HTML TAMPILAN 4 ]-->
<div class="isi-konten halaman3">
  <!--[ TULIS KONTEN HTML UNTUK TAMPILAN KE 4 DI SINI (TERLIHAT JIKA MEMILIKI PARAMETER URL "?page=halaman3" ]-->
</div>

Penutup

Itu dia update script untuk membuat 2 tampilan berbeda dalam 1 halaman di blog dengan parameter URL menggunakan JavaScript dan jQuery. Jika ingin membuat lebih banyak tampilan lagi, kamu bisa tambahkan saja dan sesuaikan jumlah parameternya sesuai kebutuhan.