Cara Membuat Content Locker Blogger dengan Native JavaScript

---

Content Locker merupakan komponen antarmuka yang digunakan untuk menyembunyikan sementara bagian tertentu dari sebuah halaman. Pengunjung kemudian dapat membuka bagian tersebut melalui tombol yang telah disediakan.

Pada Blogger, konsep ini dahulu cukup populer dengan nama Social Content Locker. Implementasi lama biasanya menggunakan plugin jQuery dan API jejaring sosial untuk mendeteksi Like, Tweet atau Share sebelum sebuah konten dapat dibuka.

Namun cara tersebut sekarang kurang ideal. API media sosial telah banyak berubah, beberapa tombol lama sudah tidak tersedia, dan ketergantungan pada plugin pihak ketiga membuat script lebih sulit dipelihara.

Pada tutorial ini kita akan membuat ulang Content Locker menggunakan native JavaScript. Tidak ada jQuery, tidak membutuhkan Facebook App ID dan tidak perlu memaksa pengunjung membagikan artikel.

Tombol berbagi tetap tersedia sebagai pilihan, sedangkan pengunjung selalu mempunyai tombol untuk membuka konten secara langsung.

Informasi Singkat

---

Content Locker pada tutorial ini berfungsi sebagai elemen antarmuka untuk menyembunyikan sementara konten tambahan seperti source code, catatan bonus, informasi lanjutan atau resource artikel.

Tombol berbagi menggunakan Web Share API apabila tersedia. Pada perangkat yang tidak mendukungnya, pengguna tetap dapat menyalin link artikel atau langsung membuka konten.

Tidak ada proses verifikasi bahwa pengunjung benar-benar membagikan artikel ke media sosial.

DAFTAR ISI

1. Live Preview Content Locker
2. Kenapa Script Lama Perlu Diperbarui?
3. Memasang Engine Content Locker
4. Mengunci Konten Artikel
5. Pengaturan Content Locker
6. Contoh Penggunaan
7. Tips Penggunaan

Live Preview Content Locker

Berikut contoh Content Locker versi baru. Konten di dalam kotak masih tersedia di halaman, tetapi disembunyikan sampai pengunjung memilih untuk membukanya.

CONTENT LOCKED

Konten Tambahan

Bagian ini berisi materi tambahan dari artikel. Anda dapat membagikan artikel, menyalin link atau langsung membuka konten.

Tidak wajib membagikan artikel untuk membuka konten.

CONTENT UNLOCKED

Berhasil! Ini adalah contoh konten yang sebelumnya disembunyikan.

Berbeda dengan Social Locker generasi lama, tombol share pada versi ini tidak digunakan sebagai syarat wajib.

Jika pengunjung menekan Bagikan, browser akan mencoba membuka menu berbagi bawaan perangkat. Jika Web Share API tidak tersedia, link artikel akan disalin sebagai alternatif.

Penting

Content Locker sebaiknya tidak digunakan untuk menyembunyikan informasi utama yang dibutuhkan pembaca. Gunakan untuk source code tambahan, bonus, resource, spoiler atau bagian interaktif yang memang masuk akal untuk dibuka secara manual.

Kenapa Script Lama Perlu Diperbarui?

Versi lama Content Locker CodeFlare dibuat pada masa ketika plugin jQuery dan tombol sosial berbasis SDK banyak digunakan.

Script tersebut memuat Facebook SDK, membutuhkan Facebook App ID, menggunakan jQuery dan menjalankan plugin Social Locker eksternal.

Sekarang kita dapat membuat fungsi dasarnya dengan JavaScript yang jauh lebih sederhana.

VERSI LAMA Plugin Social Locker

Membutuhkan jQuery

Facebook SDK

Facebook App ID

Plugin eksternal

Bergantung API sosial lama

VERSI BARU Native Content Locker

Native JavaScript

Tanpa jQuery

Tanpa App ID

Web Share API

Tetap dapat dibuka langsung

Perubahan paling penting bukan hanya pada teknologi yang digunakan, tetapi juga pada pengalaman pengguna.

Alih-alih memaksa pengunjung melakukan aktivitas tertentu, tombol share sekarang menjadi pilihan. Content Locker tetap dapat dibuka menggunakan tombol Buka Konten.

