kode script Random Post dengan Thumbnail di Blogger Tampilan Keren dan langsung Cpad
klik untuk menyalin
👇
<style>
/* Container for random posts */
#random-posts {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 15px;
}
#random-posts li {
width: calc(100% / 2 - 15px); /* Dua kolom, ubah sesuai kebutuhan */
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;
position: relative;
}
#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;
}
/* Label Styling */
.random-label {
position: absolute;
top: 10px;
right: 10px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 5px 10px;
font-size: 0.9rem;
border-radius: 5px;
}
/* Popup Container Styling */
#popup-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 1000;
}
#popup-content {
background: #fff;
margin: 10% auto;
padding: 20px;
width: 90%;
max-height: 80%;
overflow-y: auto;
border-radius: 8px;
position: relative;
}
#close-popup {
position: absolute;
top: 10px;
right: 10px;
background: #ff4d4d;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 5px;
}
#close-popup:hover {
background: #e60000;
}
@keyframes shine {
0% { background-position: 0% 0; }
100% { background-position: -200% 0; }
}
.code-admin{
background: linear-gradient(60deg, #333, #222, #eee);
background-size: 300% 10%;
color: #fff;
border: none;
padding: 8px 18px;
font-size: 14px;
text-decoration: none;
border-radius: 10px;
cursor: pointer;
animation: shine 5s linear infinite;
}
</style>
<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>
<script>
document.addEventListener("DOMContentLoaded", function () {
const randomPostsNumber = 5; // Jumlah random posts
const randomPostsChars = 110; // Jumlah karakter deskripsi
const randomPostsContainer = document.getElementById("random-posts");
function getRandomPosts(entries, count) {
// Mengambil sejumlah postingan secara acak dari daftar entries
const shuffled = entries.sort(() => 0.5 - Math.random()); // Mengacak urutan entries
return shuffled.slice(0, count); // Mengambil sejumlah postingan yang diinginkan
}
function loadRandomPosts() {
const randomParam = new Date().getTime(); // Menambahkan timestamp untuk URL acak
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;
// Mendapatkan 5 postingan acak
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";
// Ambil label pertama
const label = entry.category ? entry.category[0].term : "No Label";
const li = document.createElement("li");
li.innerHTML = `
<a href="#" class="random-link" data-title="${title}" data-link="${link}" data-snippet="${snippet}">
<div class="random-label">${label}</div>
<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" style="flost: right">Read more</a>
`;
popup.style.display = "block";
}
});
document.getElementById("close-popup").addEventListener("click", function () {
document.getElementById("popup-container").style.display = "none";
});
loadRandomPosts();
});
</script>
<br/>
<div class="code-by" style="text-align:center;margin-top:30px;">
Code by:
<a href="https://ayi-service.blogspot.com" target="_blank" class="code-admin">Mang Ayi Service</a>
</div>
Komentar untuk Kode script Random post dengan label kategori