Widget Slider galería de imágenes acordeón para blogger
Querías una espectacular galería de imágenes
en forma de acordeón que se muestre en tu blog de blogger, Ayudadeblogger.com
te ayudara con la implementación del código para que lo utilices en tu blog de
blogger. Lo que va a mostrar nuestro widget acordeón son 5 imágenes de nuestro
blog, la inserción de las imágenes lo tendremos que hacer de forma manual al
igual que los enlaces de nuestros artículos que queramos mostrar en esta nueva
y fabulosa galería de imágenes acordeón para blogger. Esta nueva galería de imágenes
nos aparecerá después de la cabecera principal de nuestro blog. Tendremos que
seguir dos simples pasos para poder insertar el código y así obtener este
grandioso truco para blogger.
También publique algunos trucos de slideshow, de los cuales te puedo gustar, a continuación
les dejo los enlaces de mis anteriores publicaciones:
A continuación mire su demostración en mi blog de demos
Te gusto verdad! Ahora vamos a trabajar
1 Ira blogger
2 Da un clic en “Plantilla”
3 Otro clic en “Editar HTML”
Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación
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.
Busca este código ]]></b:skin> y
arriba de el inserta las siguientes líneas de código
/* Acordeon Post Slider By
Ayudadeblogger.com */
#tbi_slider {
overflow: hidden;
margin: 20px auto;
padding: 0;
width: 805px;
height: 320px;
-webkit-box-shadow: 0 0 10px 1px rgba(0,
0, 0, 0.35);
box-shadow: 0 0 10px 1px rgba(0, 0, 0,
0.35);
}
#tbi_slider ul {
margin: 0;
padding: 0;
width: 2000px;
}
#tbi_slider li {
position: relative;
display: block;
float: left;
width: 160px;
border-left: 1px solid #888;
-webkit-box-shadow: 0 0 25px 10px rgba(0,
0, 0, 0.5);
box-shadow: 0 0 25px 10px rgba(0, 0, 0,
0.5);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
#tbi_slider ul:hover li {
width: 40px;
}
#tbi_slider ul li:hover {
width: 640px;
}
#tbi_slider li img {
display: block;
width: 640px;
}
#tbi_title {
position: absolute;
top: 0;
left: 0;
padding: 20px;
width: 640px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font: bold 16px 'trebuchet MS',
sans-serif;
}
#tbi_title a {
display: block;
color: #fff;
text-decoration: none;
}
/* Acordeon Post Slider By
Ayudadeblogger.com */
|
Y por último busca este código <div id='main-wrapper'>
si no existe ese código en tu plantilla,
podrás buscar este otro código type='Header'/> y inserta las siguientes líneas de código al
final de </div> </div>
<!-- Acordeon Post Slider By Ayudadeblogger.com
-->
<b:if cond='data:blog.url ==
data:blog.homepageUrl'>
<div id='tbi_slider'>
<ul>
<li>
<div id='tbi_title'>
<a
href='http://www.ecuador-turistico.com/'>Ecuador</a>
</div>
<a href='http://www.ecuador-turistico.com/'>
<img src='http://2.bp.blogspot.com/-YZG-RjdYycc/UWR9k0WtRjI/AAAAAAAACy4/L80MojVez7Y/s640/ayudadeblogger.JPG'/>
</a>
</li>
<li>
<div id='tbi_title'>
<a
href='http://www.ecuador-turistico.com/'>Turismo y
aventura en Ecuador</a>
</div>
<a href='http://www.ecuador-turistico.com/'>
<img src='http://1.bp.blogspot.com/-d1uMkjjP6dg/UWR9s9YXvmI/AAAAAAAACzA/LcC2BsklTwg/s640/ayudadeblogger.JPG'/>
</a>
</li>
<li>
<div id='tbi_title'>
<a
href='http://www.ecuador-turistico.com/'>Ecuador Turístico</a>
</div>
<a href='http://www.ecuador-turistico.com/'>
<img src='http://1.bp.blogspot.com/-hEimTuBS7rc/UWR91sF5bCI/AAAAAAAACzI/-hYhvdfqfZ4/s640/ayudadeblogger.JPG'/>
</a>
</li>
<li>
<div id='tbi_title'>
<a
href='http://www.ecuador-turistico.com/'>Playas de Ecuador</a>
</div>
<a href='http://www.ecuador-turistico.com/'>
<img src='http://1.bp.blogspot.com/-Hxgu-10GBNw/UWR-AgfainI/AAAAAAAACzQ/Jp3EVEtgAR8/s640/ayudadeblogger.JPG'/>
</a>
</li>
<li>
<div id='tbi_title'>
<a
href='http://www.ecuador-turistico.com/'>Atractivos
Turísticos de Ecuador</a>
</div>
<a href='http://www.ecuador-turistico.com/'>
<img src='http://2.bp.blogspot.com/-9LQHuu4N6Yk/UWR-JKlth8I/AAAAAAAACzY/o0WbsbONOTQ/s640/ayudadeblogger.JPG'/>
</a>
</li>
</ul>
</div>
</b:if>
<!-- Acordeon Post Slider By Ayudadeblogger.com
-->
|
Realiza estos cambios:
Los links que están marcados de color
azul deberás borrarlos y poner ahí los links pertenecientes de la paginas de tu
blog que quieras mostrar
Las letras que están marcadas de color
rojo, deberás cambiarlas por el nombre que tu quieras mostrar en tu galería.
Al igual que los links que están marcados
de color verde, deberás borrarlos y poner ahí los links pertenecientes de las imágenes
que quieras mostrar en cada uno de ellos.
Ahora si dale un clic en “Guardar plantilla”
y disfruta de este nuevo widget de imágenes en acordeón.
Te voy a dejar un ejemplo de lo que
explique en como cambiar los links:
Por ejemplo este código:
<a
href='http://www.ecuador-turistico.com/'>Ecuador</a>
</div>
<a href='http://www.ecuador-turistico.com/'>
<img src='http://2.bp.blogspot.com/-YZG-RjdYycc/UWR9k0WtRjI/AAAAAAAACy4/L80MojVez7Y/s640/ayudadeblogger.JPG'/>
|
Tenemos dos links de color azul, el
primer link de color azul deberás cambiarlo por el link de la pagina que
quieras mostrar, al igual a lado del link tenemos el nombre de “Ecuador”, que
esta marcado de color rojo, ese es el titulo de la pagina que vas a mostrar en
esta galería. Mas abajo encontramos otro link que esta marcado de color azul, deberás
poner el mismo link que pusiste en el primero, este sirve para que cuando le
den un clic en la imagen se vaya a la pagina que quieras mostrar de tu blog, y
el ultimo link esta marcado de color verde, este sirve para mostrar la imagen
en nuestra galería de imágenes, tendrás que copiar todo el link perteneciente
de tu imagen que quieras mostrar en tu galería de imágenes, eso debes
realizarlo en todas.
¿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
Este comentario ha sido eliminado por el autor.
ResponderEliminarHola, una pregunta como hago para colocarlo en una entrada? gracias!
ResponderEliminarhola, no es posible utilizarlo en una entrada, y en tu codigo html de ley tienes el amin wrapper o el type header. Otra cosa si quieres utilizar un slideshow en tu entrada te recominedo este slider que se encuentra en el siguiente enlace.
Eliminarhttp://www.ayudadeblogger.com/2012/07/como-crear-una-galeria-de-imagenes-para.html
Saludos.
Aca te dejo el link con el codigo del que es automatico,pero no se que parte sacar de ahi para ahcerlo automatico y cambiar los tiempos
Eliminarhttp://devsmash.com/projects/kwicks/examples/slideshow
Muchas gracias, lo vi ese que me enviaste,pero queria poner algo mas lindo y no se como editar cada parte del html :S...
ResponderEliminarsi ya lo probe,mil gracias, esta buenisimo,pero mira te paso estos links porque yo buscaba algo mas parecido a esto, el tema es que me es imposible colocarlo y no se porque, las imagenes me quedan una al lado de la otra en lugar de quedar como deberia( el tuyo me queda bien,pero buscaba algo mas parecido a estos que te paso)
ResponderEliminarhttp://www.oloblogger.com/2012/12/paneles-deslizantes-jquery-kwicks.html?showComment=1367256256377#c3732743129581938879
Disculpa que pregunto mucho,pero en la facu me piden un blog y es parte de toda la entrega anual...mil disculpas y mil gracias por tu ayuda y rapida respuestas.
tambien me gustariaque sea automatico el slide..
Hola a mi no me salen ninguno de los dos códigos como lo hago?
ResponderEliminarHola, todas la splantillas de blogger tienen cualquiera de los dos codigos que puese en este post,. Buscalo con tranquilidad..
EliminarSaludos.
hola que tal, como hago para que quede en vertcal?
ResponderEliminarno se porque no salen unidas las imagenes me las tira por individual
ResponderEliminarHola enviame la direccion de tu blog para poder ver donde puede estar el error.
EliminarSaludos.
Hola Luis, enhorabuena por tu blog, es de los mejores que he visto para ayudar a crear un blog! Yo estoy intentando poco a poco crear el mío, y he creado unas páginas que se muestran como principales porque quiero hacer de una de ellas la portada. Me gustaría agregar un slideshow acordeón...el que has puesto aquí es para añadir a la plantilla html principal, pero como podría ponerlo en una página o widget??
ResponderEliminarHola, es muy buena tu pregunta, en mis proximas publicaciones dare a conocer este truco, miestras tanto mantente atenta a mis nuevas actualizaciones.
EliminarSaludos
Hola Luis
ResponderEliminarUna herramienta muy bonita quiero ponerla pero he estado buscando por toda la plantilla y no encuentro este codigo ]]> que me dices, no se si puede ser algún tipo de codigo similar.
Muchas gracias
hola , todo me salio ok. gracias solo una pregunta las imagen me sale de mala calidad. uso picasa.
ResponderEliminarhttp://junte2014.blogspot.com/ este es mi blog de ensayo.. del anterior comentario ,, mala calidad de imagenes..??? soy david
ResponderEliminarHola, el problema es que estas utilizando imagenes muy pequeñas desde picasa, he visto tu blog, carga las imagenes desde tu cuenta de blogger, Saludos..
EliminarHola, realize el proceso pero no aparecio nada,
ResponderEliminarque debe hacer?
Algo estas heciendo mal, este truco funciona perfectamente.
EliminarSaludos
Logré insertar el acordeón. Pero cuando cliqueo en una de las imágenes, el acordeón no se mantiene fijo en el cabecero. Desaparece. Solo está visible en "inicio"
ResponderEliminar¿A qué se debe? No te dejo el enlace porque lo retiré.
no me sale
ResponderEliminarej
titulo
imagen
titulo
imagen