Menarik Pengunjung dengan Random Post di Blog Anda

December 26, 2024

Cara Menarik Pengunjung dengan Random Post keren di Blog Anda

Element Script Random Post

Klik 2 Kali untuk menyalin

<ul id="random-posts"></ul>

<!-- Popup Container -->
<div id="popup-container">
  <div id="popup-content">
    <button id="close-popup">Close</button>
    <div id="popup-body"></div>
  </div>
</div>

<link rel="stylesheet" type="text/css" href="styles.css">

/* Styling untuk Random Posts */
#random-posts {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

#random-posts li {
  width: calc(100% / 2 - 15px);
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

#random-posts li:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}
#random-posts img {
  width: 100%;
  height: auto;
}

#random-posts div {
  padding: 10px;
}

#random-posts .random-meta {
  font-size: 0.9rem;
  color: #666;
  margin-top: 5px;
}

#random-posts .random-title {
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
  text-decoration: none;
}
#random-posts .random-title:hover {
  color: #007BFF;
}

<script type="text/javascript" src="script.js"></script>

document.addEventListener("DOMContentLoaded", function () {
    const randomPostsNumber = 5; 
    const randomPostsChars = 110; 
    const randomPostsContainer = document.getElementById("random-posts");

    function getRandomPosts(entries, count) {
        const shuffled = entries.sort(() => 0.5 - Math.random()); 
        return shuffled.slice(0, count); 
    }

    function loadRandomPosts() {
        const randomParam = new Date().getTime(); 
        const script = document.createElement("script");
        script.src = `/feeds/posts/default?alt=json-in-script&max-results=50&callback=renderRandomPosts&random=${randomParam}`;
        document.body.appendChild(script);
    }

    window.renderRandomPosts = function (json) {
        if (!json.feed.entry) return;

        const randomPosts = getRandomPosts(json.feed.entry, randomPostsNumber);

        randomPosts.forEach(entry => {
            const title = entry.title.$t;
            const link = entry.link.find(l => l.rel === "alternate").href;
            const content = entry.content ? entry.content.$t : (entry.summary ? entry.summary.$t : "");
            const snippet = content.replace(/<[^>]*>/g, "").substring(0, randomPostsChars) + "...";
            const thumbnail = entry.media$thumbnail ? entry.media$thumbnail.url : "https://via.placeholder.com/150";
            const publishedDate = entry.published ? formatDate(entry.published.$t) : "Unknown Date";
            const comments = entry.thr$total ? `${entry.thr$total.$t} Comments` : "No Comments";

            const li = document.createElement("li");
            li.innerHTML = `
                <a href="#" class="random-link" data-title="${title}" data-link="${link}" data-snippet="${snippet}">
                    <img src="${thumbnail}" alt="${title}">
                    <div>
                        <div class="random-title">${title}</div>
                        <span class="random-meta">Published: ${publishedDate} - ${comments}</span>
                    </div>
                </a>
            `;
            randomPostsContainer.appendChild(li);
        });
    };

    function formatDate(dateString) {
        const date = new Date(dateString);
        return `${date.getDate().toString().padStart(2, "0")}.${(date.getMonth() + 1).toString().padStart(2, "0")}.${date.getFullYear()}`;
    }

    randomPostsContainer.addEventListener("click", function (e) {
        const target = e.target.closest(".random-link");
        if (target) {
            e.preventDefault();
            const popup = document.getElementById("popup-container");
            const popupBody = document.getElementById("popup-body");
            popupBody.innerHTML = `
                <h2>${target.dataset.title}</h2>
                <p>${target.dataset.snippet}</p>
                <a href="${target.dataset.link}" target="_blank">Read more</a>
            `;
            popup.style.display = "block";
        }
    });

    document.getElementById("close-popup").addEventListener("click", function () {
        document.getElementById("popup-container").style.display = "none";
    });

    loadRandomPosts();
});

Menarik Pengunjung dengan Random Post di Blog Anda