Memasang Engine Content Locker

PERINGATAN

Sebelum melakukan perubahan pada HTML template Blogger, simpan backup template terlebih dahulu agar mudah dikembalikan apabila terjadi kesalahan pemasangan.

Buka dashboard Blogger kemudian masuk ke Tema → Edit HTML. Cari tag penutup:

</body>

Letakkan JavaScript berikut tepat sebelum tag tersebut.

<script> //<![CDATA[ (function(){ "use strict"; function cfCopyLink(url,button){ function done(){ var old=button.innerHTML; button.innerHTML='<i class="fa fa-check"></i><span>Tersalin</span>'; setTimeout(function(){ button.innerHTML=old; },1800); } if(navigator.clipboard && window.isSecureContext){ navigator.clipboard.writeText(url).then(done).catch(function(){ fallback(); }); }else{ fallback(); } function fallback(){ var input=document.createElement("textarea"); input.value=url; input.style.position="fixed"; input.style.opacity="0"; document.body.appendChild(input); input.select(); try{ document.execCommand("copy"); done(); }catch(e){} document.body.removeChild(input); } } document.addEventListener("click",function(e){ var button=e.target.closest("[data-action]"); if(!button)return; var locker=button.closest(".cfContentLocker"); if(!locker)return; var action=button.getAttribute("data-action"); var url=location.href.split("#")[0]; var title=document.title; if(action==="open"){ locker.classList.add("is-open"); return; } if(action==="copy"){ cfCopyLink(url,button); return; } if(action==="share"){ if(navigator.share){ navigator.share({ title:title, text:"Saya menemukan artikel ini menarik.", url:url }).catch(function(){}); }else{ cfCopyLink(url,button); } } }); })(); //]]> </script>

Script menggunakan event delegation sehingga satu engine dapat menangani beberapa Content Locker pada halaman yang sama.

Selanjutnya tambahkan CSS berikut ke template atau tempatkan bersama CSS artikel jika Content Locker hanya digunakan pada artikel tertentu.

