Codigos Gadget 3!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1

Holis, hoy les traigo otro gadget que me habían pedido hace bien harto (pero de boba no había visto el comentario)

Espero les funcione como a mi, sin mas que decir aquí voy..

Este Gadget consiste en mostrar los Labers de maneras mas estetik jiji, aparecerán en fila con el nombre del TAG, al presionarlos aparecer solo las entradas que tengan ese tag, y cuando poner el cursor encima te aparece una lista con los títulos.

Este Gadget es un poco complicado de explicar, ya que a mi me tomo mucho tiempo para que quedara como yo quería, espero se entienda..

Lo primero como siempre es ir a diseño y añadir un gadget en el formato JAVA SCRIPT, e insertar este código:

pdt: iré por partes y explicando cada uno, pq para aplicarlo tiene su enredo

PRIMERA PARTE: aquí es el estilo del gadget

<style>

.auto-tag-button {

  color: (color de las letras que se verán primero) !important; 

  text-decoration: none !important;

}

.auto-tag-button:visited,

.auto-tag-button:active,

.auto-tag-button:link {

  color: (color de las letras)  !important;

}

.post-item{

display:flex;

align-items:center;

gap:8px;

color:(mas color de las letras);

text-decoration:none;

padding:6px 0;

transition:0.2s;

}

.post-item img{

width:35px;

height:35px;

object-fit:cover;

border-radius:6px;

}

.post-item:hover{

color:(color al poner el cursor encima de las letras);

transform:translateX(5px);

}

.tags-wrapper{

  display:flex;

  gap:10px; /* distancia entre botones */

  flex-wrap:wrap;

}

.auto-tag-container {

  position: relative;

  display: inline-block;

}

.auto-tag-button {

  background-image: url('URL de la imagen de fondo');

  background-size: cover;

  background-position: center;

  width: 220px;

  height: 80px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 18px;

  cursor: pointer;

  color: white;

  font-weight: bold;

  text-align: center;

  transition: all 0.3s ease;

}

.auto-tag-button:hover {

  transform: scale(1.1);

  box-shadow: 0 8px 20px rgba(0,0,0,0.3);

}

.auto-tag-dropdown {

  display: none;

  position: absolute;

  margin-top: 8px;

  padding: 15px;

  border-radius: 18px;

  backdrop-filter: blur(8px);

  background: rgba(0,0,0,0.6);

  min-width: 250px;

  z-index: 99;

}

.auto-tag-dropdown a{

  display:block;

  color:(otra vez color de letras);

  text-decoration:none;

  padding:6px 0;

}

.auto-tag-container:hover .auto-tag-dropdown{

  display:block;

}

</style>

<div class="tags-wrapper">

no me juzguen por tanto color a las letras, recuerdo que no podía ponerlas de un color, y se bugueaba a cada rato.

PARTE DOS: ESTA es una parte importante, cada que pongan el nombre del tag tiene que ser tal cual lo escribieron como etiqueta.

el URL es: https://tublog.blogspot.com/search/label/el tag que quieras poner

ejemplo: https://stormieinfire.blogspot.com/search/label/Poemas

<!-- (Nombre del Tag) -->

<div class="auto-tag-container">

  <a href="Tu URL" class="auto-tag-button">TAG</a>

  <div class="auto-tag-dropdown">

    <div id="post-list-TAG"></div>

  </div>

</div>

tienes que hacer una de estas por cada tag que quieras poner

PARTE TRES: después de haber puesto lo anterior con los tags que quieres poner, escribes esto:

</div>

<script>

const blogURL="https://TUBLOG.blogspot.com/";

const maxPosts=(Máximo de tags que quieres en el gadget);

PARTE CUATRO: ESTA ES LA MAS IMPORTANTE, ya que aquí es el que decide si funciona ono, así que mucha atención

// (nombre del tag)

fetch(`${blogURL}/feeds/posts/default/-/TAG?alt=json&max-results=${maxPosts}`)

.then(r=>r.json())

.then(data=>{

const container=document.getElementById("post-list-TAG");

(data.feed.entry||[]).forEach(entry=>{

const title=entry.title.$t;

const link=entry.link.find(l=>l.rel==="alternate").href;

let img="";

if(entry.media$thumbnail){

img = entry.media$thumbnail.url.replace("s72-c","s50-c");

} 

else if(entry.content){

const temp = document.createElement("div");

temp.innerHTML = entry.content.$t;

const firstImg = temp.querySelector("img");

if(firstImg){

img = firstImg.src;

}

}

const a=document.createElement("a");

a.href=link;

a.className="post-item";

a.innerHTML=`

<img src="${img}">

<span>${title}</span>

`;

container.appendChild(a);

});

});

recuerda, el nombre del tag tiene que ser idéntico al que pusiste en etiquetas, tienes que hacer uno por cada Tag que quieras que se vea

PARTE CINCO: que no se te olvide cerrar el código poniendo un:

</script>

El código debe seguir exactamente ese orden. Si quieren agregar cinco tags distintos, en la parte 2 deben colocar cinco párrafos, uno para cada tag. Luego, en la parte 5, deben hacer lo mismo.
Es decir, cada tag necesita su propio código, pero siempre respetando el orden mencionado anteriormente.

Eso sería todo, espero que se haya entendido y que les funcione igual que a mí. Cualquier duda, estaré respondiendo jiji.