Widgets para Blogger – Galería de imágenes nuevos estilos V2
La facilidad con la que se puede
realizar un espectacular widget y utilizarlo en nuestro blog de Blogger es lo
mejor que podrán obtener en este sitio web. Utilizar nuevos Widgets para Blogger en nuestro blog y ubicarlos en donde más nos convenga, es una forma de dar a
conocer nuestros post más populares y así tener más tráfico web gracias a las
ubicaciones y creaciones de nuevos puesto. Esta nueva galería de imágenes funciona
perfectamente en todos los navegadores web, tiene una carga ligera apta para un
diseño web profesional. El código no lo vamos a insertar en el Editor HTML de
nuestra plantillas, lo que aremos es copiar y pegar el código en un widget HTML/Javascript,
que hace que sea más fácil para cambiar las imágenes y las direcciones URLs.
Luego de esta corta explicación pueden
ver su demostración en mi blog de demos, el widget galería de imágenes tiene
como nombre “GALERIA ESTILOS 1”
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 las siguientes líneas de código
en su interior
<style>
.ayudadeblogger {
width: 275px;
height: 200px;
margin: 5px;
float: left;
border: 10px solid #000;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px
#e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #000 no-repeat
center center;
}
.ayudadeblogger .mask,.view .content {
width: 275px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.ayudadeblogger img {
display: block;
position: relative;
}
.ayudadeblogger h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.ayudadeblogger p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.ayudadeblogger a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.ayudadeblogger a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-first img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first .mask {
-ms-filter: "progid:
DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(219,127,8, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-first h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: "progid:
DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid:
DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first:hover img {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
.view-first a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
-ms-filter: "progid:
DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
-ms-filter: "progid:
DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view-first:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-first:hover a.info {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
</style>
<div class="ayudadeblogger view-first">
<img src="http://4.bp.blogspot.com/-rsoF8CKF-4g/UuA4_Zl-koI/AAAAAAAAGZY/VUlik3poODU/s1600/ecuador.jpg"
/>
<div class="mask">
<h2>AQUI EL TITULO 1</h2>
<p>Diseño | Tecnología | CSS | Ayudadeblogger</p>
<a href="http://www.ecuador-turistico.com/2014/01/turismo-en-ecuador-banos-de-agua-santa.html"
class="info">Leer más</a>
</div>
</div>
<div class="ayudadeblogger view-first">
<img src="http://3.bp.blogspot.com/-X4kMz03d2dA/UuA5RKOqJ0I/AAAAAAAAGZg/9F2d9eT1AcU/s1600/ecuador.jpg"
/>
<div class="mask">
<h2>AQUI EL TITULO 2</h2>
<p>Diseño | Tecnología | CSS | Ayudadeblogger</p>
<a href="http://www.ecuador-turistico.com/2014/01/turismo-en-ecuador-banos-de-agua-santa.html"
class="info">Leer más</a>
</div>
</div>
<div class="ayudadeblogger view-first">
<img src="http://4.bp.blogspot.com/-2pcMlMZZMQE/UuA5bGsYvKI/AAAAAAAAGZo/qfETuqdODKI/s1600/ecuador.jpg"
/>
<div class="mask">
<h2>AQUI EL TITULO 3</h2>
<p>Diseño | Tecnología | CSS | Ayudadeblogger</p>
<a href="http://www.ecuador-turistico.com/2014/01/turismo-en-ecuador-banos-de-agua-santa.html"
class="info">Leer más</a>
</div>
</div>
|
Realiza estos cambios:
Este widget muestra 3 imágenes con sus
respectivas descripciones y direcciones URLs. He marcado de 4 diferentes
colores en los lugares que ustedes tendrán que realizar sus diferentes cambios.
Por ejemplo:
Las tres direcciones URLs que están marcadas
de color rojo, son las responsables de mostrar las imágenes, debes borrar cada
una de ellas y remplazarlas por las direcciones URLs de tus imágenes, las imágenes
tienen que tener una dimensión de 280x208.
Elimina los tres nombres que dicen AQUI EL TITULO
y remplázalos por el título del artículo destacado que vayas a dar a conocer
También, tienes que eliminar las
palabras que dicen Diseño | Tecnología
| CSS | Ayudadeblogger por una pequeña descripción del artículo que
vayas a destacar.
Y por último, elimina las tres
direcciones URLs que están marcadas de color azul http://www.ecuador-turistico.com/2014/01/turismo-en-ecuador-banos-de-agua-santa.html,
estas son las responsables de mostrar el articulo destacado, cámbialas por tus
direcciones URLs
Eso es todo, es momento de dar un clic
en “Guardar” y ubica tu nuevo widget debajo de la cabecera principal de tu blog
o donde mejor te parezca
Fácil verdad!
Recuerda suscribirte y recibirás mis nuevas
actualizaciones diarias directamente en tu bandeja de entrada
No se olviden de visitar algunos Widgets
para Blogger que publique anteriormente
¿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
Hola ¿Cómo estas? Dos preguntotas
ResponderEliminar1.-Si quiero dejar el efecto de la imagen (zoom) y el color (amarillo) pero las letras fijas (visibles) ¿Cómo le podría hacer?
2.- Si lo quisiera crear por medio de las entradas (de forma no manual) ¿Cómo podría hacerlo?
De antemano gracias =)