klik untuk menyalin
👇
<div id="random-slider" class="blog-slider">
<div class="slider-wrapper"></div>
<button class="arrow left">◀</button>
<button class="arrow right">▶</button>
</div>
<style>
/* Slider Container */
.blog-slider {
position: relative;
max-width: 100%;
overflow: hidden;
margin-top: 20px;
}
.slider-wrapper {
display: flex;
transition: transform 0.3s ease-in-out;
}
.blog-item {
flex: 0 0 100%;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
.thumbnail {
position: relative;
}
.thumbnail img {
width: 100%;
border-radius: 10px;
cursor: pointer;
transition: transform 0.3s;
}
.thumbnail:hover img {
transform: scale(1.05);
}
.thumbnail .label {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 5px;
font-size: 12px;
border-radius: 3px;
}
.title {
margin: 10px 0;
font-size: 18px;
font-weight: bold;
}
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.7);
color: #fff;
border: none;
font-size: 20px;
padding: 10px;
cursor: pointer;
z-index: 10;
}
.arrow.left {
left: 10px;
}
.arrow.right {
right: 10px;
}
.arrow:hover {
background: #000;
}
@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>
<script>
// Konfigurasi URL Feed Blog
const blogUrl = window.location.origin;
const feedUrl = `${blogUrl}/feeds/posts/summary?alt=json&max-results=50`;
fetch(feedUrl)
.then(response => response.json())
.then(data => {
const posts = data.feed.entry;
const sliderWrapper = document.querySelector('.slider-wrapper');
const randomIndexes = Array.from(
{ length: 10 },
() => Math.floor(Math.random() * posts.length)
);
randomIndexes.forEach(i => {
const post = posts[i];
const title = post.title.$t;
const link = post.link.find(l => l.rel === "alternate").href;
const thumbnail = post.media$thumbnail
? post.media$thumbnail.url
: "https://via.placeholder.com/150";
const label = post.category
? post.category[0].term
: "Uncategorized";
sliderWrapper.innerHTML += `
<div class="blog-item">
<div class="thumbnail">
<img src="${thumbnail}" alt="${title}" class="image">
<div class="label">${label}</div>
</div>
<h2 class="title">
<a href="${link}">${title}</a>
</h2>
</div>
`;
});
sliderWrapper.insertAdjacentHTML(
"afterend",
`
<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>
`
);
});
// Slider Functionality
let index = 0;
document.querySelector('.arrow.left').addEventListener('click', () => {
const items = document.querySelectorAll('.blog-item');
index = index > 0 ? index - 1 : items.length - 1;
document.querySelector('.slider-wrapper').style.transform =
`translateX(-${index * 100}%)`;
});
document.querySelector('.arrow.right').addEventListener('click', () => {
const items = document.querySelectorAll('.blog-item');
index = index < items.length - 1 ? index + 1 : 0;
document.querySelector('.slider-wrapper').style.transform =
`translateX(-${index * 100}%)`;
});
</script>
Code by: <style>
@keyframes shine {
0% { background-position: 0% 0; }
100% { background-position: -200% 0; }
}
</style>
<a href="https://ayi-service.blogspot.com" target="_blank" style="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;">Mang Ayi Service</a>
Komentar untuk Kode Script Random Post Slider
Posting Komentar