Blogger gadget μία συγκεκριμένη ανάρτηση

Το gadget θα εμφανιστεί κάπως έτσι..

 Πώς θα το χρησιμοποιείς:

Κάθε φορά που θέλεις άλλη ανάρτηση:

Προσθέτεις νέο gadget HTML/JavaScript.

Βάζεις τον ίδιο κώδικα.

Αλλάζεις μόνο:link(ΒΑΛΕ_ΕΔΩ_ΤΟ_LINK_ΤΗΣ_ΑΝΑΡΤΗΣΗΣ)

<div class="single-post-widget" 

data-post-url="ΒΑΛΕ_ΕΔΩ_ΤΟ_LINK_ΤΗΣ_ΑΝΑΡΤΗΣΗΣ">

</div>

<script>

(function(){

var widgets=document.querySelectorAll(".single-post-widget");

widgets.forEach(function(box){

var url=box.getAttribute("data-post-url");

fetch(url)

.then(r=>r.text())

.then(html=>{

var parser=new DOMParser();

var doc=parser.parseFromString(html,"text/html");

var title=doc.querySelector("h1")?.innerText ||

           doc.querySelector(".post-title")?.innerText ||

           "Ανάρτηση";

var img=doc.querySelector(".post img")?.src ||

        doc.querySelector("img")?.src ||

        "";

box.innerHTML=`

<a href="${url}" class="post-card">

<div class="post-image">

<img src="${img}">

</div>

<div class="post-info">

<h3>${title}</h3>

<span>Διαβάστε περισσότερα →</span>

</div>

</a>

`;

});

});

})();

</script>

<style>

.single-post-widget{

margin:15px 0;

}

.post-card{

display:block;

text-decoration:none;

color:inherit;

border-radius:15px;

overflow:hidden;

background:#fff;

box-shadow:0 4px 15px rgba(0,0,0,.15);

transition:.3s;

}

.post-card:hover{

transform:translateY(-5px);

}

.post-image img{

width:100%;

height:180px;

object-fit:cover;

display:block;

}

.post-info{

padding:15px;

}

.post-info h3{

margin:0 0 10px;

font-size:20px;

}

.post-info span{

font-size:14px;

opacity:.7;

}

</style>