Widget Galería de Imágenes para blogger V2


La galería de fotos le da un montón de colores a un sitio web. Sin embargo, Blogger no tiene ninguna galería de fotos en su currículum que sea flexible y que pudiera divertir a los visitantes. Por lo tanto, tenemos que hacer uso de algunos scripts externos para formular un widget galería de imágenes que nos de una forma brillante. No estábamos 100 por ciento seguro de que íbamos a ser capaces de formular un widget de Galería de imágenes para blogger, pero al ser creativos y perseverantes se lo ha logrado, de forma muy sencilla  En este caso, hemos utilizado el poder de jQuery que ha dado algunos efectos de transición extraordinarias al widget de galería. Los que están en busca de un widget que puede contener sus imágenes juntas, entonces Ayudadeblogger.com es el sitio perfecto para hacerlo con unos simples pasos, hoy compartiré con ustedes un widget Galería de fotos para Blogger.

Widget Galería de Imágenes para blogger

¿Por qué utilizar un widget galería de imágenes?

Los lectores se cansan después de leer los artículos. Ellos necesitan un poco de distracción ¿por qué no integrar un widget que ofreciera unas fotos espectaculares, para que sus usuarios vuelen su imaginación, y sacarles una sonrisa. Por otra parte, los bloggers pueden utilizar este widget galería de imágenes como mejor les parezca. Es como tener una pequeña caja, donde una persona puede compartir sus instantáneas personales o algo relacionado con su interés.
¿Dónde podré ubicar mi galería de imágenes?

Todo depende de ti, en el lugar que desea ver este widget. Sin embargo, le recomendamos que se use en la barra lateral, donde la gente pueda verla fácilmente. Por otro lado, una persona también puede adjuntarla a su artículo para apoyar algunas imágenes extraordinarias. A continuación mire su demostración en mi blog de demos, el widget de imágenes está ubicado en el sidebar y tiene como nombre “Galería de Imágenes Blogger”.


Características de la Galería de Imágenes para blogger

Hemos hecho nuestro mejor esfuerzo para proporcionar este widget con algunas de las características más extraordinarias.

Puede añadir imágenes ilimitadas a la galería sin restricción alguna
Rotación de imágenes de forma automática con la ayuda de un gran alcance con JavaScript.
Se tiene imágenes pequeñas a través del cual los usuarios pueden seleccionar las mejores fotos.
Dispone de algunas espléndidas transiciones de imágenes integradas (más de 4 transiciones diferentes).

Cómo instalar la Galería de fotos en nuestro blog de Blogger

He tratado de hacer este tutorial lo más sencillo posible. El tutorial consta de 3 pasos, por lo que no se demoraran más de 10 minutos en completarlo todo. Siga las siguientes instrucciones.

1 Ir a blogger

2 Da un clic en “Plantilla

Widget Galería de Imágenes para blogger

3 Luego un clic en “Editar HTML

Widget Galería de Imágenes para blogger

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Widget Galería de Imágenes para blogger








En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

Widget Galería de Imágenes para blogger

4 Busca este código

]]></b:skin>

Inserta las siguientes líneas de código justo arriba del código que encontraste

/*-- Widget galeria de imagenes BLOGGER start ayudadeblogger.com---*/
/* the container */
.allinone_thumbnailsBanner {
            position:relative;
}
.allinone_thumbnailsBanner img {
            position:absolute;
            top:0px;
            left:0px;
            max-width:none;
            max-height:none;
}
.allinone_thumbnailsBanner_list {
            margin:0;
            padding:0;
            list-style:none;
            display:none;
}
.allinone_thumbnailsBanner .stripe {
            position:absolute;
            display:block;
            height:100%;
            z-index:1;
            overflow:hidden;
}
.allinone_thumbnailsBanner .block {
            position:absolute;
            display:block;
            z-index:1;
            overflow:hidden;
}
.mycanvas {
            position:absolute;
            top:8px;
            right:10px;
            z-index:10;
}

/**SKIN***/

.allinone_thumbnailsBanner.cool .bannerControls {
            position:absolute;
            left:0;
            top:0;
            z-index:2;
            width:100%;
}

.allinone_thumbnailsBanner.cool .leftNav {
            position:absolute;
            left:0px;
            top:50%;
            /*margin-top:-20px;  height/2 */
            width:22px;
            height:75px;
            background:url(http://2.bp.blogspot.com/-pdLg36QC8mk/UIvXF94QZ7I/AAAAAAAAGwk/TiCma_laCX4/s1600/leftNavOFF.png) 0 0 no-repeat;
            cursor: pointer;
}

.allinone_thumbnailsBanner.cool .leftNav:hover {
            background:url(http://www.responsivejqueryslider.com/skins/cool/leftNavON.png) 0 0 no-repeat;
}
.allinone_thumbnailsBanner.cool .rightNav {
            position:absolute;
            right:0px;
            top:50%;
            /*margin-top:-20px;  height/2 */
            width:22px;
            height:75px;
            background:url(http://2.bp.blogspot.com/-Qs29cLTxWwc/UIvW7mNocHI/AAAAAAAAGwc/o2knuVw0DGc/s1600/rightNavOFF.png) 0 0 no-repeat;
            cursor: pointer;
}
.allinone_thumbnailsBanner.cool .rightNav:hover {
            background:url(http://4.bp.blogspot.com/-ZjZcPQIFbLw/UIvWw1TAp-I/AAAAAAAAGwU/OYd6pbNi6Zk/s1600/rightNavON.png) 0 0 no-repeat;
}
.allinone_thumbnailsBanner.cool .thumbsHolderWrapper {
            position:absolute;
            background:#000000;
            border-top:1px solid #e66b19;
            height:121px;
            width:100%;
            overflow:hidden;
            z-index:10;
}
.allinone_thumbnailsBanner.cool .thumbsHolderVisibleWrapper {
            position:absolute;
            width:100%;
            height:121px;
            overflow:hidden;
}
.allinone_thumbnailsBanner.cool .thumbsHolder {
            position:absolute;
}
.allinone_thumbnailsBanner.cool .thumbsHolder_ThumbOFF {
            float:left;
            display:block;
            width:110px;
            height:65px;
            cursor: pointer;
}

.allinone_thumbnailsBanner.cool .thumbsHolder_ThumbOFF img {
            position:relative;
}

.allinone_thumbnailsBanner.cool .thumbsHolder_ThumbON {
            background:url(http://4.bp.blogspot.com/-_AbyLeD-o6s/UIvWoNibtHI/AAAAAAAAGwM/tUkkFIT9XNY/s1600/carouselLeftNavOn.png) center 0px no-repeat;
}
.allinone_thumbnailsBanner.cool .carouselLeftNav {
            position:absolute;
            width:29px;
            height:120px;
            background:url(http://4.bp.blogspot.com/-_AbyLeD-o6s/UIvWoNibtHI/AAAAAAAAGwM/tUkkFIT9XNY/s1600/carouselLeftNavOn.png) 0 0 no-repeat;
            cursor: pointer;          
}

.allinone_thumbnailsBanner.cool .carouselLeftNav:hover {
            background:url(http://www.responsivejqueryslider.com/skins/cool/carouselLeftNavOn.png) 0 0 no-repeat;
}

.allinone_thumbnailsBanner.cool .carouselLeftNavDisabled {
            background:url(http://4.bp.blogspot.com/-5DKkw5nikZQ/UIvWc91GRRI/AAAAAAAAGwE/-jtMsu4PKnA/s1600/carouselLeftNavDisable.png) 0 0 no-repeat;
            cursor:default;
}
.allinone_thumbnailsBanner.cool .carouselLeftNavDisabled:hover {
            background:url(http://4.bp.blogspot.com/-5DKkw5nikZQ/UIvWc91GRRI/AAAAAAAAGwE/-jtMsu4PKnA/s1600/carouselLeftNavDisable.png) 0 0 no-repeat;
}

.allinone_thumbnailsBanner.cool .carouselRightNav {
            position:absolute;
            width:29px;
            height:120px;
            background:url(http://1.bp.blogspot.com/-5UyTrF06Xcw/UIvWVzUaLeI/AAAAAAAAGv8/bpsfdTPNkRM/s1600/carouselRightNavOn.png) 0 0 no-repeat;
            cursor: pointer;
}

.allinone_thumbnailsBanner.cool .carouselRightNav:hover {
            background:url(http://1.bp.blogspot.com/-5UyTrF06Xcw/UIvWVzUaLeI/AAAAAAAAGv8/bpsfdTPNkRM/s1600/carouselRightNavOn.png) 0 0 no-repeat;
}

.allinone_thumbnailsBanner.cool .carouselRightNavDisabled {
            background:url(http://1.bp.blogspot.com/-pevDHKjxqBI/UIvWGpZ49lI/AAAAAAAAGv0/tCN7Z95zTRE/s1600/carouselRightNavDisable.png) 0 0 no-repeat;
            cursor:default;
}
.allinone_thumbnailsBanner.cool .carouselRightNavDisabled:hover {
            background:url(http://1.bp.blogspot.com/-pevDHKjxqBI/UIvWGpZ49lI/AAAAAAAAGv0/tCN7Z95zTRE/s1600/carouselRightNavDisable.png) 0 0 no-repeat;
}

5 Busca este código

</head>

Inserta el siguiente código Javascript arriba del código que encontraste

<script src='http://yourjavascript.com/13041153828/jquery-min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/11023215588/jquery-ui-1-8-16-custom-min.js'/>

<script charset='utf-8' src='http://yourjavascript.com/18831323441/allinone-thumbnailsbanner.js' type='text/javascript'/>
<script charset='utf-8' src='http://yourjavascript.com/18318318521/reflection.js' type='text/javascript'/>
            <script>
                        $(function() {

                                    $(&#39;#allinone_thumbnailsBanner_sidebar3&#39;).allinone_thumbnailsBanner({
                                               skin: &#39;cool&#39;,
                                               numberOfThumbsPerScreen:2,
                                               numberOfStripes:4,
                                               numberOfRows:5,
                                               numberOfColumns:5,
                                               showOnInitNavArrows:false,
                                               width: 295,
                                               height: 200                
                                   });                  
                                  
                                  
                        });
            </script>


Nota: Recuerda si ya utilizas un código script de slideshow para tu blog de blogger, ya no tendrás que insertar solo este código http://yourjavascript.com/13041153828/jquery-min.js y si no utilizas ningún código script de slideshow para tu blog de blogger inserta todo el código tal como está.

6 Ahora es momento de dar un clic en “Guardar plantilla

7 Da un clic en “Diseño

Widget Galería de Imágenes para blogger

8 Abre un gadget “Añadir un gadget

Widget Galería de Imágenes para blogger

9 Busca el widget que dice “HTML/Javascript”, ábrelo e inserta el siguiente código en su interior

Widget Galería de Imágenes para blogger

<div id="latest-newsz" class="float-block">
                        <div id="allinone_thumbnailsBanner_sidebar3">
                    <ul class="allinone_thumbnailsBanner_list">
                        <!-- IMAGES start ayudadeblogger.com-->
                        <li  data-bottom-thumb="http://3.bp.blogspot.com/-7IoJaiRxTxE/UhTMcFwSzFI/AAAAAAAAEVY/UkuU8x0zwLQ/s1600/ayudadeblogger+1.1.JPG"><img src="http://1.bp.blogspot.com/-fP2XucWabZQ/UhTMWvL3O3I/AAAAAAAAEVQ/YE6Oa-y20L8/s1600/ayudadeblogger+1.JPG" alt="" /></li>
                        <li data-bottom-thumb="http://3.bp.blogspot.com/-YGAUeLYHxw0/UhTMhTH58BI/AAAAAAAAEVo/18H18Y6vq4E/s1600/ayudadeblogger+2.2.JPG"><img src="http://1.bp.blogspot.com/-uYhhU8YTfCo/UhTMet9luBI/AAAAAAAAEVg/tyHvoIh2S4U/s1600/ayudadeblogger+2.JPG" alt="" /></li>
                        <li data-bottom-thumb="http://4.bp.blogspot.com/-A4RWEtUP8hM/UhTMoMqTqgI/AAAAAAAAEV4/A6nRvnpao0c/s1600/ayudadeblogger+3.3.JPG"><img src="http://1.bp.blogspot.com/-MF1L_XqY1HI/UhTMlDHO4sI/AAAAAAAAEVw/EYwHNEeWwgE/s1600/ayudadeblogger+3.JPG" alt="" /></li>
                        <li data-bottom-thumb="http://3.bp.blogspot.com/-QvIWmi61MZ0/UhTNA89vS7I/AAAAAAAAEW4/Fn2l6KUTiGQ/s1600/ayudadeblogger+7.7.JPG"><img src="http://1.bp.blogspot.com/-Doc6QS5kjXM/UhTM-PfEJxI/AAAAAAAAEWw/KYOL52ivhpM/s1600/ayudadeblogger+7.JPG" alt="" /></li>
                        <li data-bottom-thumb="http://2.bp.blogspot.com/-3IZpjDPDoGM/UhTMu7BBu0I/AAAAAAAAEWI/Ou0mBAHzvnc/s1600/ayudadeblogger+4.4.JPG" ><img src="http://4.bp.blogspot.com/-t-HqZoFZFIg/UhTMrYjlnKI/AAAAAAAAEWA/H2aK2CP7IRQ/s1600/ayudadeblogger+4.JPG" alt="" /></li>
                       
                        <li data-bottom-thumb="http://4.bp.blogspot.com/-qtyiHQvUXb0/UhTM2IGGPUI/AAAAAAAAEWY/J32J9oiE2pU/s1600/ayudadeblogger+5.5.JPG"><img src="http://3.bp.blogspot.com/-xgACiiveBS8/UhTMzPnMm0I/AAAAAAAAEWQ/x4924ZDmmY8/s1600/ayudadeblogger+5.JPG" alt="" /></li>
                        <li data-bottom-thumb="http://1.bp.blogspot.com/-LHOs7IocbZA/UhTM7VH9jEI/AAAAAAAAEWo/ZKcrajisoN0/s1600/ayudadeblogger+6.6.JPG"><img src="http://2.bp.blogspot.com/-eWPDONn3OZY/UhTM4jrvj7I/AAAAAAAAEWg/A-utGhWNvKo/s1600/ayudadeblogger+6.JPG" alt="" /></li>
                        <li data-bottom-thumb="http://3.bp.blogspot.com/-QvIWmi61MZ0/UhTNA89vS7I/AAAAAAAAEW4/Fn2l6KUTiGQ/s1600/ayudadeblogger+7.7.JPG"><img src="http://1.bp.blogspot.com/-Doc6QS5kjXM/UhTM-PfEJxI/AAAAAAAAEWw/KYOL52ivhpM/s1600/ayudadeblogger+7.JPG" alt="" /></li>
                        <li data-bottom-thumb="http://3.bp.blogspot.com/-7IoJaiRxTxE/UhTMcFwSzFI/AAAAAAAAEVY/UkuU8x0zwLQ/s1600/ayudadeblogger+1.1.JPG"><img src="http://1.bp.blogspot.com/-fP2XucWabZQ/UhTMWvL3O3I/AAAAAAAAEVQ/YE6Oa-y20L8/s1600/ayudadeblogger+1.JPG" alt="" /></li>
                        <li data-bottom-thumb="http://3.bp.blogspot.com/-YGAUeLYHxw0/UhTMhTH58BI/AAAAAAAAEVo/18H18Y6vq4E/s1600/ayudadeblogger+2.2.JPG"><img src="http://1.bp.blogspot.com/-uYhhU8YTfCo/UhTMet9luBI/AAAAAAAAEVg/tyHvoIh2S4U/s1600/ayudadeblogger+2.JPG" alt="" /></li>
                    </ul>                                          
                          
                        </div>            
           
            </div>

            
                   
            <br />      <br />      <br />      <br />      <br />      <br />      <br />

Realiza estos cambios:

He marcado de dos diferentes colores, en los cuales ustedes tendrán que hacer sus diferentes cambios e insertar las URLs correspondientes de sus imágenes

Las URLs que están marcadas de color azul, son las imágenes pequeñas, tienen que insertar imágenes que tengan un diámetro de 110x65 pixeles.

Además, las URLs que están marcadas de color rojo, son las imágenes grandes, tienen que insertar la URL de su imagen correspondiente con una dimensión de 295x200 pixeles.

Eso es todo, una vez hecho esto, dale un clic en “Guardar” y ubica tu nuevo widget galería de imágenes en tu sidebar, o en un post.

Fácil verdad!

¿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
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

6 comentarios:

  1. Luis excelente aporte, conozco muy poco de codificación y necesitaba modificar el ancho de la animación... como lo hago ?

    ResponderEliminar
    Respuestas
    1. Hola a que te refieres con ancho de la animacion, si puedes enviame la direccion te tu blog donde hayas insertado este truco.
      Saludos.

      Eliminar
  2. Demore mucho en contesrtar... me referia a q deseo hacer 295x200 de este ancho mas grande asi lo pueda poner en un post.

    ResponderEliminar
    Respuestas
    1. Aumenta donde dice width: 295, height: 200 , al igual si modificas este codigo, tendras que aumentar el tamaño de tus imaganes con la dimension que vayas a aumentar.
      Saludos.

      Eliminar
  3. Hola Luis, ante todo, muchas gracias por el tuto, me encantan las transiciones que tiene, y la explicacion en muy buena.
    Mi duda es: me guataria saber si es posible que, al pasar sobre una de las fotos que va pasando, salga un titulo y al hacer click con el raton, te habra una URL. Mi idea es poner un enlace a una entrada con la galeria de fotos que se seleccione, pero no se muy bien por donde empezar a tocar el codigo.

    Muchas gracias de ante mano !!!

    ResponderEliminar
    Respuestas
    1. Hola Alvaro, claro que se puede hacer todo lo que tu dices, alt="Aquí el titulo", otra cosa para poder insertar una dirección URL de cualquier entrada en cual quier imagen, escribeme directamente a esta dirección: ayudadeblogger@gmail.com y describe lo que necesitas, así te podre enviar el código completo para poder realizar este truco de Blogger. Saludos.

      Eliminar