Menarik perhatian pembaca di blog adalah salah satu tantangan besar bagi para blogger. Dengan ribuan konten yang tersedia di internet, bagaimana cara agar pembaca tetap betah berlama-lama di blog Anda? Salah satu strategi yang dapat meningkatkan engagement adalah fitur Random Post. Artikel ini akan membahas bagaimana cara membuat Random Post yang menarik, lengkap dengan fitur animasi dan popup.

Apa Itu Random Post?

Random Post adalah fitur yang menampilkan artikel secara acak dari arsip blog Anda. Dengan menambahkan Random Post, Anda memberikan kesempatan kepada pengunjung untuk menemukan konten lama yang mungkin belum pernah mereka lihat sebelumnya. Ini sangat berguna untuk meningkatkan durasi kunjungan dan mengurangi bounce rate blog Anda.

Keuntungan Menggunakan Random Post

1. Meningkatkan Durasi Kunjungan: Pengunjung akan tertarik untuk membaca artikel lain yang direkomendasikan secara acak.


2. Menghidupkan Konten Lama: Artikel lama yang jarang dikunjungi akan kembali mendapatkan perhatian.


3. Mempermudah Navigasi: Membantu pembaca menemukan konten relevan tanpa harus mencari manual.


4. Desain Menarik: Dengan sentuhan animasi dan popup, fitur ini menjadi elemen interaktif yang membuat blog Anda terlihat profesional.


<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4s_IPFcJINPsBfgeEAm6EEffcdrcSeDjbODMOzfvOr7jNCNZo0QEV2pUhp-vAOkXhxOA2gqik-UWblYKwkA-fsEW9as4_xsjxBlg9dR3PmSors0zkU5pOHm5ubnFSRV2qA0gnQY2lQCenNZA-UlQtf-L8_boCmqqQnMmEc8G0-AEfW7yO1wK7x5K86DG/s647/20260526_191620.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="200" data-original-height="446" data-original-width="647" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4s_IPFcJINPsBfgeEAm6EEffcdrcSeDjbODMOzfvOr7jNCNZo0QEV2pUhp-vAOkXhxOA2gqik-UWblYKwkA-fsEW9as4_xsjxBlg9dR3PmSors0zkU5pOHm5ubnFSRV2qA0gnQY2lQCenNZA-UlQtf-L8_boCmqqQnMmEc8G0-AEfW7yO1wK7x5K86DG/s200/20260526_191620.jpg"/></a></div>
Cara Membuat Random Post di Blogspot

Berikut adalah langkah-langkah untuk membuat fitur Random Post di blog Anda.

1. Login di blogger.com

setelah masuk ke akun blogger anda dengan menggunakan email yang terdaftar, langkah selanjutnya buka tema, pilih edit HTML lalu masukan script yang sudah saya sediakan disini, lalu klik simpan.
        
2. Tambahkan Kode CSS

Kode CSS berikut memberikan tampilan menarik pada daftar random post Anda. Dengan desain modern, elemen-elemen ini akan terlihat rapi dan profesional.

<style>
/* Styling untuk Random Posts */
#random-posts {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

#random-posts li {
  width: calc(100% / 2 - 15px);
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

#random-posts li:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}
#random-posts img {
  width: 100%;
  height: auto;
}

#random-posts div {
  padding: 10px;
}

#random-posts .random-meta {
  font-size: 0.9rem;
  color: #666;
  margin-top: 5px;
}

#random-posts .random-title {
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
  text-decoration: none;
}
#random-posts .random-title:hover {
  color: #007BFF;
}
</style>

3. <b>Tambahkan Struktur HTML</b>

Tambahkan elemen HTML untuk menampung daftar artikel acak dan popup.

<ul id="random-posts"></ul>

<!-- Popup Container -->
<div id="popup-container">
  <div id="popup-content">
    <button id="close-popup">Close</button>
    <div id="popup-body"></div>
  </div>
</div>

4. Tambahkan Kode JavaScript

Kode berikut bertugas untuk mengambil artikel secara acak dari feed blog Anda dan menampilkannya ke halaman.

