Cara Membuat Tombol Subscribe Dengan Recapthca Di Blogspot ( Blogger ) - hallo semua pada kesempatan kali, saya akan membagikan tulisan Cara Membuat Tombol Subscribe Di Blogger Dengan Tombol Recapthca .
Ketahui Tentang Apa itu reCAPTCHA?
reCAPTCHA adalah alat yang dikembangkan oleh Google untuk membantu melindungi situs web dari spam dan penyalahgunaan dengan membedakan antara pengguna manusia dan bot. Dengan menggunakan reCAPTCHA, Anda dapat meningkatkan keamanan blog Anda dan memastikan bahwa hanya pengunjung yang sah yang dapat berlangganan.
Mengapa Menggunakan Popup reCAPTCHA ?
Menggunakan Tombol Subscribe Dengan popup reCAPTCHA untuk meminta pengunjung berlangganan memiliki beberapa keuntungan:
1. Meningkatkan Keamanan: Dengan menambahkan verifikasi reCAPTCHA, Anda mengurangi kemungkinan spam dan pendaftaran palsu.
2. Meningkatkan Interaksi: Popup dapat menarik perhatian pengunjung dan mendorong mereka untuk berinteraksi dengan konten Anda.
3. Desain yang Menarik: Popup dapat disesuaikan agar sesuai dengan desain blog Anda, membuatnya lebih menarik bagi pengunjung.
Cara Membuat Popup reCAPTCHA di Blogger
Berikut adalah langkah-langkah untuk membuat popup reCAPTCHA yang meminta pengunjung untuk berlangganan blog Anda:
Langkah 1: Mendapatkan Kunci reCAPTCHA
Sebelum Anda mulai, Anda perlu mendapatkan kunci situs dan kunci rahasia dari Google reCAPTCHA. Berikut adalah cara untuk mendapatkannya:
1. Kunjungi [Google reCAPTCHA](https://www.google.com/recaptcha).
2. Klik "Admin Console" di bagian atas halaman.
3. Daftarkan situs web Anda dengan memilih jenis reCAPTCHA yang diinginkan (v2 atau v3) dan masukkan nama domain blog Anda.
4. Setelah mendaftar, Anda akan mendapatkan kunci situs dan kunci rahasia.
Langkah 2: Menambahkan Kode HTML ke Blogger
Setelah Anda mendapatkan kunci, langkah berikutnya adalah menambahkan kode HTML ke blog Anda. Masuk ke Blogger dan ikuti langkah-langkah berikut:
1. Masuk ke dashboard Blogger Anda.
2. Pilih blog yang ingin Anda edit.
3. Klik pada Tema di menu sebelah kiri.
4. Pilih Edit HTML.
Temukan tempat di dalam tag `<body>` di mana Anda ingin menambahkan popup. Kemudian, masukkan kode berikut:
<style>
/* Gaya Popup */
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s ease;
z-index: 999;
}
.popup-content {
background-color: #fff;
padding: 20px;
border-radius: 8px;
text-align: center;
}
.popup.show {
visibility: visible;
opacity: 1;
}
/* Tambahkan margin untuk reCAPTCHA agar lebih terlihat */
.g-recaptcha {
margin-top: 20px;
}
.subscribe-keren, .button-later {
margin-top: 10px;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
display: inline-block;
cursor: not-allowed;
}
.subscribe-keren:disabled, .button-later:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.subscribe-keren.active, .button-later.active {
background-color: #007bff;
cursor: pointer;
}
</style>
<script src="https://www.google.com/recaptcha/api.js" async="async" defer="defer"></script>
<div id="recaptcha-popup" class="popup">
<div class="popup-content">
<p>Verifikasi Bahwa Anda Bukan Robot, dan Anda juga bisa mengikuti Facebook kami agar tak ketinggalan postingan terbaru dari kami.</p>
<a id="subscribe-button" class="subscribe-keren" href="https://www.facebook.com/OKAYIMDOTCOM/" onclick="return false;" disabled>IKUTI BLOG</a>
<a id="later-button" class="button-later" href="#" onclick="return false;" disabled>LATER</a>
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-callback="recaptchaSuccess"></div>
</div>
</div>
<script>
// Cek apakah popup sudah muncul sebelumnya
function hasRecaptchaShown() {
const lastShown = localStorage.getItem('recaptchaLastShown');
if (lastShown) {
const elapsedTime = Date.now() - lastShown;
// Jika sudah 1 jam (3600000 ms), tampilkan popup lagi
if (elapsedTime >= 3600000) {
return false;
}
return true;
}
return false;
}
// Tampilkan popup jika belum muncul
function showRecaptchaPopup() {
console.log('Popup akan ditampilkan.');
const popup = document.getElementById('recaptcha-popup');
popup.classList.add('show');
}
// Fungsi yang dipanggil setelah reCAPTCHA sukses diisi
function recaptchaSuccess() {
console.log('reCAPTCHA berhasil diselesaikan.');
const subscribeButton = document.getElementById('subscribe-button');
const laterButton = document.getElementById('later-button');
// Menghapus atribut disabled dan mengubah tampilan tombol
subscribeButton.removeAttribute('disabled');
subscribeButton.classList.add('active');
laterButton.removeAttribute('disabled');
laterButton.classList.add('active');
// Menghapus onclick yang menonaktifkan tombol
subscribeButton.onclick = function() {
window.location.href = this.href; // Arahkan ke link setelah diklik
};
laterButton.onclick = function() {
const popup = document.getElementById('recaptcha-popup');
popup.classList.remove('show'); // Menutup popup
};
// Simpan waktu saat reCAPTCHA berhasil diselesaikan
localStorage.setItem('recaptchaLastShown', Date.now());
}
// Munculkan popup saat pengunjung pertama kali mengunjungi website
document.addEventListener('DOMContentLoaded', function () {
console.log('DOM Loaded');
if (!hasRecaptchaShown()) {
showRecaptchaPopup();
}
});
</script>
Gantilah `YOUR_SITE_KEY` dengan kunci situs yang Anda dapatkan dari Google reCAPTCHA.
Langkah 3: Menyimpan dan Menggunakan Kode
Setelah Anda menambahkan kode, pastikan untuk menyimpan perubahan. Sekarang, setiap kali pengunjung membuka blog Anda, mereka akan melihat popup yang meminta mereka untuk memverifikasi reCAPTCHA sebelum dapat menekan tombol subscribe.
Membuat popup reCAPTCHA untuk Tombol subscribe di Blogger adalah langkah yang efektif untuk Blog Anda.
Comments
Post a Comment