TOOLBOXBLOG: Slider carrusel

Tutorial como insertar un slider carrusel en blogger

http://www.ayudadeblogger.com/2013/10/tutorial-como-insertar-un-slider-carrusel-en-blogger.html

NOTA: Aún no lo he probado

Tutorial para blogger, como insertar un slider carrusel en blogger simples pasos? Es la pregunta que todo mundo hace en google, bueno para concretar esta respuesta, voy a explicar con un simple código como realizar este grandioso truco para blogger y así poderlo implementar en nuestro blog de blogger. Los slider carrusel sirven para mostrar nuestras categorías que queremos dar a conocer a nuestros usuarios que visitan nuestro blog de blogger y así promocionar nuestros post. Lo que vamos hacer es insertar un simple código en un widget y realizar algunos cambios, en las imágenes en las URLs que se dirigirán hacia los post que quieran mostrar. Las imágenes que vayan a insertar en el slider carrusel tienen que tener la misma dimensión, por ejemplo, todas las imágenes tienen que tener el mismo tamaño como 400x300 o 300x200 etc. Si los tamaños de las imágenes no son iguales no se mostrara correctamente el slider carrusel, así que primero deberán asegurarse de que sus imágenes tengan la misma dimensión.

Anteriormente publique algunos Slider Carrusel para blogger, de los cuales les dejo los enlaces

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

Les gusto verdad!

Vamos a trabajar

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

.flex-container a:active,

.flexslider a:active,

.flex-container a:focus,

.flexslider a:focus{

outline:none;

}

.slides,

.flex-control-nav,

.flex-direction-nav{

margin:0;

padding:0;

list-style:none;

}

/* FlexSlider Stilos****/

.flexslider{

margin:0;

padding:0;

}

.flexslider .slides > li{

display:none;

-webkit-backface-visibility:hidden;

-moz-backface-visibility:hidden;

-ms-backface-visibility:hidden;

-o-backface-visibility:hidden;

backface-visibility:hidden;

}

/* Hide the slides before the JS is loaded. Avoids image jumping */

.flexslider .slides img{

width:100%;

display:block;

}

.flex-pauseplay span{

text-transform:capitalize;

}

/* Clearfix for the .slides element */

.flexslider a.intro {

bottom:0;

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

font-size:14px;

position:absolute;

right:0;

text-decoration:none;

z-index:99999;

}

.slides:after{

content:".";

display:block;

clear:both;

visibility:hidden;

line-height:0;

height:0;

}

html[xmlns] .slides{

display:block;

}

* html .slides{

height:1%;

}

/* No JavaScript Fallback */

/* If you are not using another script, such as Modernizr, make sure you

* include js that eliminates this class on page load */

.no-js .slides > li:first-child{

display:block;

}

/* FlexSlider Default Theme ******/

.flexslider{

margin:0 0 60px;

background:#fff;

border:4px solid #fff;

position:relative;

-webkit-border-radius:4px;

-moz-border-radius:4px;

border-radius:4px;

-webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);

-moz-box-shadow:0 1px 4px rgba(0,0,0,.2);

box-shadow:0 1px 4px rgba(0,0,0,.2);

zoom:1;

}

.flex-viewport{

max-height:2000px;

-webkit-transition:all 1s ease;

-moz-transition:all 1s ease;

-o-transition:all 1s ease;

transition:all 1s ease;

}

.loading .flex-viewport{

max-height:300px;

}

.flexslider .slides{

zoom:1;

}

.carousel li{

margin-right:5px;

}

/* Direction Nav */

.flexslider li {

border: 0 none !important;

padding: 0 !important;

text-indent: 0 !important;

}

.flex-direction-nav a{

width:30px;

height:30px;

margin:-20px 0 0;

display:block;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaf7mfF0e-B9_SOVHOAku_GkqtRoG5-SHmLpoEV7DtmTZ8wNXnc25ymGRsjJ4CAdY6uj9v4garUmbYKNaMvkpvN-ajljl9yqTzfUwH3cJUKApV8T-MZ8zKO1nFvqfKKUKHrXxVWj9aC64/s1600/ayudadeblogger.PNG) no-repeat 0 0;

position:absolute;

top:50%;

cursor:pointer;

text-indent:-9999px;

opacity:0;

-webkit-transition:all .3s ease;

-moz-transition:all .3s ease;

-o-transition:all .3s ease;

transition:all .3s ease;

}

.flex-direction-nav .flex-next{

background-position:100% 0;

right:-36px;

}

.flex-direction-nav .flex-prev{

left:-36px;

}

.flexslider:hover .flex-next{

opacity:0.8;

right:5px;

}

.flexslider:hover .flex-prev{

opacity:0.8;

left:5px;

}

.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{

opacity:1;

}

.flex-direction-nav .disabled{

opacity:.3!important;

filter:alpha(opacity=30);

cursor:default;

}

/* Control Nav */

.flex-control-nav{

width:100%;

position:absolute;

bottom:-40px;

text-align:center;

}

.flex-control-nav li{

margin:0 6px;

display:inline-block;

zoom:1;

*display:inline;

}

.flex-control-paging li a{

width:11px;

height:11px;

display:block;

background:#666;

background:rgba(0,0,0,0.5);

cursor:pointer;

text-indent:-9999px;

-webkit-border-radius:20px;

-moz-border-radius:20px;

border-radius:20px;

-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);

-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);

box-shadow:inset 0 0 3px rgba(0,0,0,0.3);

}