<script>
document.addEventListener("DOMContentLoaded", function () {
    const randomPostsNumber = 5; 
    const randomPostsChars = 110; 
    const randomPostsContainer = document.getElementById("random-posts");

    function getRandomPosts(entries, count) {
        const shuffled = entries.sort(() => 0.5 - Math.random()); 
        return shuffled.slice(0, count); 
    }

    function loadRandomPosts() {
        const randomParam = new Date().getTime(); 
        const script = document.createElement("script");
        script.src = `/feeds/posts/default?alt=json-in-script&max-results=50&callback=renderRandomPosts&random=${randomParam}`;
        document.body.appendChild(script);
    }

    window.renderRandomPosts = function (json) {
        if (!json.feed.entry) return;

        const randomPosts = getRandomPosts(json.feed.entry, randomPostsNumber);

        randomPosts.forEach(entry => {
            const title = entry.title.$t;
            const link = entry.link.find(l => l.rel === "alternate").href;
            const content = entry.content ? entry.content.$t : (entry.summary ? entry.summary.$t : "");
            const snippet = content.replace(/<[^>]*>/g, "").substring(0, randomPostsChars) + "...";
            const thumbnail = entry.media$thumbnail ? entry.media$thumbnail.url : "https://via.placeholder.com/150";
            const publishedDate = entry.published ? formatDate(entry.published.$t) : "Unknown Date";
            const comments = entry.thr$total ? `${entry.thr$total.$t} Comments` : "No Comments";

            const li = document.createElement("li");
            li.innerHTML = `
                <a href="#" class="random-link" data-title="${title}" data-link="${link}" data-snippet="${snippet}">
                    <img src="${thumbnail}" alt="${title}">
                    <div>
                        <div class="random-title">${title}</div>
                        <span class="random-meta">Published: ${publishedDate} - ${comments}</span>
                    </div>
                </a>
            `;
            randomPostsContainer.appendChild(li);
        });
    };

    function formatDate(dateString) {
        const date = new Date(dateString);
        return `${date.getDate().toString().padStart(2, "0")}.${(date.getMonth() + 1).toString().padStart(2, "0")}.${date.getFullYear()}`;
    }

    randomPostsContainer.addEventListener("click", function (e) {
        const target = e.target.closest(".random-link");
        if (target) {
            e.preventDefault();
            const popup = document.getElementById("popup-container");
            const popupBody = document.getElementById("popup-body");
            popupBody.innerHTML = `
                <h2>${target.dataset.title}</h2>
                <p>${target.dataset.snippet}</p>
                <a href="${target.dataset.link}" target="_blank">Read more</a>
            `;
            popup.style.display = "block";
        }
    });

    document.getElementById("close-popup").addEventListener("click", function () {
        document.getElementById("popup-container").style.display = "none";
    });

    loadRandomPosts();
});
</script>

Kesimpulan
        

Menambahkan fitur Random Post tidak hanya membuat blog Anda lebih menarik tetapi juga meningkatkan interaksi pengunjung. Dengan tutorial ini, Anda dapat dengan mudah menerapkannya di blog Anda. Jangan lupa untuk menyesuaikan desain dan jumlah artikel sesuai kebutuhan Anda.

Semoga artikel ini bermanfaat!

Search This Blog

Blog Responsive 2015

Menarik Pengunjung dengan Random Post di Blog Anda

Element Script Random Post

Klik 2 Kali untuk menyalin

<link rel="stylesheet" type="text/css" href="styles.css">

<script type="text/javascript" src="script.js"></script>

Comments

Post a Comment

Popular posts from this blog

Ternyata mudah menghapus samsung akun yang nyangkut karena lupa password

Download Script Landing Page CPA Movie Free

Acunetix v9.0 full Version

10 Contoh Landing Page Responsive Siap Copy Paste

Contoh Template Movie & TV Series Full HTML, CSS, JAVASCRIPT

50 Contoh Prompt untuk membuat video menggunakan CapCut

Listing Crypto Terbaru 2026: Daftar Coin Baru, Tren, dan Cara Menemukannya

Kode Script Form kontak blog

Kumpulan Do'a sehari hari

Cara Mengaktifkan kembali akun Youtube yang kena Suspend