NUEVO ESTILO DE GALERÍA DE IMÁGENES PARA TUS ENTRADAS DE BLOGGER
By Blogs Famag - domingo, diciembre 30, 2018
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.
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.
Vamos a trabajar
Pagina Demo:
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/AVvXsEiN5ucZvjKHJ6EXpqXGyu-jxMQuKGMVhOP4o_3rCxe9vnwwESqEGnIoiqRTmE8yyK6knkOODQkQ1cK5yYQxDOB9n9Eaue6FeHMJJZS58WSfSno6gD3OdR3yzDxsfKP2SJO6h2dtxWqGWdA/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/AVvXsEj65QqSpp86LbS34Jo3z7yP2SJv0GJt3jck1Khyu5UXNETQQQu5u_DcVHX9do4-iktjmHkh3It1_N9QVgIv-t3bXOK6GeWnHONnKuLkLRkXtGkedmSbxaqu7_TrpYa-YvLZMj2uNvr0VyM/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/AVvXsEjV0XoPrvlCl_teSwO0Nm5y3ioQPLnlIm4BK614V1kPNo_d3t-0TQzutHggv5rbM1SH-HDZJHcM5hBm55FVlrBvGVkYZNDMj_9FOrMO2q6KsshTqryeFUvvPBd15s2HOk94fMi43FyWwgU/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/AVvXsEiQzjL-9gIltCuWtVls4Q8uF0NOYEwtX1cu1dSO63KmzxJD7xTujDEF61bg2hyGy4-5DEXDZgr96K_p-rIQhyphenhyphenZOBeMIZrlif4oZjaj-9mI5UN8nRYszOR4ujGIbqKw2jJJr06SIRujyDBU/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>
.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/AVvXsEiN5ucZvjKHJ6EXpqXGyu-jxMQuKGMVhOP4o_3rCxe9vnwwESqEGnIoiqRTmE8yyK6knkOODQkQ1cK5yYQxDOB9n9Eaue6FeHMJJZS58WSfSno6gD3OdR3yzDxsfKP2SJO6h2dtxWqGWdA/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/AVvXsEj65QqSpp86LbS34Jo3z7yP2SJv0GJt3jck1Khyu5UXNETQQQu5u_DcVHX9do4-iktjmHkh3It1_N9QVgIv-t3bXOK6GeWnHONnKuLkLRkXtGkedmSbxaqu7_TrpYa-YvLZMj2uNvr0VyM/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/AVvXsEjV0XoPrvlCl_teSwO0Nm5y3ioQPLnlIm4BK614V1kPNo_d3t-0TQzutHggv5rbM1SH-HDZJHcM5hBm55FVlrBvGVkYZNDMj_9FOrMO2q6KsshTqryeFUvvPBd15s2HOk94fMi43FyWwgU/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/AVvXsEiQzjL-9gIltCuWtVls4Q8uF0NOYEwtX1cu1dSO63KmzxJD7xTujDEF61bg2hyGy4-5DEXDZgr96K_p-rIQhyphenhyphenZOBeMIZrlif4oZjaj-9mI5UN8nRYszOR4ujGIbqKw2jJJr06SIRujyDBU/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 px, 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.
0 comentarios