Widgets para Blogger – Galería de imágenes nuevos estilos V3
El día de hoy explicare un truco muy básico
para todos los usuarios de Blogger. Aprenderán a insertar un simple código con
el cual se mostrara una galería de imágenes con un estilo diferente, y así
destacar los artículos más importantes de su blog. El código de esta nueva galería
de imágenes funciona perfectamente en todos los navegadores web.
A continuación pueden ver su demostración
en el siguiente blog de demos, el widget galería de imágenes tiene como nombre “GALERIA
ESTILOS 2”
Luego de ver su demostración vamos a
instalar el código en un widget
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 #fff;
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,.ayudadeblogger
.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-second img {
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.view-second .mask {
background-color: rgba(115,146,184, 0.7);
width: 300px;
padding: 60px;
height: 300px;
-ms-filter: "progid:
DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: translate(265px, 145px) rotate(45deg);
-moz-transform: translate(265px, 145px) rotate(45deg);
-o-transform: translate(265px, 145px) rotate(45deg);
-ms-transform: translate(265px, 145px) rotate(45deg);
transform: translate(265px, 145px) rotate(45deg);
-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-second h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: translate(200px, -200px);
-moz-transform: translate(200px, -200px);
-o-transform: translate(200px, -200px);
-ms-transform: translate(200px, -200px);
transform: translate(200px, -200px);
-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-second p {
-webkit-transform: translate(-200px, 200px);
-moz-transform: translate(-200px, 200px);
-o-transform: translate(-200px, 200px);
-ms-transform: translate(-200px, 200px);
transform: translate(-200px, 200px);
-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-second a.info {
-webkit-transform: translate(0px, 100px);
-moz-transform: translate(0px, 100px);
-o-transform: translate(0px, 100px);
-ms-transform: translate(0px, 100px);
transform: translate(0px, 100px);
-webkit-transition: all 0.2s 0.1s ease-in-out;
-moz-transition: all 0.2s 0.1s ease-in-out;
-o-transition: all 0.2s 0.1s ease-in-out;
-ms-transition: all 0.2s 0.1s ease-in-out;
transition: all 0.2s 0.1s ease-in-out;
}
.view-second:hover .mask {
-ms-filter: "progid:
DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translate(-80px, -125px) rotate(45deg);
-moz-transform: translate(-80px, -125px) rotate(45deg);
-o-transform: translate(-80px, -125px) rotate(45deg);
-ms-transform: translate(-80px, -125px) rotate(45deg);
transform: translate(-80px, -125px) rotate(45deg);
}
.view-second:hover h2 {
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-o-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.view-second:hover p {
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-o-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.view-second:hover a.info {
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-o-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}
</style>
<div class="ayudadeblogger view-second">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1b8gh4kpl4zLsxEUtj1u4wHyzTpaHCCwy9xbE4ikJhdo8e2JNbCwsx3PK-hMQtG82rTGK6AtWnthRWZ-XRaFqZAxwygBBFm031NdPEyf6IO9EtBKfNR_A1r06DnQDkRke764dR6Pb_9I/s1600/ecuador.jpg"
/>
<div class="mask"></div>
<div class="content">
<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-second">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWyOgRTaJIMBQ7mwuDYTWrR-5WWVkJkLW2ZG4xnR5WDsfn3NbLAoSrHvtJCyMR7I6CreSsqDgmOBz1A4nplR8eeUFjhmjhSVSAH1-UZM8ZgBWzz1_3LVmLaffahbSrwW6GMs7_mz5xG_A/s1600/ecuador.jpg"
/>
<div class="mask"></div>
<div class="content">
<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-second">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEDi5v9ENcV6E1pgmDrZ9N_RhPe-tx3Lv5d04qN5Ya-cXIeHLQ_thcHoFR1sSTPMUW3XSSDubA_FbSodPdFTmkdYpG7nvs6HZsLoag_brcrGzXcyl7_tSJNXnET8jgg5smUsvZXTP4URc/s1600/ecuador.jpg"
/>
<div class="mask"></div>
<div class="content">
<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:
He marcado de 4 diferentes colores, en
los lugares que tendrán que realizar sus cambios
Por ejemplo:
Tienes que borrar las URLs que están marcadas
de color rojo, por las URLs de las imágenes que quieras dar a conocer en cada
una de ellas, además, la imagen debe tener una dimensión de 280x208.
Borra las palabras que dicen AQUI EL TITULO, por el título del post.
Y por último cambia las direcciones URLs
http://www.ecuador-turistico.com/2014/01/turismo-en-ecuador-banos-de-agua-santa.html
por las direcciones URLs de sus artículos destacados.
Eso es todo, ahora dale un clic en “Guardar”
y ubica tu widget debajo de la cabecera principal de tu blog
Fácil verdad!
Además, pueden ver otros Widgets para Blogger
en los siguientes links
Recuerda suscribirte y recibirás mis
nuevas actualizaciones 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
Hola , si me respondes seria muy bueno, como hago para que la galeria no me quede con el boton de leer mas y el sub titulo en la imagen asi: http://ojes9play.blogspot.com/p/blog-page_2.html
ResponderEliminarPodría cambiar el tamaño de los cuadros?
ResponderEliminar