Cara Menampilkan Notifikasi Artikel Populer di Blog: Auto Trending!

Apakah kamu ingin membuat pengunjung lebih lama di blog dan membaca lebih banyak artikel? Salah satu cara yang efektif adalah dengan menampilkan notifikasi otomatis yang merekomendasikan artikel populer di blog kamu.

Notifikasi ini akan muncul di pojok kanan atas dan bergantian menampilkan artikel yang sedang trending! 

Kenapa Harus Menampilkan Notifikasi Artikel Populer?

✅ Meningkatkan Pageviews – Pengunjung akan lebih tertarik membaca lebih banyak artikel.
✅ Mengurangi Bounce Rate – Membantu pengunjung tetap di blog lebih lama.
✅ Meningkatkan Interaksi – Blog terlihat lebih profesional dan interaktif.

Cara Memasang Notifikasi Artikel Populer di Blogspot

1️⃣ Masuk ke Blogger
2️⃣ Pilih Tata Letak > Tambahkan Gadget
3️⃣ Pilih HTML/JavaScript
4️⃣ Salin dan tempel kode di bawah ini:

<style> /* Gaya notifikasi */ .notif-box { position: fixed; top: 20px; right: 20px; width: 320px; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 10px; border-radius: 8px; display: flex; align-items: center; border-left: 5px solid #ff5722; opacity: 0; transform: translateX(100%); transition: opacity 0.5s, transform 0.5s; font-family: Arial, sans-serif; word-wrap: break-word; overflow: hidden; } .notif-box img { width: 50px; height: 50px; object-fit: cover; margin-right: 10px; border-radius: 5px; } .notif-box a { text-decoration: none; color: black; font-weight: bold; display: block; white-space: normal; word-wrap: break-word; overflow: hidden; } .notif-box div { flex: 1; } .notif-show { opacity: 1 !important; transform: translateX(0) !important; } </style> <div id="notif-container"></div> <script> const articles = [ { title: "Cara Meningkatkan Trafik Blog Secara Organik dalam Waktu Singkat", url: "https://blogkamu.com/artikel1", img: "https://blogkamu.com/path-to-thumbnail1.jpg" }, { title: "Rahasia SEO untuk Blogger: Optimasi yang Harus Kamu Coba Sekarang!", url: "https://blogkamu.com/artikel2", img: "https://blogkamu.com/path-to-thumbnail2.jpg" }, { title: "Tips Menulis Artikel yang Bisa Membuat Pembaca Betah Berlama-lama", url: "https://blogkamu.com/artikel3", img: "https://blogkamu.com/path-to-thumbnail3.jpg" } ]; let currentIndex = 0; function showNotification() { const container = document.getElementById("notif-container"); container.innerHTML = ""; const article = articles[currentIndex]; const notif = document.createElement("div"); notif.className = "notif-box"; notif.innerHTML = ` <img src="${article.img}" alt="${article.title}"> <div> <a href="${article.url}" target="_blank">${article.title}</a> <p style="margin: 5px 0; font-size: 12px; color: gray;">Sedang trending 🔥</p> </div> `; container.appendChild(notif); setTimeout(() => { notif.classList.add("notif-show"); }, 100); setTimeout(() => { notif.classList.remove("notif-show"); }, 5000); currentIndex = (currentIndex + 1) % articles.length; } setInterval(showNotification, 7000); showNotification(); </script>

Cara Mengedit Skrip Notifikasi

🛠 Ganti Judul & Link Artikel:
Ubah daftar artikel di bagian const articles = [...] dengan artikel blog kamu.

🖼 Ganti Thumbnail:
Pastikan URL gambar pada img sesuai dengan gambar unggulan dari artikel kamu.

⏳ Atur Waktu Notifikasi:
Ingin notifikasi muncul lebih lama? Ubah angka 7000 pada setInterval(showNotification, 7000); ke angka yang lebih besar.

Bagaimana Hasilnya?

✅ Notifikasi muncul di pojok kanan atas.
✅ Artikel populer akan tampil bergantian setiap 7 detik.
✅ Jika diklik, pengunjung akan diarahkan ke artikel tersebut.

🚀 Sekarang blog kamu jadi lebih interaktif dan menarik!

Jangan lupa bagikan artikel ini jika bermanfaat ya! 🤩

Berbagi :