Widgets para Blogger – Nuevos estilos galería de imágenes
¿Necesitabas nuevos estilos en las
imágenes de presentación de tu blog de Blogger? Ayudadeblogger.com te ayuda con
un código CSS que realiza una función muy importante para darle un estilo
diferente a una galería de imágenes. Lo que vamos a ser es mostrar las imágenes
más destacadas de nuestras publicaciones en una galería centrada en el sidebar
de nuestro blog de Blogger. Podemos ubicar las imágenes que nosotros queramos
al igual si queremos mostrar solo una imagen, 5 imágenes o más.
Características importantes
Muestra la imagen
Al pasar el cursor por la galería de
cualquier imagen, dará un efecto envolvente de la imagen y luego mostrara, el
título del post, una pequeña descripción de su artículo y un link dirigido
hacia el post que queramos destacar y dar a conocer.
Este widget para Blogger nos ayudara a
destacar los artículos más destacados de nuestro blog, ayudando a aumentar las
vistas de los artículos.
A continuación pueden ver su
demostración en el siguiente demo, el widget está ubicado al final del sidebar
y tiene como nombre “Galería”
Les gusto verdad!
Vamos a trabajar
1 Ir a Blogger
2 Un clic en “Diseño”
3 Abre un gadget “Añadir un gadget”
4 Busca el widget que dice
“HTML/Javascript” ábrelo
5 Inserta el siguiente código en su
interior
<style>
.ayudadeblogger { /* 300x188 */
border: 10px solid #FFF;
cursor: pointer;
height: 188px;
margin: 0 auto;
overflow: hidden;
position: relative;
text-align: center;
width: 300px;
}
.ayudadeblogger img { /* la imagen */
display: block;
position: relative;
-moz-transition: all 0.5s
ease-out;
-webkit-transition: all 0.5s
ease-out;
-o-transition: all 0.5s
ease-out;
transition: all 0.5s
ease-out;
opacity: 1;
filter: alpha(opacity=100);
}
.ayudadeblogger:hover img {
-moz-transform:
rotate(720deg) scale(0);
-webkit-transform:
rotate(720deg) scale(0);
-o-transform: rotate(720deg)
scale(0);
-ms-transform:
rotate(720deg) scale(0);
transform: rotate(720deg)
scale(0);
opacity: 0;
filter: alpha(opacity=0);
}
.ayudadeblogger .mask {
background-color: #094B8D;
height: 188px;
left: 0;
position: absolute;
overflow: hidden;
top: 0;
width: 300px;
-moz-transform: rotate(0deg)
scale(1);
-webkit-transform:
rotate(0deg) scale(1);
-o-transform: rotate(0deg)
scale(1);
-ms-transform: rotate(0deg)
scale(1);
transform: rotate(0deg)
scale(1);
-moz-transition: all 0.3s
ease-out;
-webkit-transition: all 0.3s
ease-out;
-o-transition: all 0.3s
ease-out;
transition: all 0.3s
ease-out;
opacity: 0;
filter: alpha(opacity=0);
}
.ayudadeblogger:hover .mask {
-moz-transform:
translateY(0px) rotate(0deg);
-webkit-transform:
translateY(0px) rotate(0deg);
-o-transform:
translateY(0px) rotate(0deg);
-ms-transform:
translateY(0px) rotate(0deg);
transform: translateY(0px)
rotate(0deg);
-moz-transition-delay: 0.4s;
-webkit-transition-delay:
0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
opacity: 1;
filter: alpha(opacity=100);
}
.ayudadeblogger h4 { /* ecuador-turistico.com */
background-color: rgba(255, 255, 255, 0.5);
color: #fff;
text-align: center;
position: relative;
font-family: Georgia;
font-size: 20px;
margin: 20px 0 0 0;
padding: 5px 0;
text-shadow: 0 3px 1px #000;
-moz-transform:
translateY(-200px);
-webkit-transform:
translateY(-200px);
-o-transform:
translateY(-200px);
-ms-transform:
translateY(-200px);
transform:
translateY(-200px);
-moz-transition: all 0.2s
ease-in-out;
-webkit-transition: all 0.2s
ease-in-out;
-o-transition: all 0.2s
ease-in-out;
transition: all 0.2s
ease-in-out;
}
.ayudadeblogger:hover h4 {
-moz-transform:
translateY(0px);
-webkit-transform:
translateY(0px);
-o-transform:
translateY(0px);
-ms-transform:
translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.7s;
-webkit-transition-delay:
0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.ayudadeblogger p {
color: #000;
font-family: Tahoma;
font-size: 13px;
margin: 0;
padding: 15px;
position: relative;
text-align: center;
text-shadow: 1px 1px 1px
#FFF;
-moz-transform:
translateY(-200px);
-webkit-transform:
translateY(-200px);
-o-transform:
translateY(-200px);
-ms-transform:
translateY(-200px);
transform:
translateY(-200px);
-moz-transition: all 0.2s
ease-in-out;
-webkit-transition: all 0.2s
ease-in-out;
-o-transition: all 0.2s
ease-in-out;
transition: all 0.2s
ease-in-out;
}
.ayudadeblogger:hover p {
-moz-transform:
translateY(0px);
-webkit-transform:
translateY(0px);
-o-transform:
translateY(0px);
-ms-transform:
translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.6s;
-webkit-transition-delay:
0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.ayudadeblogger a.info {
background-color: #456;
border-radius: 5px;
box-shadow: 0 0 2px #FFF, 0
0 5px #FFF inset;
color: #FFF;
display: inline-block;
padding: 7px 14px;
text-decoration: none;
-moz-transform:
translateY(-200px);
-webkit-transform:
translateY(-200px);
-o-transform:
translateY(-200px);
-ms-transform:
translateY(-200px);
transform:
translateY(-200px);
-moz-transition: all 0.2s
ease-in-out;
-webkit-transition: all 0.2s
ease-in-out;
-o-transition: all 0.2s
ease-in-out;
transition: all 0.2s
ease-in-out;
}
.ayudadeblogger a.info:hover {
box-shadow: 0 0 5px #FFF;
}
.ayudadeblogger:hover a.info {
-moz-transform:
translateY(0px);
-webkit-transform: translateY(0px);
-o-transform:
translateY(0px);
-ms-transform:
translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.5s;
-webkit-transition-delay:
0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}
</style>
<div class="ayudadeblogger">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdS53Ni13auv0xnkEIHgfUQBQtwDEqxUhyAmnL0hOBnQeGxdtTIKPlD3TeGc1EzFTGTrXv5INq0uh4RERX0X4h3vivwnX8_ZCUkDyGcLkaI-HTlGpOmjj4DRrhUITZNA6ZsV9jLGVmjfc/s1600/ayudadeblogger+1.jpg"
/>
<div
class="mask">
<h4> AQUI EL TITULO </h4>
<p> Aquí su texto resumido </p>
<a href="http://www.increibleviaje.com/"
class="info"> LEER MAS </a>
</div>
</div>
<div class="ayudadeblogger">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVhbSKmbF-ry29kBSVk4TQMYNysSv4wf850xeIbGE2iCnv0GgfJdPtSG6ZCHe2faN2NrxCQcBgWerM384_ogRc8aqZyujnCRVpNY-vSlXuZ1tb9VD6zGG1MnUM99MTc5jvw6_k_T77cP0/s1600/ayudadeblogger+1.jpg"
/>
<div
class="mask">
<h4> AQUI EL TITULO
</h4>
<p> Aquí su texto resumido </p>
<a href="http://www.increibleviaje.com/"
class="info"> LEER MAS </a>
</div>
</div>
<div
class="ayudadeblogger">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkjQWyutYttS_hcCA4UmokDDmCWDTgDPzOYVoC3XF4SXzEUnSv0ZZERQeVlah7CRf94wzKWBl9O8OYoNjA_B7nDtA0PSNs63RFmOlRm85s9yef7NiojaAyP98L9xzADvbT_HmL8b2HD9Y/s1600/ayudadeblogger+1.jpg"
/>
<div
class="mask">
<h4> AQUI EL TITULO </h4>
<p> Aquí su texto resumido </p>
<a href="http://www.increibleviaje.com/"
class="info"> LEER MAS </a>
</div>
</div>
<div
class="ayudadeblogger">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFqSn05UUdgzcFhD-Z2J5UyWz2TPqwfkBRD7sbYYJK-YFW93_gnWR4mSglxkc7OpRlHmUQD6AGt9KMChbbKGP3A8nmGXnAF0mh1IjDpnOLimCvz1RIxa1foqKBYMQ4DWy23v-XPFCOaUw/s1600/ayudadeblogger+1.jpg"
/>
<div class="mask">
<h4> AQUI EL TITULO </h4>
<p> Aquí su texto resumido </p>
<a href="http://www.increibleviaje.com/"
class="info"> LEER MAS </a>
</div>
</div>
|
Realiza estos cambios:
He marcado de 4 colores deferentes en
los lugares que ustedes tendrán que realizar sus diferentes cambios
La URL que está marcada de color rojo
representa a cada una de las imágenes a mostrar, recuerda publicar una imagen
que tenga una dimensión de 300x200 prixeles, y todas deberán tener esa misma
dimensión para que no se salga de contexto las imágenes.
Cambia las URLs que están marcadas de
color azul, por la dirección URL del artículo que quieras a conocer.
Borra las palabras que están marcadas de
color verde, por el título de algún post en particular
Y por último, borra el texto que está
marcado de color anaranjado y cámbialo por un pequeño resumen del artículo que estés
dando a conocer.
Eso es todo, ahora dale un clic en “Guardar”
y ubica tu nuevo widget de imágenes el sidebar de tu blog de Blogger
Nota: Si quieres disminuir el puesto de imágenes
a mostrar o si solo quieres mostrar una sola imagen basta con borrar a partir
del código que está marcado de color púrpura hasta el último código que es el
termino de </div>,
con esto solo se mostrara una imagen.
Fácil verdad!
Además, pueden visitar más Widgets para Blogger
de los siguientes links
Recuerda suscribirte y recibirás mis
nuevas actualizaciones diarias directamente en tu correo electrónico
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber y de inmediato les responderé
Saludos
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Buenisimo!!!!....Te queria consultar: La plantilla teatro que utilizaste la tenes disponible para bajar?....si es asi, donde esta, el link de descarga?....Espero tu respuesta y muchisimas gracias por todo como siempre!!!! Gabriel
ResponderEliminarHola Gabriel, en estos dias publicare el tutorial de la plantila Teatro, mientras tanto mantente atento a mis nuevas actualizaciones, te recomiendo que te suscribas, y en estos dias lo reicibiras directamente en tu correo electronico.
EliminarSaludos.
Grande Luis!....Si suscripto ya estoy....la espero entonces! Gracias como siempre por tu pronta y amable respuesta! Un gran abrazo!!!
ResponderEliminarAndo buscando algo como eso pero en horizontal.
ResponderEliminar