✅ Το κουμπί «Περισσότερες αναρτήσεις» φορτώνει τις επόμενες 8 χωρίς να σβήνει τις προηγούμενες.
✅ Κρατάει ακριβώς το ίδιο design
2-Χωρίς την τελευταία ανάρτηση
Ναι, γίνεται πολύ εύκολα. Αρκεί να ξεκινήσει από τη 2η ανάρτηση αντί από την 1η.
Στον κώδικα που σου έδωσα, άλλαξε μόνο αυτή τη γραμμή: let startIndex=1; σε let startIndex=2;
<style>
.random-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:18px;
}
.random-card{
border-radius:18px;
overflow:hidden;
box-shadow:0 4px 12px rgba(0,0,0,.15);
transition:.25s;
background:#fff;
display:block;
}
.random-card:hover{
transform:translateY(-4px);
}
.random-card img{
width:100%;
aspect-ratio:16/9;
object-fit:cover;
border-radius:18px 18px 0 0;
transition:.3s;
}
.random-card:hover img{
transform:scale(1.05);
}
.random-content{
padding:12px;
}
.random-title{
font-weight:bold;
}
.random-more{
display:block;
margin:20px auto;
padding:10px 18px;
border:0;
border-radius:12px;
cursor:pointer;
}
</style>
<div class="random-widget">
<div class="random-grid"></div>
<button class="random-more">Περισσότερες αναρτήσεις</button>
</div>
<script>
(function(){
const widget=document.currentScript.previousElementSibling;
const BLOG_URL="https://gloobtop.blogspot.com";
const grid=widget.querySelector(".random-grid");
const button=widget.querySelector(".random-more");
let startIndex=1;
const postsPerPage=8;
async function loadLatest(){
const url=
`${BLOG_URL}/feeds/posts/default?alt=json&max-results=${postsPerPage}&start-index=${startIndex}`;
try{
const response=await fetch(url);
const data=await response.json();
const posts=data.feed.entry || [];
posts.forEach(post=>{
let link="";
post.link.forEach(l=>{
if(l.rel==="alternate"){
link=l.href;
}
});
let image="https://via.placeholder.com/640x360?text=No+Image";
if(post.media$thumbnail){
image=post.media$thumbnail.url.replace("/s72-c/","/s640/");
}
grid.insertAdjacentHTML(
"beforeend",
`
<a class="random-card"
href="${link}"
style="text-decoration:none;color:inherit">
<img loading="lazy" src="${image}" alt="${post.title.$t}">
<div class="random-content">
<div class="random-title">
${post.title.$t}
</div>
</div>
</a>
`
);
});
}catch(e){
console.log("Latest posts error:",e);
}
}
loadLatest();
button.onclick=function(){
startIndex+=postsPerPage;
loadLatest();
};
})();
</script>
Πώς να αλλάξω το background του gadget, να βάλω άλλα χρώματα
Είναι πολύ εύκολο. Στο CSS του gadget υπάρχουν οι κλάσεις που ελέγχουν τα χρώματα.
1. Χρώμα της κάρτας
Βρες αυτό:CSS
.random-card{
border-radius:18px;
overflow:hidden;
box-shadow:0 4px 12px rgba(0,0,0,.15);
transition:.25s;
background:#fff;
display:block;
}
Άλλαξε το:CSS
background:#fff;
σε όποιο χρώμα θέλεις, π.χ.
background:#1e293b;
η
background:#222;
η
background:#f8f9fa;
2. Χρώμα του τίτλου
Πρόσθεσε στην κλάση:
.random-title{
font-weight:bold;
color:#ffffff;
}
η
color:#000;
3. Background του κουμπιού
Βρες:
.random-more{
display:block;
margin:20px auto;
padding:10px 18px;
border:0;
border-radius:12px;
cursor:pointer;
}
και πρόσθεσε:
background:#2563eb;
color:#fff;
4. Background όλου του gadget
Αν θέλεις να αλλάξει το φόντο ολόκληρου του gadget (πίσω από όλες τις κάρτες), πρόσθεσε:
.random-widget{
background:#101828;
padding:20px;
border-radius:20px;
}
Παράδειγμα σε σκούρο θέμα
.random-widget{
background:#0f172a;
padding:20px;
border-radius:20px;
}
.random-card{
background:#1e293b;
}
.random-title{
color:#fff;
}
.random-more{
background:#2563eb;
color:#fff;
}
Έτσι θα έχεις ένα πολύ μοντέρνο dark theme.
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου