𝓢ᵏᵃⁱᵇˡᵒᵒᵐˢᵖᵃᶜᵉֶָ֢𝄞: Tutito (tutorial): Gadget de mini libro!

Holii, hoy día vengo con un tutorial para poner el gadget de mini libro que pueden apreciar cuando entran a mi blog, así que les voy a intentar explicar lo mejor que pueda cómo hacerlo y personalizarlo <3

1- Copia este código sin borrar espacios

<img

src="URL DE LA IMAGEN"

alt="Portada"

class="cover-image">

<h2>TÍTULO</h2>

<p>

TEXTO

</p>

</img

></div>

</div>

</div>

<h2>TÍTULO</h2>

<img

src="URL DE LA IMAGEN"

alt="Imagen"

class="page-image">

<p>

TEXTO

</p>

</img

></div>

</div>

</div>

<h2>TÍTULO</h2>

<img

src="URL DE LA IMAGEN"

alt="Imagen"

class="page-image">

<p>

TEXTO

</p>

</img

></div>

</div>

</div>

<h2>TÍTULO</h2>

<img

src="URL DE LA IMAGEN"

alt="Imagen"

class="page-image">

<p>

TEXTO

</p>

</img

></div>

</div>

</div>

<h2>TÍTULO</h2>

<img

src="URL DE LA IMAGEN"

class="page-image">

<p>

TEXTO

</p>

</img

></div>

</div>

</div>

<button onclick="prevPage()">Anterior!</button>

<button onclick="nextPage()">Siguiente!</button>

</div>

<style>

.book-wrapper{

display:flex;

flex-direction:column;

align-items:center;

gap:15px;

}

.book{

position:relative;

width:205px;

height:275px;

perspective:1500px;

overflow:hidden;

}

/* ENCUADERNACIÓN */

.book::before{

content:"";

position:absolute;

left:0;

top:0;

width:4px;

height:100%;

background:#e7dece;

z-index:999;

border-radius:2px;

}

.paper{

position:absolute;

width:100%;

height:100%;

top:0;

left:0;

transform-origin:left;

transition:transform .8s ease;

}

.front,

.back{

position:absolute;

width:100%;

height:100%;

background:#fffdf8;

border:1px solid #e8e2d8;

box-sizing:border-box;

backface-visibility:hidden;

box-shadow:

inset 0 0 15px rgba(0,0,0,.04),

0 3px 8px rgba(0,0,0,.08);

}

.front{

z-index:1;

}

.back{

transform:rotateY(180deg);

}

.page-content{

height:100%;

overflow:auto;

padding:18px;

font-family:Arial, sans-serif;

font-size:14px;

line-height:1.7;

color:#000;

}

.page-content h2{

font-family:'Indie Flower', cursive;

font-size:20px;

text-align:center;

margin-bottom:12px;

}

.cover-image{

width:100px;

display:block;

margin:0 auto 12px auto;

border-radius:12px;

}

.page-image{

width:100px;

display:block;

margin:0 auto 12px auto;

border-radius:12px;

}

.flipped{

transform:rotateY(-180deg);

}

.controls{

display:flex;

gap:8px;

flex-wrap:wrap;

justify-content:center;

}

.controls button{

border:none;

background:#f7f2e8;

color:#333;

padding:8px 12px;

border-radius:10px;

cursor:pointer;

font-size:13px;

transition:.2s;

}

.controls button:hover{

transform:scale(1.05);

}

</style>

const papers = document.querySelectorAll(".paper");

let currentPage = 0;

papers.forEach((paper,index)=>{

paper.style.zIndex = papers.length - index;

});

function nextPage(){

if(currentPage < papers.length){

papers[currentPage].classList.add("flipped");

currentPage++;

}

function prevPage(){

if(currentPage > 0){

currentPage--;

papers[currentPage].classList.remove("flipped");

}

</script>

2- Personaliza

Lo primero que verás son las páginas, por suerte el código está bastante organizado y será fácil. Lo primero es el "URL DE TU IMAGEN" ahí debes pegar la dirección de la imagen que puede ser de Pinterest, por ejemplo. Después, donde diga: TÍTULO debes poner el título de cada página. Lo siguiente es el apartado de TEXTO en donde va el contenido de cada página. Y será lo mismo para cada página.

Si quieres añadir o quitar páginas debes copiar este segmento del código:

<h2>TÍTULO</h2>

<img

src="URL DE LA IMAGEN"

class="page-image">

<p>

TEXTO

</p>

</img

></div>

</div>

</div>

Y simplemente pegar o eliminar dependiendo de lo que quieras.

Lo siguiente son los controles que saldrán así predeterminados como "Siguiente" y "Anterior", si los quieres cambiar simplemente borra y escribe lo que quieras.

Después abajito saldrá esto: width:205px; height:275px; que es el tamaño del libro, este debe ser más pequeño que tu sidebar para que no sobresalga. (Para ver el tamaño del sidebar ve a la parte de Tema y Ajustar ancho y ahí verán el tamaño de todo su blog)

Después en el apartado de Encuadernación van a encontrar esto: background:#fffdf8; que es el color de las páginas. Para cambiarlo puedes buscar la página HTMLColorCode y allí podrás ver el color que más te guste en forma de código, lo copias y lo pegas.

Cuando bajen más les saldrá esto: font-family:Arial, sans-serif; font-size:14px; que es para modificar la fuente y tamaño de texto; para cambiar la fuente borras Arial y pon exactamente la fuente que quieras. Y para modificar la fuente y tamaño de los títulos tendremos esto: font-family:'Indie Flower', cursive; font-size:20px; y para modificarlo harán exactamente lo mismo que en lo anterior, solo que aquí deben reemplazar Indie Flower por la fuente que deseen.

Luego verán esto:

cover-image{

width:100px; Aquí modificas el ancho de la imagen de la portada.

display:block;

margin:0 auto 12px auto;

border-radius:12px;

}

.page-image{

width:100px; Aquí modificas el ancho de la imagen del resto de las páginas.

display:block;

margin:0 auto 12px auto;

border-radius:12px;

Y finalmente:

.controls button{

border:none;

background:#f7f2e8;

Donde modificas el color de los botones para pasar de página.

3- Ponlo en tu blog

Eso es lo más sencillo, simplemente se van a la parte de Diseño, agregar un gadget, HTML/JavaScript y en la parte de Contenido pegan el código que acabaron de personalizar. Recuerda no borrar ningún espacio no caracter que pueda alterar y dañar el código.

Eso es todo chiques, espero que les haya servido y hayan entendido, si tienen alguna duda comenten lo que quieran que yo su servidora les voy a responder con muxo amorsh.