tutorial de gadget 🧵

 holiiii

Hoy por fin les traigo mi primer tutorial para decorar el blog y estoy muy emocionada porque recién estoy empezando con esto de compartir códigos y cositas bonitas para Blogger.

La verdad todavía estoy aprendiendo, pero voy a intentar explicarlo de la forma más sencilla posible para que cualquiera pueda copiar, pegar y personalizar los códigos sin problemas.

Hoy les voy a enseñar dos cositas sencillas pero bonitas: un gadget con 5 álbumes y un botón de "Seguir leyendo" para que la página principal de su blog se vea mucho más ordenada.

✦ Álbumes

Para agregar este gadget vayan a Diseño → Añadir gadget → HTML/JavaScript y peguen el código completo.

Este gadget muestra una pequeña colección de álbumes. Yo lo pensé para Spotify, pero realmente pueden poner cualquier enlace: una playlist, una canción, un video de YouTube, Pinterest o incluso otra página de su blog.

Las partes que tienen que modificar están marcadas para que sea mucho más fácil encontrarlas:

• ÁLBUM 1, ÁLBUM 2, ÁLBUM 3, ÁLBUM 4 y ÁLBUM 5 → Reemplácenlos por el enlace del álbum o página que quieran abrir al hacer clic.

• PORTADA 1, PORTADA 2, PORTADA 3, PORTADA 4 y PORTADA 5 → Reemplácenlas por el enlace de la imagen que quieran mostrar. Les recomiendo usar imágenes cuadradas para que todas se vean del mismo tamaño.

• Collection of albums → Ese es el título del gadget. Pueden cambiarlo por el que más les guste, por ejemplo: Mis favoritos, Now Playing, Álbumes del momento, etc.

Si necesitan subir sus imágenes a internet, yo les recomiendo imgbb. Ahí solo suben la imagen y copian el enlace directo de la fotografía.

Código

<div class="redes-titulo">୨୧ Collection of albums ୨୧</div>

<div class="album-gadget-cami">

<div class="album-frame-cami">

<div class="album-frame">

<a class="album album1" href="ÁLBUM 1" target="_blank"><img src="PORTADA 1" /></a>

<a class="album album2" href="ÁLBUM 2" target="_blank"><img src="PORTADA 2" /></a>

<a class="album album3" href="ÁLBUM 3" target="_blank"><img src="PORTADA 3" /></a>

<a class="album album4" href="ÁLBUM 4" target="_blank"><img src="PORTADA 4" /></a>

<a class="album album5" href="ÁLBUM 5" target="_blank"><img src="PORTADA 5" /></a>

</div>

</div>

<style>

.album-gadget-cami{
width:190px;
margin:auto;
text-align:center;
font-family:Georgia,serif;
}

.album-gadget-cami h3{
font-size:16px;
color:#6b3fa0;
margin:0 0 8px 0;
}

.album-frame-cami{
position:relative;
width:170px;
height:68px;
margin:auto;
border:2px solid #fff;
background:rgba(255,255,255,.18);
overflow:visible;
}

.album-frame-cami .album{
position:absolute;
top:6px;
transition:.3s ease;
}

.album-frame-cami .album img{
width:70px !important;
height:70px !important;
max-width:70px !important;
max-height:70px !important;
min-width:70px !important;
min-height:70px !important;
object-fit:cover !important;
display:block !important;
border:2px solid white;
box-shadow:0 2px 5px rgba(0,0,0,.25);
}

.album1{left:5px; z-index:1;}
.album2{left:34px; z-index:2;}
.album3{left:63px; z-index:3;}
.album4{left:92px; z-index:4;}
.album5{left:121px; z-index:5;}

.album-frame-cami .album:hover{
transform:translateY(-6px) scale(1.12);
z-index:20;
}

</style>
</div>

Pueden cambiar el tamaño de las portadas, los colores, el borde y prácticamente todo el diseño si saben un poquito de CSS.

✦ Botón "Seguir leyendo"

Este botoncito sirve para que en la página principal del blog no aparezca toda la entrada completa, sino solo una parte. Así el inicio del blog se ve mucho más limpio y organizado.

Para instalarlo entren a Tema → Editar HTML.

Antes de modificar cualquier cosa les recomiendo hacer una copia de seguridad de su plantilla por si tocan algo sin querer.

Después presionen Ctrl + F y busquen esta línea:

<b:if cond='data:post.hasJumpLink'>

Justo debajo debería aparecer:

<data:post.jumpText/>

Lo único que tienen que hacer es reemplazar esa línea por el código que les dejo aquí abajo. No hace falta borrar nada más.

En el código van a encontrar una parte que dice IMAGEN DEL BOTÓN. Ahí simplemente reemplazan ese texto por el enlace de la imagen de su botón.

Yo hice el diseño del mío en Krita, pero pueden hacerlo en la aplicación que más les guste: Canva, Photoshop, Ibis Paint X, Photopea, Illustrator, Paint o cualquier otro programa con el que se sientan cómodos.

Código

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>

<center>
<img height='50' src='IMAGEN DEL BOTÓN' width='208'/>
</center>

</a>

</div>

</b:if>

Y listo. ♡ Ya tendrían su botón funcionando.

Y eso sería todo por este tutorial. Espero que les haya servido y que les guste cómo queda en su blog.

Si hay algún gadget que les gustaría tener, déjenmelo en los comentarios. Puede que yo esté aquí haciendo tutoriales de álbumes mientras ustedes quieren un gato caminando por la pantalla JAJA.

Todavía estoy aprendiendo a hacer códigos, así que si encuentran algún error o tienen alguna duda, no tengan miedo de preguntarme. Voy a hacer todo lo posible por ayudarles y, si no sé hacer algo, intentaré aprenderlo para traer un tutorial.