Blogger gadget για τυχαίες αναρτήσεις

Το  προσθέτεις σαν απλό gadget και το μόνο που πρέπει να κάνεις είναι να αλλάξεις το link του blog σου και τον αριθμό 0,8 το οποίο δίχνει πόσες αναρτήσεις θέλετε να φαίνονται,,,

 <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");

async function loadRandom(){

const randomStart=Math.floor(Math.random()*100)+1;

const url=

`${BLOG_URL}/feeds/posts/default?alt=json&max-results=10&start-index=${randomStart}`;

try{

const response=await fetch(url);

const data=await response.json();

const posts=data.feed.entry || [];

posts.sort(()=>Math.random()-0.5);

posts.slice(0,8).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}">

<div class="random-content">

<div class="random-title">

${post.title.$t}

</div>

</div>

</a>

`

);

});

}catch(e){

console.log("Random posts error:",e);

}

}

loadRandom();

button.onclick=function(){

grid.innerHTML="";

loadRandom();

};

})();

</script>