CODIGO DE LECTURA ACTUAL:
Hola se que muchos no lo pedían pero gracias patty por abrir esta sección nueva en el blog <3 (si quieren tuto de algo más lo pueden decir en el chat o aquí en comentarios
Aquí el código que explicare pasó a pasó:
<style>
.reading-widget {
background-color: #color de fondo;
border: 2px solid #color para el borde;
border-radius: 12px;
padding: 16px;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #Color de las letras;
max-width: 280px;
margin: 0 auto;
box-shadow: 0 4px 12px rgba(69, 9, 32, 0.15);
}
.reading-widget-title {
font-size: 0.9em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #color del la parte de arriba que es lectura actual ;
background-color: #color del fondo de las letras de la lectura actual;
padding: 6px 12px;
border-radius: 20px;
display: inline-block;
margin-bottom: 14px;
}
.reading-cover-container {
margin: 10px 0 14px;
}
.reading-cover {
width: 100%;
max-width: 150px;
height: auto;
border-radius: 8px;
box-shadow: 0 6px 14px rgba(69, 9, 32, 0.3);
transition: transform 0.3s ease;
}
.reading-cover:hover {
transform: scale(1.03);
}
.book-title {
font-size: 1.15em;
font-weight: 700;
color: #COLOR DEL NOMBRE DEL LIBRO;
margin: 8px 0 4px;
line-height: 1.3;
}
.book-author {
font-size: 0.95em;
font-style: italic;
color: #color del nombre del autor;
margin: 0;
}
</style>
<div class="reading-widget">
<div class="reading-widget-title">Lectura Actual</div>
<div class="reading-cover-container">
<!-- Cambia la URL de la imagen por la portada de tu libro -->
<img class="reading-cover" src="https://images.cdn3.buscalibre.com/fit-in/360x360/8b/01/8b013cf0baf6d8be6c786ea2cd7f1ed5.jpg" alt="Portada del libro" />
</div>
<!-- Cambia el título y el autor según tu lectura -->
<h3 class="book-title">PON EL NOMBRE DE TU LIBRO AQUÍ</h3>
<p class="book-author">PON AQUÍ EL NOMBRE DEL AUTOR DEL LIBRO</p>
</div>
EXPLICACIÓN PASO A PASO:
EN LA 1RA PARTE LA CUAL ES PARA PERSONALIZAR LO DE AFUERA
<style>
.reading-widget {
background-color: #color de fondo; AQUI CAMBIAS EL FONDO DE GADGET
border: 2px solid #color para el borde;AQUI SU BORDE
border-radius: 12px;
padding: 16px;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;AQUI ES OPCIONAL SI QUIERES CAMBIAR LA FUENTE
color: #Color de las letras;AQUI IGUAL ES OPCIONAL CAMBIAR EL COLOR
max-width: 280px;
margin: 0 auto;
LA SIGUIENTE PARTE ES CAMBIAR EL COLOR DE LAS DE LA LECTURA ACTUAL
.reading-widget-title {
font-size: 0.9em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #color del la parte de arriba que es lectura actual ;
background-color: #color del fondo de las letras de la lectura actual;
padding: 6px 12px;
border-radius: 20px;
display: inline-block;
margin-bottom: 14px;
}
LA SIGUIENTE PARTE ES SOBRE EL COLOR DE LA LETRA DEL LIBRO Y EL/LA AUTORA
.book-title {
font-size: 1.15em;
font-weight: 700;
color: #COLOR DEL NOMBRE DEL LIBRO;
margin: 8px 0 4px;
line-height: 1.3;
}
.book-author {
font-size: 0.95em;
font-style: italic;
color: #color del nombre del autor;
margin: 0;
}
ESTA PARTE ES PARA PONER LA IMAGEN O PORTADA DEL LIBRO Y EL NOMBRE DEL LIBRO Y EL/LA AUTORA
<div class="reading-cover-container">
<!-- Cambia la URL de la imagen por la portada de tu libro no quites las comas-->
<img class="reading-cover" src="remplazo este texto por el link de la portada de tu libro" alt="Portada del libro" />
</div>
<!-- Cambia el título y el autor según tu lectura -->
<h3 class="book-title">PON EL NOMBRE DE TU LIBRO AQUÍ</h3>
<p class="book-author">PON AQUÍ EL NOMBRE DEL AUTOR DEL LIBRO</p>
</div>
Bueno espero que haya quedado un poco claro, si no pueden escribir sus dudas abajo y las repondere gracias a patty por abrir esta parte tqm
.png)
Muchas graciassss
ResponderBorrarPodrías hacer el tuto del libro de visitas? (˘･.･˘)
ResponderBorrarsisisi pronto lo subire
Borrar