Membuat Tombol Subscribe Di Blogger/Blogspot, menambahkan tombol subscribe di blogger, memasang tombols subscribe blog di blogspot, membuat web push notification di blogspot, tampilan web push notification di blogspot.
Cara Membuat Website Notifikasi di Blogspot dengan Facebook
Notifikasi pada sebuah website berfungsi untuk memberikan informasi kepada pengunjung tentang pembaruan, promosi, atau berita terbaru. Salah satu cara untuk meningkatkan interaksi dengan pengunjung adalah dengan menambahkan fitur pop-up notifikasi. Pada artikel ini, kami akan membahas langkah-langkah membuat website dengan notifikasi sederhana menggunakan Blogspot, diintegrasikan dengan tautan menuju Facebook. Artikel ini juga akan mencakup penjelasan kode HTML dan JavaScript yang digunakan untuk membuat fitur tersebut.
Mengapa Membutuhkan Fitur Notifikasi?
Fitur notifikasi dapat meningkatkan pengalaman pengunjung dengan cara berikut:
- Memberikan Informasi Terbaru: Pengunjung mendapatkan pembaruan langsung, seperti berita atau promosi.
- Meningkatkan Interaksi: Notifikasi memotivasi pengunjung untuk mengambil tindakan, seperti mengunjungi halaman tertentu.
- Menarik Pengunjung Kembali: Dengan menawarkan nilai tambah melalui informasi, pengunjung lebih cenderung kembali ke website Anda.
Di Blogspot, Anda bisa menambahkan kode HTML, CSS, dan JavaScript untuk membuat pop-up notifikasi yang menarik. Dalam tutorial ini, kita akan membuat pop-up yang memberikan opsi kepada pengunjung untuk mengunjungi profil Facebook.
Langkah-Langkah Membuat Tombol Notifikasi (Subscribe)di Blogspot
1. Siapkan Kode HTML, CSS, dan JavaScript
Berikut adalah contoh kode lengkap untuk membuat pop-up notifikasi yang bisa ditambahkan ke Blogspot:
<!doctype html>
<html>
<head>
<title>Popup Notifikasi</title>
<style>
/* Gaya untuk overlay (latar belakang transparan) */
#popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
z-index: 999;
}
/* Gaya untuk kontainer pop-up */
#popup-container {
position: fixed;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background-color: white;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
z-index: 1000;
}
/* Gaya untuk ikon */
#popup-icon {
width: 50px;
height: 50px;
margin-bottom: 15px;
}
/* Gaya teks di pop-up */
#popup-text {
font-size: 16px;
color: #333;
margin-bottom: 20px;
}
/* Gaya tombol */
.popup-button {
padding: 10px 20px;
border-radius: 5px;
border: none;
font-size: 14px;
cursor: pointer;
margin: 5px;
transition: background-color 0.3s ease;
}
.popup-button.allow {
background-color: #007bff;
color: white;
}
.popup-button.allow:hover {
background-color: #0056b3;
}
.popup-button.deny {
background-color: #f1f1f1;
color: #333;
}
.popup-button.deny:hover {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<!-- Overlay -->
<div id="popup-overlay"></div>
<!-- Kontainer Pop-Up -->
<div id="popup-container">
<img id="popup-icon" src="https://i.ibb.co.com/27BcKHz/FB-IMG-17335919879707438.jpg" alt="Notification Icon" />
<div id="popup-text">Kami ingin mengirimkan pemberitahuan untuk berita terbaru dan pembaruan.</div>
<button class="popup-button deny" onclick="closePopup()">Tidak, Terima Kasih</button>
<button class="popup-button allow" onclick="redirectToFacebook()">Izinkan</button>
</div>
<script>
// Fungsi untuk membuka Facebook
function redirectToFacebook() {
window.open("https://www.facebook.com/profile.php?id=61568100825590", "_blank");
closePopup();
}
// Fungsi untuk menutup pop-up
function closePopup() {
document.getElementById("popup-overlay").style.display = "none";
document.getElementById("popup-container").style.display = "none";
localStorage.setItem("lastPopupTime", Date.now()); // Simpan waktu terakhir pop-up ditutup
}
// Fungsi untuk mengecek dan menampilkan pop-up
function checkAndShowPopup() {
const lastPopupTime = localStorage.getItem("lastPopupTime");
const currentTime = Date.now();
if (!lastPopupTime || currentTime - lastPopupTime > 3600000) { // 1 jam = 3600000 ms
document.getElementById("popup-overlay").style.display = "block";
document.getElementById("popup-container").style.display = "block";
}
}
// Tampilkan pop-up saat halaman selesai dimuat
window.addEventListener("load", checkAndShowPopup);
</script>
</body>
</html>
2. Tambahkan Kode ke Blogspot
Langkah berikutnya adalah menambahkan kode ke Blogspot Anda.
- Login ke Blogspot: Masuk ke akun Blogspot Anda.
- Buka Tema: Klik menu Tema > Edit HTML.
- Tempelkan Kode: Salin kode di atas dan tempelkan di dalam tag
<body>pada template Anda. - Simpan: Klik tombol Simpan.
3. Penjelasan Kode
HTML
- Bagian ini membuat struktur pop-up, termasuk ikon, teks, dan tombol.
- Ikon yang digunakan berada dalam elemen
<img>dengan atributsrcuntuk mengarahkan ke gambar yang relevan.
CSS
- Memberikan desain yang menarik untuk pop-up, seperti latar belakang semi-transparan, bayangan, dan efek hover pada tombol.
JavaScript
redirectToFacebook: Membuka halaman Facebook di tab baru.closePopup: Menutup pop-up dan menyimpan waktu penutupan dilocalStorage.checkAndShowPopup: Memeriksa kapan terakhir kali pop-up ditutup. Jika lebih dari satu jam, pop-up akan muncul kembali.
4. Fitur Tambahan
Anda dapat memodifikasi kode untuk meningkatkan fungsionalitas:
- Kustomisasi Teks: Ubah teks pada pop-up agar sesuai dengan kebutuhan Anda.
- Integrasi Media Sosial Lain: Ubah tautan ke platform lain, seperti Instagram atau WhatsApp.
- Pengaturan Waktu: Ubah durasi penampilan ulang pop-up dengan mengubah nilai
3600000pada JavaScript.
5. Manfaatkan dengan Bijak
Pastikan notifikasi tidak mengganggu pengalaman pengguna. Gunakan fitur ini untuk menyampaikan informasi yang benar-benar penting dan relevan. Jangan lupa mematuhi kebijakan privasi dengan tidak menyimpan data pribadi tanpa izin.
Dengan menambahkan fitur notifikasi di Blogspot, Anda dapat meningkatkan interaksi dan mengarahkan pengunjung ke platform seperti Facebook. Ikuti langkah-langkah di atas, dan sesuaikan dengan kebutuhan Anda!
.jpeg)
.png)