Membahas tentang widget Blogger memang tidak akan ada habisnya, selalu saja ada sesuatu hal yang baru. Contohnya seperti Continue Reading Button yang akan saya bagikan di artikel kali ini. Yah, walaupun lebih tepat disebut sebagai "fitur" dibandingkan "widget" karena Continue Reading Button ini tidak hanya digunakan pada blog Blogger saja, namun seringkali digunakan pada website besar. Mungkin di antara kamu sudah familiar dengan istilah atau nama "Continue Reading" ini.
Ya, seperti namanya "Continue Reading Button". Fitur ini berguna untuk menampilkan sebagian konten tertentu yang disembunyikan. Ketika tombol "Continue Reading" atau dalam bahasa Indonesia "Lanjutkan Membaca" ini diklik, maka sisa konten yang disembunyikan akan ditampilkan. Fitur ini bisa dibilang mirip dengan fitur "Table of Content" atau fitur "Spoiler" yang umumnya menggunakan elemen <details> dan <summary>.
Bedanya, fitur Continue Reading ini dapat dikustomisasikan lebih spesifik lagi sesuai kebutuhan kita sebagai pemilik blog atau website. Misalnya saja menambahkan fungsi validasi email dan kode lisensi dari masing-masing pengunjung blog. Saya membuat fitur Continue Reading Locked Content ini karena saya terinspirasi dari beberapa website yang baru-baru ini saya kunjungi dan template Blogger bernama Infastio. Mungkin di antara kamu juga sudah tahu template Blogger Infastio buatan YazuarZG ini.
Dalam template Infastio, terdapat fitur Continue Reading Button yang fungsionalnya mirip dengan yang saya sebutkan di atas, yaitu untuk menyembunyikan sebagian konten artikel yang ada di blog dan mengunci konten tersebut. Untuk membuka atau melihat isi konten artikel yang lebih lengkap, pengunjung harus mengisi data email dan password mereka terlebih dahulu, barulah konten artikel dapat ditampilkan. Namun email dan password tersebut hanya bisa didapat oleh pengunjung yang sudah berlangganan paket premium atau membeli konten eksklusif tersebut. Jadi tidak semua orang dapat mengakses isi konten artikel tersebut.
Fitur Continue Reading Button Locked Content atau Lanjutkan Membaca ini tentunya sangat berguna bagi kamu yang memiliki konten eksklusif atau konten premium yang hanya dapat diakses oleh pengguna yang telah membeli konten tersebut dan resmi terdaftar. Dengan memasang fitur Continue Reading ini di blog, kamu bisa menentukan siapa saja yang dapat mengakses konten tersebut dengan mudah.
Pada JavaScript yang akan saya bagikan di artikel ini tidak sama dengan fitur Continue Reading Button yang digunakan pada template Infastio. Saya menambahkan beberapa fungsi tambahan untuk meningkatkan pengalaman pengguna saat ingin mengakses konten eksklusif terkunci tersebut. Salah satunya saya menambahkan fungsi untuk menyimpan data yang sudah dimasukkan oleh pengguna ke localstorage agar konten eksklusif yang terkunci tersebut dapat terbuka langsung tanpa memasukkan email dan kode lisensi (bisa juga menggunakan password) berulang kali.
Selain itu, saya juga menggunakan metode pengambilan data user dari file JSON yang diambil dari server pihak ketiga (bisa pakai Firebase, Github atau Workers Cloudflare). Kenapa? Untuk meningkatkan keamanan data user supaya tidak mudah dilihat oleh sembarang orang melalui inspek elemen dan dapat dipersonalisasikan dengan mudah tanpa harus bolak-balik mengenkripsi bagian data user berulang kali. Sehingga lebih efektif jika dibandingkan menggunakan data array yang ditulis langsung dalam kode JavaScript.
Tapi jika kamu ingin menggunakan versi yang ditulis langsung dalam kode JavaScript juga boleh, saya akan sediakan dua versi yang berbeda juga. Untuk demo fungsional dan tampilan fitur Continue Reading, kamu bisa lihat di halaman berikut.
Cara Memasang Fitur Continue Reading dengan Validasi Email dan Password / Kode Lisensi
Seperti yang sudah saya bilang di atas, saya akan sediakan dua versi berbeda, yaitu versi biasa dengan menuliskan data user (email dan password / kode lisensi) dalam kode JavaScript langsung dan versi kedua yang menggunakan server dari pihak ketiga sebagai database atau penampung data user. Saya lebih merekomendasikan versi yang kedua karena lebih efektif dan mudah dipersonalisasikan. Tapi jika domain kamu tidak menggunakan Name Server Cloudflare, kamu bisa gunakan versi yang pertama.
Script Fitur Continue Reading Button Biasa
- Masuk ke akun Blogger kamu.
- Masuk ke menu
TemaEdit HTML. - Kemudian salin dan taruh kode CSS di bawah ini di atas tag
</style>atau]]></b:skin>. - Jika sudah, selanjutnya cari kode
</body>dalam template blog kamu (umumnya berada di bagian paling bawah). Kemudian taruh JavaScript Continue Reading Button Locked di bawah ini tepat di atas kode tersebut. - Jika semua kode sudah ditambahkan ke dalam template blog kamu, klik simpan.
- Selesai!
/* css continue reading locked button by ignelius.com */
button#bukaKonten svg {
margin: 3px 5px -5px 0;
}
button#bukaKonten path {
stroke: #fff;
}
#popup-form {
background-color: #fff;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: none;
position: fixed;
top: 50%;
left: 50%;
width: 100%;
height: auto;
max-width: 90%;
transform: translate(-50%, -50%);
padding: 20px;
border: 1px solid #ccc;
z-index: 3;
}
@media (min-width: 480px) {
#popup-form {
width: 100%;
max-width: 680px;
}
}
.judul-form {
font-size: 18px;
font-weight: bold;
color: #000;
margin: 10px 0 15px 0;
}
.desk-form {
font-size: 12px;
margin: 15px 0;
}
.form-users {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
max-width: 100%;
overflow: hidden;
}
.form-users label {
display: flex;
justify-content: center;
align-items: center;
background: #f2f2f2;
padding: 5px 10px;
margin-right: 10px;
flex-grow: 1;
width: 50px;
height: 50px;
border: 1px solid #ccc;
}
.form-users label svg path {
stroke-width: 2px;
}
.form-users input {
width: 100%;
height: 50px;
background: #f2f2f2;
padding: 1rem 1.25rem;
margin: 1.25rem 0;
outline: none;
border: 1px solid #ccc;
}
.btn-validate {
width: 100%;
margin: 1rem 0;
}
div#tutupKonten {
position: absolute;
top: -40px;
right: 0;
cursor: pointer;
}
div#tutupKonten svg {
width: 25px;
height: 25px;
}
div#tutupKonten path {
stroke-width: 2px;
}
.detail-foot {
font-size: 10px;
margin-top: 1rem;
}
.round {
border-radius: 30px;
}
.radius {
border-radius: 7px;
}
.center {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}Untuk kode CSS, kamu bisa sesuaikan lagi dengan kode CSS template blog kamu.
<script>/*<![CDATA[*/
// js continue reading button locked with validation (email and password) by ignelius.com
var igneliusUserData = {
"[email protected]": "kodelisensi1",
"[email protected]": "kodelisensi2"
// Tambahkan data user lainnya di sini
};
document.getElementById('bukaKonten').addEventListener('click', function() {
document.getElementById('popup-form').style.display = 'block';
});
function closeButton() {
document.getElementById('bukaKonten').style.display = 'none';
}
function showButton() {
document.getElementById('bukaKonten').style.display = 'block';
}
function showKonten() {
document.getElementById('konten-artikel').style.display = 'block';
document.getElementById('popup-form').style.display = 'none';
closeButton();
}
function closeKonten() {
document.getElementById('popup-form').style.display = 'none';
}
document.getElementById('tutupKonten').addEventListener('click', function() {
closeKonten();
});
function igneliusCheckData() {
var userEmail = localStorage.getItem('userEmail');
if (userEmail) {
showKonten();
} else {
showButton();
}
}
igneliusCheckData();
// Fungsi validasi data user dari data array langsung
function igneliusValidate() {
var inputEmail = document.getElementById('email').value.trim();
var inputLisensi = document.getElementById('lisensi-user').value.trim();
console.log('Input Email:', inputEmail);
console.log('Input Kode Lisensi:', inputLisensi);
console.log('Data dari JavaScript:', igneliusUserData);
if (igneliusUserData.hasOwnProperty(inputEmail)) {
if (igneliusUserData[inputEmail] === inputLisensi) {
localStorage.setItem('userEmail', inputEmail);
showKonten();
} else {
alert('Kode lisensi tidak valid. Silakan coba lagi.'); // notifikasi jika kode lisensi atau password tidak valid
}
} else {
alert('Email tidak valid. Silakan coba lagi.'); // notifikasi jika email tidak valid
}
}
function igneliusCheckData() {
var userEmail = localStorage.getItem('userEmail');
if (userEmail && igneliusUserData.hasOwnProperty(userEmail)) {
showKonten();
} else if (!userEmail) {
showButton();
}
}
igneliusCheckData();
/*]]>*/</script>Jangan lupa ganti dan sesuaikan semua teks yang ditandai.
Sampai di tahap ini script fitur Continue Reading Button sudah terpasang. Langkah terakhir tinggal memanggil semua fungsional ke dalam postingan atau halaman blog. Untuk kode HTML pemanggilnya, kamu bisa salin kode di bawah ini lalu taruh di setiap postingan blog yang ingin kamu kunci.
<!--[ tombol untuk membuka konten popup ]-->
<button class="center round" id="bukaKonten">Lanjutkan Membaca</button>
<!--[ isi konten yang disembunyikan sebelum pengguna masuk ]-->
<div id="konten-artikel" style="display: none;">
<p>Ini adalah konten artikel eksklusif / premium yang hanya dapat diakses pengguna setelah validasi berhasil.</p>
<!--[ tambahkan konten lainnya di bawah ini ]-->
</div>
<!--[ konten popup untuk memasukkan data pengguna seperti email dan password / kode lisensi ]-->
<div id="popup-form" class="radius box-shadow">
<div class="judul-form center">Lanjutkan Membaca</div>
<div class="desk-form center">Untuk lanjut membaca artikel ini, harap masukkan alamat email dan kode lisensi yang terdaftar. Artikel ini hanya terbuka bagi yang sudah membeli konten ini.</div>
<!--[ form / kolom input email ]-->
<div class="form-users">
<label for="email" class="radius">
<svg viewBox='0 0 24 24'><path d='M17 21H7C3 21 2 20 2 16V8C2 4 3 3 7 3H17C21 3 22 4 22 8V16C22 20 21 21 17 21Z'></path><path d='M14 8H19'></path><path d='M15 12H19'></path><path d='M17 16H19'></path><path d='M8.49994 11.2899C9.49958 11.2899 10.3099 10.4796 10.3099 9.47992C10.3099 8.48029 9.49958 7.66992 8.49994 7.66992C7.50031 7.66992 6.68994 8.48029 6.68994 9.47992C6.68994 10.4796 7.50031 11.2899 8.49994 11.2899Z'></path><path d='M12 16.33C11.86 14.88 10.71 13.74 9.26 13.61C8.76 13.56 8.25 13.56 7.74 13.61C6.29 13.75 5.14 14.88 5 16.33'></path></svg>
</label>
<input class="radius" id="email" type="email" placeholder="Masukkan email user..."/>
</div>
<!--[ form / kolom input password atau kode lisensi ]-->
<!--[ kamu bisa ubah kolom input ini menjadi kolom input pin atau password, ubah nilai pada atribut "type" sesuai kebutuhan. misalnya "type='password'" atau "type='number'" ]-->
<div class="form-users">
<label class="radius" for="lisensi-user">
<svg viewBox='0 0 24 24'><path d='M19.79 14.9299C17.73 16.9799 14.78 17.6099 12.19 16.7999L7.48002 21.4999C7.14002 21.8499 6.47002 22.0599 5.99002 21.9899L3.81002 21.6899C3.09002 21.5899 2.42002 20.9099 2.31002 20.1899L2.01002 18.0099C1.94002 17.5299 2.17002 16.8599 2.50002 16.5199L7.20002 11.8199C6.40002 9.21995 7.02002 6.26995 9.08002 4.21995C12.03 1.26995 16.82 1.26995 19.78 4.21995C22.74 7.16995 22.74 11.9799 19.79 14.9299Z' stroke-miterlimit='10'></path><path d='M6.89001 17.49L9.19001 19.79' stroke-miterlimit='10'></path><path d='M14.5 11C15.3284 11 16 10.3284 16 9.5C16 8.67157 15.3284 8 14.5 8C13.6716 8 13 8.67157 13 9.5C13 10.3284 13.6716 11 14.5 11Z'></path></svg>
</label>
<input class="radius" id="lisensi-user" type="text" placeholder="Masukkan kode lisensi..."/>
</div>
<!--[ tombol validasi data pengguna ]-->
<button class="btn-validate round center" onclick="igneliusValidate()">Buka Konten</button>
<!--[ konten penanganan jika belum terdaftar atau ingin membeli konten ]-->
<div class="detail-foot center">Belum punya kode lisensi? <a href="https://www.ignelius.com" target="_blank">Beli konten</a> ini.</div>
<!--[ tombol untuk menutup konten popup ]-->
<div id="tutupKonten">
<svg viewBox='0 0 24 24'><path d='M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z'></path><path d='M9.16998 14.83L14.83 9.17004'></path><path d='M14.83 14.83L9.16998 9.17004'></path></svg>
</div>
</div>bukaKonten, kamu bisa taruh di paragraf awal (kedua atau ketiga) sebagai konten paragraf permulaan (konten spoiler). Kurang lebih hasilnya akan seperti ini.<p>Paragraf pertama...</p>
<p>Paragraf kedua...</p>
<!--[ taruh elemen button dengan ID "bukaKonten" di bawah ini ]-->
<button id="bukaKonten">Lanjutkan Membaca</button>
...Script Fitur Continue Reading Menggunakan JSON dari Server / Database
Untuk versi yang kedua, tentunya membutuhkan pihak ketiga untuk dijadikan sebagai database atau penyimpanan data user. Bebas mau menggunakan platform apapun. Bisa menggunakan Workers Cloudflare, Firebase, Google Sheet atau Github. Saya rekomendasikan menggunakan Github saja jika tidak paham mengenai Workers Cloudflare atau database Firebase.
Membuat Database Data User di Github, Cloudflare atau Firebase
Untuk struktur atau penulisan data user, kamu bisa gunakan contoh dari script JSON di bawah ini. Salin dan unggah file JSON di bawah ini ke repositori Github kamu kemudian salin URL repositorinya.
{
"[email protected]": "kodelisensi1", // bisa pakai kode lisensi atau password
"[email protected]": "kodelisensi2", // bisa pakai kode lisensi atau password
"[email protected]": "kodelisensi3"
// tambahkan data user lainnya di sini...
}
Memasang Script Continue Reading Button di Blog
Untuk kode HTML dan CSS masih sama dengan kode HTML dan CSS pada versi yang pertama.
Jika sudah membuat data user sesuai kebutuhan, langkah selanjutnya menambahkan kode JavaScript Continue Reading Button ke blog. Untuk penempatan kodenya sama seperti langkah nomor 4 pada poin sebelumnya, yaitu di atas tag </body>.
<script>/*<![CDATA[*/
// js continue reading button locked with validation (email and password) database server by ignelius.com
document.getElementById('bukaKonten').addEventListener('click', function() {
document.getElementById('popup-form').style.display = 'block';
});
function closeButton() {
document.getElementById('bukaKonten').style.display = 'none';
}
function showButton() {
document.getElementById('bukaKonten').style.display = 'block';
}
function showKonten() {
document.getElementById('konten-artikel').style.display = 'block';
document.getElementById('popup-form').style.display = 'none';
closeButton();
}
function closeKonten() {
document.getElementById('popup-form').style.display = 'none';
}
document.getElementById('tutupKonten').addEventListener('click', function() {
closeKonten();
});
// Fungsi validasi dengan mengambil data user dari server
function igneliusValidate() {
var inputEmail = document.getElementById('email').value.trim();
var inputLisensi = document.getElementById('lisensi-user').value.trim();
console.log('Input Email:', inputEmail);
console.log('Input Kode Lisensi:', inputLisensi);
// Ambil data user (email dan password/ lisensi) dari server. Ganti dengan URL server JSON kamu
fetch('https://www.ignelius.com/.../data-user.json')
.then(response => response.json())
.then(data => {
console.log('Data dari server:', data);
if (data.hasOwnProperty(inputEmail)) {
if (data[inputEmail] === inputLisensi) {
localStorage.setItem('userEmail', inputEmail);
showKonten();
} else {
alert('Kode lisensi tidak valid. Silakan coba lagi.'); // notifikasi jika kode lisensi / password tidak valid
}
} else {
alert('Email tidak valid. Silakan coba lagi.'); // notifikasi jika email tidak valid
}
})
.catch(error => {
console.error('Gagal mengambil data lisensi:', error); // notifikasi jika gagal mengambil data user dari server
});
}
function igneliusCheckData() {
var userEmail = localStorage.getItem('userEmail');
if (userEmail) {
showKonten();
} else {
showButton();
}
}
igneliusCheckData();
/*]]>*/</script>https://www.ignelius.com/.../data-user.json adalah URL database tempat kamu menyimpan data user. Ganti dengan URL database yang telah kamu buat pada langkah awal tadi.
Kekurangan Script Continue Reading dengan Validasi Data User
Dari sekian banyak kelebihan yang diperoleh dari fitur Continue Reading ini, terdapat beberapa kekurangan juga. Satu-satunya kekurangan dari script Continue Reading ini adalah konten artikel yang tetap bisa dilihat melalui inspek elemen. Kekurangan ini dikarenakan semua konten premium ditulis langsung menggunakan kode HTML dalam postingan blog yang tidak dapat kita enkripsi. Beda halnya jika konten premium ditulis dalam JavaScript sebagai innerHTML yang dapat kita enkripsi. Tapi kekurangan ini hanya diketahui orang yang sudah paham dunia blog dengan melihatnya melalui inspek elemen.
Penutup
Sampai tahap ini sudah selesai memasang fitur Continue Reading Button pada konten premium di blog dengan validasi data user. Jika ada yang belum paham atau terjadi eror pada script, kamu bisa laporkan di kolom komentar. Semoga bermanfaat.
1 komentar