#2 Panel de Blinkies
Buenas nuevas amixes de la web, a peticion de varios el dia de hoy les compartire el codigo de mi pequeño panel de blinkies, y bueno les dare una pequeña guia de como personalizarlo.Para quien no conozca estos son los blinkies, son una especie de banners animados, GIFS, que sirven para decorar tu blog, son preciosos y perfectos para darle una vibra unica a tu espacio virtual. Son estos por si no los han visto. nwn
Para empezar les comparto el codigo:
<div class="blinkie-shelf">
<div class="shelf-title">BLINKIES</div>
<div class="blinkie-container">
<img src="https://adriansblinkiecollection.neocities.org/f33.gif" />
<img src="URL DEL BLINK" />
</div>
<div class="shelf-footer">HOLA</div>
</div>
<style>
.blinkie-shelf {
background: #fffdf5 !important;
border: 2px dashed rgb(140, 51, 51) !important;
padding: 15px 10px 15px 15px;
border-radius: 10px;
text-align: center;
max-width: 280px;
margin: 10px auto;
box-shadow: 4px 4px 0px rgba(0,0,0,0.05);
box-sizing: border-box;
}
.shelf-title {
font-family: 'Courier New', monospace !important;
font-size: 13px !important;
font-weight: bold;
color: rgb(140, 51, 51) !important;
margin-bottom: 12px;
border-bottom: 1px solid rgba(140, 51, 51, 0.1);
padding-bottom: 5px;
}
.blinkie-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
padding: 5px 8px 5px 5px;
box-sizing: border-box;
max-height: 165px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgb(140, 51, 51) transparent;
}
.blinkie-container::-webkit-scrollbar {
width: 4px;
}
.blinkie-container::-webkit-scrollbar-track {
background: transparent;
}
.blinkie-container::-webkit-scrollbar-thumb {
background: rgb(140, 51, 51);
border-radius: 10px;
}
.blinkie-container img {
image-rendering: pixelated;
height: 23px !important;
width: auto;
transition: transform 0.2s;
display: block;
}
.blinkie-container img:hover {
transform: scale(1.08);
cursor: help;
}
.shelf-footer {
font-family: 'Courier New', monospace !important;
font-size: 11px !important;
color: rgb(132, 153, 79) !important;
margin-top: 12px;
opacity: 0.8;
}
</style>
Si se ve intimidante lo se pero ahorita mismo les enseño como dominamos este codigo, para empezar y antes de cualquier otra cosa mas les recomiendo estas paginas que necesitaremos para este y demas gadgets.
- Esta pagina es para encontrar los codigos de los colores que usaran
Los codigos Hex se muestran asi #539C3B
los codigos RGB se muestran asi 83, 156, 59
En la pagina solo le mueven, juguetean hasta encontrar los colores de su agrado, arriba estaran los codigos, los copian y pegan donde quieran.
- En estas paginas encontraran algunos blinkies, asi que pasen a buscar sus favoritos.
Ahora si empecemos a desmenuzar este gadget:
<div class="shelf-title">BLINKIES</div> Aqui es donde estara el titulo asi que solo cambien la palabra BLINKIES por cualquiera que quieran usar como PATATA, Mi coleccion, etcetera, lo que deseen escribir.
<img src="https://adriansblinkiecollection.neocities.org/f33.gif" /> Este es el mas importante, ya que aqui es donde colocaremos los blinkies, cada que queiran agregar uno nuevo solo lo copian le dan enter desde el ultimo de estos y pegan, obviamente lo unico que tendran que modificar es lo que esta dentro de las comillas, que es el URL del blinkie
Esto es lo que deberan y copiar cada que quieran uno nuevo, si observan van como lista, y siempre siempre el </div> va abajo, okis??
<img src="URL DEL BLINK" />
Sobre como conseguir el URL del blinkie, solo deben darle clik derecho al blinkie, en celular dejan presionado en el blinkie, y deben selecionar copiar direccion de la imagen, ya una ves copiada lo pegan en donde les indique (IMPORTANTE DEJEN LAS COMILLAS NO LAS QUITEN) a ver probemos con este oka??
SsS
<div class="shelf-footer">HOLA</div> Aqui solo tienen que modificar el texto, este es el texto que aparece abajo, como firma.
background: #fffdf5 !important; Aqui es para cambiar de color del fondo, solo deben cambiar este codigo el cual es un codigo de Hex, este lo encuentran con el color que deseen en la pagina que les mencione
border: 2px dashed rgb(140, 51, 51) !important; Bien aqui vamos a modificar el borde, se lo deje por defecto en dashed (borde de lineas punteadas) pero tienen la opcion de cambiarlo por dotted (borde de puntitos), double (borde doble de lineas) o solid (borde de una linea) y ya respcto a lo otro es un codigo rgb del color que deseen usar, recuerden debe de ser como aparece.
scrollbar-color: rgb(140, 51, 51) transparent; Aqui escogeremos el color de la barra de scroll asi que busquen el codigo rgb del color que deseen
<div class="blinkie-shelf">
<div class="shelf-title">BLINKIES</div>
<div class="blinkie-container">
<img src="https://adriansblinkiecollection.neocities.org/f33.gif" />
<img src="URL DEL BLINK" />
</div>
<div class="shelf-footer">HOLA</div>
</div>
<style>
.blinkie-shelf {
background: #fffdf5 !important;
border: 2px dashed rgb(140, 51, 51) !important;
padding: 15px 10px 15px 15px;
border-radius: 10px;
text-align: center;
max-width: 280px;
margin: 10px auto;
box-shadow: 4px 4px 0px rgba(0,0,0,0.05);
box-sizing: border-box;
}
.shelf-title {
font-family: 'Courier New', monospace !important;
font-size: 13px !important;
font-weight: bold;
color: rgb(140, 51, 51) !important;
margin-bottom: 12px;
border-bottom: 1px solid rgba(140, 51, 51, 0.1);
padding-bottom: 5px;
}
.blinkie-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
padding: 5px 8px 5px 5px;
box-sizing: border-box;
max-height: 165px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgb(140, 51, 51) transparent;
}
.blinkie-container::-webkit-scrollbar {
width: 4px;
}
.blinkie-container::-webkit-scrollbar-track {
background: transparent;
}
.blinkie-container::-webkit-scrollbar-thumb {
background: rgb(140, 51, 51);
border-radius: 10px;
}
.blinkie-container img {
image-rendering: pixelated;
height: 23px !important;
width: auto;
transition: transform 0.2s;
display: block;
}
.blinkie-container img:hover {
transform: scale(1.08);
cursor: help;
}
.shelf-footer {
font-family: 'Courier New', monospace !important;
font-size: 11px !important;
color: rgb(132, 153, 79) !important;
margin-top: 12px;
opacity: 0.8;
}
</style>
Eso seria todo por el momento, espero les sirva demasiado, se que a veces es frustrante por que esto es algo lento o dificil pero no pierdan la cabeza, les quedara chido, de todos modos si les surge alguna duda no duden en ponerla en los comentarios, tambien diganme cual les gustaria que fuese el siguiente tutorial nwn, sin mas que decir, nos vemos pronto, no olviden tomar agua ⸜(｡˃ ᵕ ˂ )⸝♡
Muchas graciaaaaassss!!!!! está super sencillo de seguir el tutorial!
ResponderBorrarDIOS MIL GRACIAS ADORO
ResponderBorrarMuchas gracias por el tutoriaaal ya es el segundo que sigo y me fascinan jijijiji <3<3<3<3
ResponderBorrar