TOOLBOXBLOG: Tutorial de Slideshow

Tutorial de Slideshow para Blogger

http://www.ayudadeblogger.com/2013/11/tutorial-de-slideshow-para-blogger.html

(NOTA: no lo he probado todavía)

En este nuevo tutorial de Slideshow para Blogger aprenderán a instalar un código en un solo widget, con el cual les mostrara un fantástico Slideshow en su blog de Blogger. Los Slideshow se los utiliza para mostrar lo mejor de nuestras categorías que estemos promocionando y así los nuevos usuarios que visitan su blog lleguen a conocer sus novedades. Lo que van a realizar es copiar un código he insertarlo en un widget, realizar algunos cambios en las imágenes, luego guardarlo y ubicarlo debajo de la cabecera principal de su blog, y si solo quieren que se muestre este Slideshow en su página principal y no en las entradas de su blog, pueden seguir el siguiente enlace en el cual se explica cómo realizar este truco. Como ocultar widgets página principal y en las entradas. Este nuevo Slideshow funciona perfectamente en todos los navegadores web como Firefox, Google Chrome, Internet Explorer etc. La facilidad con la que van a instalar este Slideshow en su blog de Blogger es tan simple y lo vamos a realizar en este tutorial para Blogger.

A continuación mire su demostración en mi blog de demos

1 Ir a Blogger

2 Un clic en “Diseño”

3 Abre un gadget “Añadir un gadget”

4 Busca el widget que dice “HTML/Javascript” ábrelo

5 Ingresa las siguientes líneas de código en su interior

#sliderFrame {position:relative;width:930px;margin: 0 auto 40px;}

#slider {

width:930px;height:360px;/* Si se modifica el tamaño del slider, también tendrán que modificar el tamaño de las imágenes */

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_3S10NEZNCAnBIMJh2b-fGQji7afW4Uh8iUeQKP0tA77VzVxWzE6Kh5wvjfX7B71xAzBVukKyGs3NcdVJvzSbhIo14vgMRxBjxas9EumOFiYI9ucxQ1n4Ays3JqEFbeKC_EApkDWk7esN/s1600/loading.gif) no-repeat 50% 50%;

position:relative;

margin:0 auto;/*centrado de la imagen slider center-aligned */

box-shadow: 0px 1px 5px #999999;

}

#slider img {

position:absolute;

border:none;

display:none;

}

/* the link style (if an image is wrapped in a link) */

#slider a.imgLink {

z-index:2;

display:none;position:absolute;

top:0px;left:0px;border:0;padding:0;margin:0;

width:100%;height:100%;

}

/* Estilos Caption */

div.mc-caption-bg, div.mc-caption-bg2 {

position:absolute;

width:100%;

height:auto;

padding:0;

left:0px;

bottom:15px;

z-index:3;

overflow:hidden;

font-size: 0;

}

div.mc-caption-bg {

background-color:black;

}

div.mc-caption {

font: bold 14px/20px Arial;

color:#EEE;

z-index:4;

padding:10px 0;

text-align:center;

}

div.mc-caption a {

color:#FB0;

}

div.mc-caption a:hover {

color:#DA0;

}

/* ------Centrado ubicación de puestos------*/

div.navBulletsWrapper {

top:360px; left:400px; /* Este punto es la posición relativa del #slider */

width:150px;

background:none;

padding-left:20px;

position:relative;

z-index:5;

cursor:pointer;

}

/* Realizador bullet */

div.navBulletsWrapper div

{

width:11px; height:11px;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ7ehkyuD8fI_HBmzCFOAZpJS33mehchVpX9D5ogpo7QZSjYtEjSAHnror-3MPFo1RovRzI5wakVR7WMwxIkxjjT7TqV-HOQmrQ33lRBFHlcB0jFm7KvnEh3gc_3CdI-Pj6hYr0MSytBBP/s1600/bullet.png) no-repeat 0 0;

float:left;overflow:hidden;vertical-align:middle;cursor:pointer;

margin-right:11px;/* distance between each bullet*/

_position:relative;/*IE6 hack*/

}

div.navBulletsWrapper div.active {background-position:0 -11px;}

.intro {

bottom: 0;

color: rgba(0, 0, 0, 0.2);

font-size: 16px;

position: absolute;

right: 0;

text-decoration: none;

z-index: 99999;

}

/* --------- Start jQuery y Agregar URLs imágenes, URLs de páginas, descripción------- */

#slider

{

transform: translate3d(0,0,0);

-ms-transform:translate3d(0,0,0);

-moz-transform:translate3d(0,0,0);

-o-transform:translate3d(0,0,0);

}

</style>

</div>

El poder de Blogger <a href="http://ayudadeblogger.com/" target="_blank">Ayudadeblogger.com</a>

</div>

<a href="http://www.ayudadeblogger.com/" target="_blank">Widgets</a> <a href="http://www.ayudadeblogger.com/" target="_blank">Plantillas</a> Gratis.

</div>

Realiza estos cambios:

He marcado de tres diferentes colores en los lugares que ustedes tendrán que realizar sus diferentes cambios

Cambia las URls que están marcadas de color rojo, estas son las responsables de mostrar las imágenes en el Slideshow. Les recuerdo que las imágenes que vayan a mostrar en el Slideshow deben tener una dimensión de 940x360 pixeles, así que deberán colocar de ese tamaño.

Para poner las direcciones URLs de sus artículos es donde dice “AQUÍ LA URL DEL ARTICULO” como también debes borrar las URLs que están marcadas de color azul http://ayudadeblogger.com/.

Y por último, la pequeña descripción que se mostrara en su Slideshow son las palabras que están marcadas de color verde, bórralas y pon ahí la descripción que tú quieras.

Eso es todo, es momento de dar un clic en “Guardar” y ubícalo debajo de la cabecera principal de tu blog

Nota: Si quieres reducir el tamaño del Slideshow, solo tienes que cambiar en los números que están marcados de color amarillo, además al reducir el tamaño, también tendrán que reducir el tamaño de las imágenes.

Páginas

martes, 4 de noviembre de 2014

Tutorial de Slideshow

Tutorial de Slideshow para Blogger

No hay comentarios:

Publicar un comentario

flecha