.flex-control-paging li a:hover{

background:#333;

background:rgba(0,0,0,0.7);

}

.flex-control-paging li a.flex-active{

background:#000;

background:rgba(0,0,0,0.9);

cursor:default;

}

.flex-control-thumbs{

margin:5px 0 0;

position:static;

overflow:hidden;

}

.flex-control-thumbs li{

width:25%;

float:left;

margin:0;

}

.flex-control-thumbs img{

width:100%;

display:block;

opacity:.7;

cursor:pointer;

}

.flex-control-thumbs img:hover{

opacity:1;

}

.flex-control-thumbs .active{

opacity:1;

cursor:default;

}

</style>

$(document).ready(function(){

$(window).load(function() {

$('.flexslider').flexslider({

animation: "slide",

animationLoop: false,

itemWidth: 210,

itemMargin: 0,

minItems: 1,

maxItems: 4

});

</script>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9JdqC8hwL8vhTRrau_LAyyT2I8NiAtw-KzNCl9jzhWa6RCksjY-YijdVMnz9kWVeDWmcQJcOSEPtZ4LlNv8Qymi1rcJTmHdbFJqOEbUjIL0CRDP_Gq1ivJg_Vm0OKHSi47bJYodj3RxG0/s1600/ayudadeblogger+1.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgda-a1S_S9lgn0ue7lcL5FvTZZApQEIhG2JsSP7zvWERBo9zb_8tiRTHe-KShU7BDTm4aEIe1VlVXX9dVvu574hoq6ejbkAm-W-Khp1wQX3JKXtt8t4McgmoznWEWTDAUkA2bBZYCfk52w/s1600/ayudadeblogger+2.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaPfpwQW6AtI26fc31Rjfo0M2uA8y_AUiJQnwPAP_rWlUa7d3L4Xg6QFsv3rEEab0z_bWFOdzy1Wxa-SgHEyhuE_ZLN1SPyfymZs1d8Pdx6SVjqQU-i0dYIYl5AwrA8vaAmoLovnueyw_t/s1600/ayudadeblogger+3.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn-0W2fdBJN48TosV3HSDCkR0ChqoUCvSNki5W4V_aobmJo9ZEwrdZwQg_WCkae-NhVmHxJoAeBPv4GgD0bOYT-ZufTI2_KKZ3qo4-t3FT-vBOqpl3IIYRM2dnYI-L9PbBNkzktjBKjbfa/s1600/ayudadeblogger+7.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjxCarppRTklyPm2d5GGm7wfI1RyJxTGsNqcRoZHne7hKWXm4eSYQzwWQXKHtm3EOF6Yl7LWzuJ4vKYs2uHaeSDK8xi7GW0J46xRjPTxTW-VWxyxRXOpNQY10QmJ2IAksycEXpkHG1siTe/s1600/ayudadeblogger+4.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfyrEWMoDduj4e6afeI7zcS1Wq6jEupFy7q-0Y9GHAdSJHBapcbeiod6aLVrZ7O9SSW59VXEGvmUosLgKKh5Tca7BSh61zUZmBvJ2eB3SaPjyQysdy7HGcaBfq3tNaDdaAdQ9L4JM0tgkh/s1600/ayudadeblogger+5.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7au42m6lNVsqvE9w_qNSFgqZ86uqgAAR8mNANd-jiFifdZt7UcTN_5p-6_XXFjmJ6R4-wZHNsQH9cIdiZnH5QOgbcXdGV4atX91zs_UN4YPPD02a2we8D9mFT6l5AVelKoXPJPMks_Nhs/s1600/ayudadeblogger+6.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

</li>

<li>

</li>

<li>

<a href=" AQUÍ LA DIRECCION URL"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgda-a1S_S9lgn0ue7lcL5FvTZZApQEIhG2JsSP7zvWERBo9zb_8tiRTHe-KShU7BDTm4aEIe1VlVXX9dVvu574hoq6ejbkAm-W-Khp1wQX3JKXtt8t4McgmoznWEWTDAUkA2bBZYCfk52w/s1600/ayudadeblogger+2.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

<a href=" AQUÍ LA DIRECCION URL "><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9JdqC8hwL8vhTRrau_LAyyT2I8NiAtw-KzNCl9jzhWa6RCksjY-YijdVMnz9kWVeDWmcQJcOSEPtZ4LlNv8Qymi1rcJTmHdbFJqOEbUjIL0CRDP_Gq1ivJg_Vm0OKHSi47bJYodj3RxG0/s1600/ayudadeblogger+1.JPG" /><br />La descripción del texto aqui</a>

</li>

<li>

</li>

</ul>

</div>

Realiza estos cambios:

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

Cambia donde dice AQUÍ LA DIRECCION URL e inserta la dirección URL del post que quieras dar a conocer

Borra todas las URLs que están marcadas de color rojo, esas direcciones son las responsables de mostrar las imágenes en el slider carrusel, recuerda insertar la URL de la imagen y que tengan todas las mismas dimensiones.

Borra donde dice La descripción del texto aqui e ingresa el título del post que quieras dar a conocer en el slider carrusel

Eso es todo, ahora dale un clic en “Guardar” y ubica tu nuevo Slider Carrusel debajo de la cabecera principal de tu blog de blogger.

Páginas

martes, 4 de noviembre de 2014

Slider carrusel

Tutorial como insertar un slider carrusel en blogger

No hay comentarios:

Publicar un comentario

flecha