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
21 comentarios: