TOOLBOXBLOG: SLIDESHOW ACORDEÓN 1X5

SLIDESHOW » WIDGET SLIDER GALERÍA DE IMÁGENES ACORDEÓN PARA BLOGGER

http://www.ayudadeblogger.com/2013/04/widget-slider-galaria-de-imagenes-acordeon-para-blogger.html

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.

Widget Slider galería de imágenes acordeón para blogger

Busca este código ]]></b:skin> (no siempre aparece a primera vista, en ese caso hay que buscar abriendo los códigos cerrados, es decir clikando sobre los triangulitos que aparecen en la izquierda de algunas linea), y arriba de el inserta las siguientes líneas de código

#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;

}

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'/> e inserta las siguientes líneas de código al final de </div> </div>

Para que aparezca debajo de la cabecera del blog se pone Detrás de esto: <b:include name='quickedit'/> </div></b:includable> </b:widget> </b:section>
</div> </div

Copiar este contenido a continuación:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<ul>

<li>

<a href='http://www.ecuador-turistico.com/'>Ecuador</a>

</div>

</a>

</li>

<li>

<a href='http://www.ecuador-turistico.com/'>Turismo y aventura en Ecuador</a>

</div>

</a>

</li>

<li>

<a href='http://www.ecuador-turistico.com/'>Ecuador Turístico</a>

</div>

</a>

</li>

<li>

<a href='http://www.ecuador-turistico.com/'>Playas de Ecuador</a>

</div>

</a>

</li>

<li>

<a href='http://www.ecuador-turistico.com/'>Atractivos Turísticos de Ecuador</a>

</div>

</a>

</li>

</ul>

</div>

</b:if>

Realizar 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.

-------

Si se quiere poner en la cabecera se debe insertar el mismo contenido pero detrás de;

buscar este otro código type='Header'/> y inserta las siguientes líneas de código al final de </div> </div>

También se puede insertar este último código directamente en el html de la pagina concreta.

así es como queda:
galería de fotos en acordeón

CORRECCIONES EN CASO DE QUE EL BLOG TENGA PAGINAS REDIRECCIONADAS.Este código se ejecuta por defecto en la pagina principal de entradas porque el código lleva un condicionante en el que se señala que solo aparecerá en esa pagina. Por lo tanto, con la redirección ya no sale. Para que se pueda ver en blogs con la pagina principal redireccionada hay que eliminar el condicionante que aparece en la primera linea del segundo código

<b:if cond='data:blog.url == data:blog.homepageUrl'>y también hay que eliminar el cierre del condicionante que está al final del código
</b:if>

Al eliminar este condicionante el widget acordeón saldrá en todo el blog.

Pero si solo queremos que aparezca este widget en una pagina concreta, hay que sustituir la primera linea de código <b:if cond='data:blog.url == data:blog.homepageUrl'>, por la siguiente:

<b:if cond='data:blog.pageName == "INICIO"'>

Y sustituir la frase que está en rojo por el nombre que le hemos puesto a la pagina en nuestro blog, el nombre de la pagina donde queremos que aparezca el slider (en mi caso se llamaba INICIO)
(recordar que al final del resto del código se haya quedado cerrado con </b:if>, (y en el caso que lo hayamos suprimido ahora hay que volver a ponerlo ya que es lo que cierra el condicionante)
A continuación pongo el código completo con la modificación para que salga solo en la pagina concreta:

<b:if cond='data:blog.pageName == "INICIO"'>

<ul>

<li>

<a href='http://www.ecuador-turistico.com/'>Ecuador</a>

</div>

</a>

</li>

<li>

<a href='http://www.ecuador-turistico.com/'>Turismo y aventura en Ecuador</a>

</div>

</a>

</li>

<li>

<a href='http://www.ecuador-turistico.com/'>Ecuador Turístico</a>

</div>

</a>

</li>

<li>

<a href='http://www.ecuador-turistico.com/'>Playas de Ecuador</a>

</div>

</a>

</li>

<li>

<a href='http://www.ecuador-turistico.com/'>Atractivos Turísticos de Ecuador</a>

</div>

</a>

</li>

</ul>

</div>

</b:if>

Pero recuerda realizar los cambios pertinentes.

Enlaces de ayuda:

http://vagabundia.blogspot.com/2009/04/los-codigos-condicionales.html

http://ciudadblogger.com/2010/03/condicionales-de-blogger.html

Páginas

martes, 4 de noviembre de 2014

SLIDESHOW ACORDEÓN 1X5

No hay comentarios:

Publicar un comentario

flecha