.cfContentLocker{ position:relative; width:100%; box-sizing:border-box; overflow:hidden; border:1px solid rgba(0,131,218,.25); background:rgba(0,131,218,.04) } .cfCLLocked{ position:relative; padding:20px 15px; text-align:center } .cfCLIcon{ position:relative; display:flex; align-items:center; justify-content:center; width:60px; height:60px; margin:0 auto 10px; background:rgba(0,131,218,.1); color:#0083da; font-size:27px; overflow:hidden } .cfCLIcon span{ position:absolute; left:0; top:-2px; width:100%; height:2px; background:#0083da; box-shadow:0 0 8px #0083da; animation:cfCLScan 2.8s linear infinite } .cfCLStatus{ margin-bottom:7px; font-size:10px; letter-spacing:1px; color:#0083da } .cfCLStatus i{ display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; background:#0083da; animation:cfCLBlink 1.5s ease-in-out infinite } .cfCLLocked>b{ display:block; font-size:17px } .cfCLLocked>p{ max-width:480px; margin:7px auto 13px } .cfCLShare{ display:flex; justify-content:center; gap:6px; margin-bottom:7px } .cfCLShare button, .cfCLOpen{ min-height:38px; border:0; padding:7px 12px; font:inherit; font-size:13px; cursor:pointer } .cfCLShare button{ background:rgba(0,131,218,.1); color:#0083da } .cfCLOpen{ background:#0083da; color:#fff } .cfCLLocked>small{ display:block; margin-top:8px; font-size:10px; opacity:.7 } .cfCLContent{ display:none; padding:12px } .cfContentLocker.is-open .cfCLLocked{ display:none } .cfContentLocker.is-open .cfCLContent{ display:block; animation:cfCLReveal .45s ease } .cfCLUnlocked{ display:flex; align-items:center; gap:5px; padding-bottom:7px; border-bottom:1px solid rgba(0,131,218,.15); color:#0083da; font-size:10px; letter-spacing:.8px } @keyframes cfCLScan{ 0%{top:0} 50%{top:100%} 100%{top:0} } @keyframes cfCLBlink{ 0%,100%{opacity:.35} 50%{opacity:1} } @keyframes cfCLReveal{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} } @media(prefers-reduced-motion:reduce){ .cfCLIcon span, .cfCLStatus i{ animation:none } } @media(max-width:480px){ .cfCLShare{ flex-direction:column } .cfCLShare button, .cfCLOpen{ width:100% } }

Mengunci Konten Artikel

Setelah engine terpasang, Content Locker dapat digunakan langsung dari editor HTML posting Blogger.

Gunakan struktur berikut:

<div class="cfContentLocker"> <div class="cfCLLocked"> <div class="cfCLIcon"> <i class="fa fa-lock"></i> <span></span> </div> <div class="cfCLStatus"> <span><i></i> CONTENT LOCKED</span> </div> <b>Konten Tambahan</b> <p> Buka bagian ini untuk melihat konten tambahan. </p> <div class="cfCLShare"> <button type="button" data-action="share"> <i class="fa fa-share-alt"></i> <span>Bagikan</span> </button> <button type="button" data-action="copy"> <i class="fa fa-link"></i> <span>Salin Link</span> </button> </div> <button class="cfCLOpen" type="button" data-action="open"> <i class="fa fa-unlock-alt"></i> Buka Konten </button> </div> <div class="cfCLContent"> ISI KONTEN YANG INGIN DISIMPAN DI SINI </div> </div>

Bagian:

<div class="cfCLContent"> ISI KONTEN </div>

merupakan tempat meletakkan konten yang akan disembunyikan sementara.

Anda dapat memasukkan teks, source code, gambar, tombol, catatan tambahan atau elemen HTML lainnya sesuai kebutuhan artikel.

Pengaturan Content Locker

Judul

Ubah teks Konten Tambahan sesuai jenis materi yang disembunyikan.

Pesan

Berikan penjelasan singkat mengenai apa yang akan diperoleh pembaca setelah membuka bagian tersebut.

Bagikan

Menggunakan fitur share bawaan browser jika perangkat mendukung Web Share API.

Salin Link

Menyalin URL artikel agar pembaca dapat membagikannya melalui aplikasi pilihan mereka.

Buka Konten

Membuka konten secara langsung tanpa mewajibkan aktivitas sosial.

Contoh Penggunaan

Content Locker tidak harus digunakan untuk link download. Ada beberapa penggunaan yang lebih natural pada sebuah artikel tutorial.

01 Source Code Tambahan

Menyimpan variasi atau versi alternatif source code agar artikel utama tidak terlalu panjang.

02 Tips Tambahan

Membuat bagian bonus yang dapat dibuka pembaca setelah menyelesaikan tutorial utama.

03 Spoiler

Menyembunyikan informasi yang tidak ingin langsung terlihat ketika halaman pertama kali dibuka.

04 Resource Artikel

Menempatkan template kode atau materi pendukung dalam bagian terpisah.

Tips Penggunaan

Content Locker merupakan elemen tambahan, jadi penggunaannya sebaiknya tidak berlebihan.

Informasi utama yang menjawab kebutuhan pembaca tetap sebaiknya dapat dibaca langsung. Gunakan locker untuk materi tambahan yang memang memiliki alasan untuk disembunyikan sementara.

Jangan membuat tombol yang memberikan kesan bahwa pengunjung wajib membagikan artikel apabila sebenarnya tidak ada verifikasi share.

Selain membuat pengalaman pengguna lebih jelas, pendekatan seperti ini membuat komponen lebih sederhana karena tidak perlu berkomunikasi dengan API Facebook, X atau platform sosial lainnya.

Catatan Keamanan

Content Locker berbasis JavaScript bukan sistem keamanan atau enkripsi. Konten yang ditempatkan di dalam HTML halaman tetap dapat ditemukan melalui source halaman. Jangan menggunakannya untuk password, API key, data pribadi atau informasi rahasia.

Pembaruan ini mengubah Social Content Locker lama menjadi komponen yang lebih sederhana dan tidak lagi bergantung pada plugin jQuery maupun SDK media sosial.

Fungsi berbagi tetap dipertahankan, tetapi sekarang menjadi fitur opsional. Pembaca bebas membagikan artikel, menyalin link atau langsung membuka konten.

Dengan konsep tersebut Content Locker masih dapat digunakan sebagai elemen interaktif pada Blogger tanpa mengorbankan kenyamanan pembaca.