Source Code Notifikasi Postingan Terbaru Menggunakan Blogger API

Perkenalan

Halo Semuanya, dipostingan kali ini saya akan membagikan Script Notifikasi Postingan Terbaru Menggunakan Blogger API. Script ini cocok buat Template Streaming, Manga yang dimana Postingan nya selalu Update di setiap jam atau menit.

Notifikasi ini Akan Tampil apabila ada postingan Baru atau postingan yang diupdate pada Blog kalian. Notifikasi nya muncul pas di detik 30 ketika kalian menerbitkan Postingan atau mengupdate postingan kalian.

Seperti biasa kalian bisa mengembangkan script ini Sesuai Keinginan kalian, Untuk Cara Pemasangan Kalian bisa liat disini

Untuk Demo Kalian Bisa Cek Link DIbawah

Live Demo

Penting!
Sebelum Memulai Nya Ada Baiknya Kalian Memback-up Template Kalian Terlebih dahulu.

Source Code

  <div id="notification" class="notification">
        <div class="notification-header">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/alarm.png" alt="Ikon Lonceng">
            <span id="notification-content"></span>
            <button class="close-btn" onclick="closeNotification()">×</button>
        </div>
    </div>

 <style>
 .notification{display:none;background-color:#4caf50;color:#fff;padding:20px;margin:10px 0;border-radius:8px;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 2px 15px rgba(0,0,0,.3);width:400px;animation:.5s slideIn;z-index:1000}.notification-header{display:flex;align-items:center}.notification-header img{width:30px;height:30px;margin-right:10px}.close-btn{cursor:pointer;margin-left:auto;background:0 0;border:none;color:#fff;font-size:20px}@keyframes slideIn{from{opacity:0;transform:translate(-50%,-60%)}to{opacity:1;transform:translate(-50%,-50%)}}
    </style>
   

 <script>
        // Ganti ID Blog dengan ID Blog Kalian Anda
        const API_KEY = 'API-KEY-KALIAN';
        const BLOG_ID = 'ID_BLOG_KALIAN';
        const API_URL = `https://www.googleapis.com/blogger/v3/blogs/${BLOG_ID}/posts?key=${API_KEY}`;

        let hasNewPosts = false; // Flag untuk menunjukkan apakah ada postingan baru
        let notificationVisible = false; // Flag untuk menunjukkan apakah notifikasi terlihat

        async function getLatestPosts() {
            try {
                const response = await fetch(API_URL);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const data = await response.json();
                return data.items;
            } catch (error) {
                console.error('Error fetching posts:', error);
            }
        }

        function showNotification(message) {
            const notificationDiv = document.getElementById('notification');
            const notificationContent = document.getElementById('notification-content');

            notificationContent.innerHTML = message;
            notificationDiv.style.display = 'block'; // Tampilkan notifikasi
            notificationVisible = true; 
        }

        function closeNotification() {
            const notificationDiv = document.getElementById('notification');
            notificationDiv.style.display = 'none'; // Sembunyikan notifikasi
            notificationVisible = false; // 
        }

        async function checkForLatestPosts() {
            const posts = await getLatestPosts();
            const now = new Date();
            const oneMinuteAgo = new Date(now.getTime() - (1 * 60 * 1000)); // 1 menit yang lalu

            // postingan yang baru diposting dalam 1 menit terakhir
            const newPosts = posts.filter(post => {
                const publishedDate = new Date(post.published);
                return publishedDate >= oneMinuteAgo;
            });

            // postingan yang baru diperbarui dalam 1 menit terakhir
            const updatedPosts = posts.filter(post => {
                const updatedDate = new Date(post.updated);
                return updatedDate >= oneMinuteAgo && post.published !== post.updated;
            });

            // Script Notifikasi Postingan Baru
            if (newPosts.length > 0) {
                hasNewPosts = true; // postingan baru
                if (!notificationVisible) {
                    newPosts.forEach(post => {
                        showNotification(`Postingan baru: <strong>${post.title}</strong> <br><a href="${post.url}" target="_blank" style="color: white;">Baca Selengkapnya</a>`);
                    });
                }
            }

            // Script Notifikasi Postingan yang baru diupdate
            if (updatedPosts.length > 0) {
                if (!notificationVisible) {
                    updatedPosts.forEach(post => {
                        showNotification(`Baru diperbarui: <strong>${post.title}</strong> <br><a href="${post.url}" target="_blank" style="color: white;">Baca Selengkapnya</a>`);
                    });
                }
            }
        }

        // fungsi untuk memeriksa postingan terbaru setiap 30 detik
        setInterval(checkForLatestPosts, 30 * 1000); // Setiap 30 detik

        // Cek postingan terbaru saat pertama kali dijalankan
        checkForLatestPosts();
    </script>

Kesimpulan

Diatas adalah Source Code Notifikasi Postingan Terbaru Menggunakan Blogger API., Jika Ingin Request Silahkan Berikan Komentar atau menuju Halaman Request:v. Sampai Jumpa di potingan Berikutnya :p