Widgets para Blogger – Galería de imágenes nuevos estilos V4

Widgets para Blogger – Galería de imágenes nuevos estilos V4

utilizarlos con estilos diferentes para mostrar nuestras categorías más populares y así obtener mas trafico web hacia nuestro blog es una forma de optimizar nuestras publicaciones destacadas. A este nuevo widget para Blogger se lo conoce como galería de imágenes V4, lo que vamos hacer es copiar un código en un widget HTML/javascript y ubicarlo debajo de la cabecera principal de nuestro blog o al final del blog, todo depende de su gusto, nos mostrara tres puestos de imágenes con sus respectivas URLs de sus artículos a mostrar, tendremos que hacer todo este proceso de forma manual.

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 tiene como nombre “HTML/Javascript” ábrelo

5 Ingresa el siguiente 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-third 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-third .mask { background-color: rgba(0,0,0,0.6); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: translate(460px, -100px) rotate(180deg); -moz-transform: translate(460px, -100px) rotate(180deg); -o-transform: translate(460px, -100px) rotate(180deg); -ms-transform: translate(460px, -100px) rotate(180deg); transform: translate(460px, -100px) rotate(180deg); -webkit-transition: all 0.2s 0.4s ease-in-out; -moz-transition: all 0.2s 0.4s ease-in-out; -o-transition: all 0.2s 0.4s ease-in-out; -ms-transition: all 0.2s 0.4s ease-in-out; transition: all 0.2s 0.4s ease-in-out; } .view-third h2 { -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -o-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); -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-third p { -webkit-transform: translateX(300px) rotate(90deg); -moz-transform: translateX(300px) rotate(90deg); -o-transform: translateX(300px) rotate(90deg); -ms-transform: translateX(300px) rotate(90deg); transform: translateX(300px) rotate(90deg); -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-third a.info { -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-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-third:hover .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); } .view-third:hover h2 { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(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; } .view-third:hover p { -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); -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-third:hover a.info { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(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; } </style> <div class="ayudadeblogger view-third"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4fqeg9WAISdb6D9kSNbqXWEm_l-mzta41D7xoH1KFf6XXaeO5uMudWwFiSZPjhtgVgSbDFCzF_c_6qEdmyud1jSdPqDeOdXkNcYvCjUsP98hK2h03B4RvFVvvtT1Smx_QCdSnI7_Lh2c/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-third"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuxAD33PwBRQAlwIYhTEOOuLgo-dWk5QtC_F4JqDuC9lv6i2Wv0BVuXubiQNZvsgbaGzR0s_T4Sr9tt40UeAhQ7iBT3sZiwvBSNaz115-YvjQYvqM2HaltENiMy_oHEIQBTMR6rsmB-8o/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-third"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWc6laDzrkPUq2d8MLMujJ9OYo7ewUBAQVIBYvMVEFi9o0CrsJQZwbPTnBTe2GMjxU1SwHFd9yhfX-8_a5DEns_dOjBr6H5siXvv6bpymKJZ3qBfZxtkS9Jt9ML4B3kniQjXaftDAkNA8/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:

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!

Los contenidos aqui expuestos tienen su autoria por el creador,toda la informacion aqui expuesta es para que llegue a mas gente,el merito es de su autor que esta sacado todo ello de su blog,muchas gracias a su creador.