Cara Menampilkan Konten Lebih Spesifik dengan Hash

Trik yang ini bisa juga digunakan untuk menambah pageview suatu blog atau website. Karena dalam satu halaman posting, Anda bisa mendapatkan tayangan hingga 10 kali lipat bahkan lebih. Tergantung berapa banyak #hash yang Anda tambahkan.

Bagaimana cara membuat hash pada URL?
Itu sangat sederhana sekali. Hash dalam penulisan hanya dengan menambahkan tanda pagar(#) yang mirip dengan hash pada sebagian besar situs sosmed dan forum.

Menambah jumlah PageView blog dengan #HASH
Kali ini triknya mengkolaborasikan konten tersembunyi dan menampilkannya dengan hash.

Tentukan target konten yang akan disembunyikan dengan CSS display:none pada HTML atau jika sering digunakan, tambahkan saja dalam template.
  • Simpan jQuery ini di template blog Anda. Posisi diatas </body>
<script type='text/javascript'>
 if(window.location.hash) {
 document.write("<div id='style'></div>");
    var hashes = window.location.hash.substring(1);
    $("#style").append("<style>#" + hashes + "{display:block!important}</style>");
  }
</script>
  • Buat tombol untuk menampilkan konten yang masih disembunyikan. Tombol bisa dengan tag div, p ataupun button dengan tambahan atribut onclick location.reload();
  • Atribut ini diharuskan karena hash tidak akan bisa memuat ulang suatu halaman website.

Untuk kode lengkapnya, Anda bisa mencontoh kode ini:

<a onclick="location.reload();" href="#konten1">Klik untuk melihat konten pertama</a>
<a onclick="location.reload();" href="#konten2">Klik untuk melihat konten kedua</a>
<blockquote style="display:none;font-size:22px" id="konten1">Ini adalah isi konten pertama</blockquote>
<blockquote style="display:none;font-size:22px" id="konten2">Ini adalah isi konten kedua</blockquote>
<script type='text/javascript'>
 if(window.location.hash) {
 document.write("<div id='style'></div>");
    var hashes = window.location.hash.substring(1);
    $("#style").append("<style>#" + hashes + "{display:block!important}</style>");
  }
</script>

Ingat, widget ini membutuhkan jQuery eksternal, contohnya seperti:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
Jika sudah ada versi lain, maka tidak perlu ditambahkan lagi.

Jika sebelumnya Anda telah menyimpan kode untuk membuka link ke TAB BARU / NEW TAB maka sebaiknya Anda tambahkan target="_self" di anchor agar tidak membuat browser menjadi penuh oleh halaman yang sama.

Perlu hasil contoh kode?
Klik untuk melihat konten pertama
Klik untuk melihat konten kedua
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini