Sebelum Anda membaca Artikel blogspot tentang

Menarik Pengunjung dengan Random Post di Blog Anda

. Anda juga bisa melihat artikel artikel blog yang tak kalah menarik dibawah ini: 💲💲💲

dan Berikut ini Artikel lengkap tentang

Menarik Pengunjung dengan Random Post di Blog Anda

Menarik Pengunjung dengan Random Post di Blog Anda

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. 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!

👍.

Tweet