¿Cómo poner un corcho de fotos en tu blog?

Hola chicas, bienvenidas a otro viernes de tutoriales. Esta vez voy a ayudaros a poner un nuevo gadget que he incorporado hace poco: el corcho de fotos!!

Como siempre, os recomiendo copiar el código y pegarlo en notas para que sea más sencillo personalizarlo antes de pegarlo en el blog.

Este es el código:

<link href="https://fonts.googleapis.com/css2?family=Slackey&amp;display=swap" rel="stylesheet" />

<style>

.fotos-corcho{

    width:00px;

    margin:auto;

    padding:15px;

    box-sizing:border-box;

    text-align:center;

    position:relative;

    border-radius:22px;

background-color:#00000;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='10' cy='10' r='3' fill='%23C4006F'/%3E%3Ccircle cx='30' cy='30' r='3' fill='%23C4006F'/%3E%3C/svg%3E");

background-repeat:repeat;

background-size:40px 40px;

background-position:20px 20px;

background-position:

0 0,

10px 10px;

}

.fotos-corcho h2{

    margin:0 0 15px;

    font-family:'Slackey',cursive;

    font-size:00px;

    color:#00000;

    text-shadow:

    2px 2px 0 #00000,

    3px 3px 0 #00000;

}

.polaroid{

    width:255px;

    margin:auto;

    background:#fff;

    padding:10px 10px 24px;

    border-radius:8px;

    box-shadow:

    0 5px 12px rgba(0,0,0,.22);

    transform-origin:50% -18px;

    animation:balanceo 5s linear infinite;

}

.polaroid img{

    width:100%;

    height:00px;

    object-fit:cover;

    border-radius:5px;

    display:block;

}

.chincheta{

    width:20px;

    height:20px;

    margin:auto;

    margin-bottom:-6px;

    position:relative;

    z-index:20;

    overflow:visible;

    border-radius:50%;

    background:

    radial-gradient(circle at 30% 30%,

    #FFD4F2 0%,

    #FF7FD3 22%,

    #E30089 58%,

    #8A005B 100%);

    box-shadow:

    inset -2px -2px 3px rgba(0,0,0,.35),

    inset 2px 2px 3px rgba(255,255,255,.9),

    0 2px 4px rgba(0,0,0,.35);

}

.chincheta:before{

    content:"";

    position:absolute;

    width:4px;

    height:14px;

    background:linear-gradient(#d8d8d8,#8f8f8f);

    left:50%;

    top:16px;

    transform:translateX(-50%);

    border-radius:3px;

    z-index:-1;

}

.botones{

    margin-top:15px;

    display:flex;

    justify-content:center;

    gap:18px;

}

.botones button{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:#00000;

    color:white;

    font-size:22px;

    transition:.25s;

}

.botones button:hover{

    background:#00000;

    transform:scale(1.08);

}

.contador{

    margin:10px 0 6px;

    font-family:'Gruppo',sans-serif;

    font-size:00px;

    font-weight:bold;

    color:#00000;

    letter-spacing:1px;

}

@keyframes balanceo{

0%{

    transform:rotate(-2deg);

}

50%{

    transform:rotate(2deg);

}

100%{

    transform:rotate(-2deg);

}

}

}

</style>

<div class="fotos-corcho">

<h2>Mis fotos favoritas</h2>

<div class="chincheta"></div>

<div class="polaroid">

    <img id="fotoCarrusel" src="" />

</div>

<div class="contador" id="contador">1/5</div>

<div class="botones">

    <button onclick="anterior()">❮</button>

    <button onclick="siguiente()">❯</button>

</div>

</div>

<script>

const fotos=[

"URL_IMÁGEN1",

"URL_IMÁGEN2",

"URL_IMÁGEN3",

"URL_IMÁGEN4",

"URL_IMÁGEN5"

];

let actual = 0;

function mostrar(){

    document.getElementById("fotoCarrusel").src=fotos[actual];

    document.getElementById("contador").innerHTML=

    (actual+1)+"/"+fotos.length;

}

function siguiente(){

    actual++;

    if(actual >= fotos.length) actual = 0;

    mostrar();

}

function anterior(){

    actual--;

    if(actual < 0) actual = fotos.length - 1;

    mostrar();

}

mostrar();

</script>

Bien, voy a explicar pasito a pasito las cosas que podéis modificar para personalizarlo:

Primero encontramos "width:00px;" donde podemos poner el tamaño del gadget, yo lo tengo a 330px porque mi sidebar mide 350px, para que lo tengáis como referencia.

Si sigues bajando encuentras "background-color:#00000;" en el que cambias el color del fondo, siempre recomiendo la web de HTMLcolorcode para elegir el color que queráis.

Después está una cosa muy rara que es el "background-image" en el que he dejado el color que tengo de los puntitos para que encontréis bien donde están (es donde pone "C4006F" y lo que tienes que hacer es, con el enlace de antes, cambiar el color al que tú quieras).

Más abajo encontrarás "font-family:'Slackey',cursive; font-size:00px; color:#00000;" donde podrás editar el título. donde pone slackey puedes cambiar la fuente de la letra, pero recuerda que tienes que poner el nombre completo de la fuente para que funcione. Lo demás es para el tamaño y el color.

Donde pone "2px 2px 0 #00000, 3px 3px 0 #00000;" es donde puedes cambiar el color del doble título, si os fijáis bien yo tengo una sombra blanca y una pequeña linea oscura, pues es esta parte.

Lo siguiente que te vas a encontrar es "height:00px;" donde pones el tamaño de ancho de las imágenes, yo lo tengo a 300px.

Bastante más abajo encontrarás la parte que edita los botones, aquí en "background:#00000;" puedes cambiarle el color del fondo y en "color:white;" puedes cambiar el color de las flechas a blanco o negro.

En el siguiente "background:#00000;" lo que cambias es el color que tienen los botones cuando el cursor se pone encima.

Más abajo encuentras "font-size:00px;" y "color:#00000;" con el que cambias el color y el tamaño del contador de las fotos (o sea lo de 1/5 2/5 y así). Yo lo tengo a 8px para que sea chiquitín.

Lo último que tienes que hacer es añadir los URL de las imágenes que quieras. Sé que es duro pero vas a tener que publicar tus fotos para que se puedan ver. Las mías las he puesto en Pinterest, simplemente subes la imagen, copias el enlace y lo pones aquí "URL_IMÁGEN1" y en el resto de apartados.

Y ya estaría, espero no haberme saltado nada porque es un código bastante largo... Espero que os haya servido!! Nos vemoss