Tutorial como insertar un slider carrusel en blogger


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.

Tutorial como insertar un slider carrusel en blogger

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

Tutorial como insertar un slider carrusel en blogger

3 Abre un gadget “Añadir un gadget

Tutorial como insertar un slider carrusel en blogger

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

Tutorial como insertar un slider carrusel en blogger

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

<style type="text/css">
.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(http://3.bp.blogspot.com/-LR5R109Y1N4/UmlKLC0MfWI/AAAAAAAAFPY/Q5ObVbp_NLM/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>
<script type="text/javascript" src="http://yourjavascript.com/00203331010/flexslider-carousel.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/10203431330/jquery-flexslider-min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){         
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 0,
    minItems: 1,
    maxItems: 4
  });
});
});
</script>
<div class="flexslider">
  <ul class="slides">
    <li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="http://1.bp.blogspot.com/-fP2XucWabZQ/UhTMWvL3O3I/AAAAAAAAEVQ/YE6Oa-y20L8/s1600/ayudadeblogger+1.JPG" /><br />La descripción del texto aqui</a>
    </li>
    <li>

<a href="AQUÍ LA DIRECCION URL"><img alt="" src="http://1.bp.blogspot.com/-uYhhU8YTfCo/UhTMet9luBI/AAAAAAAAEVg/tyHvoIh2S4U/s1600/ayudadeblogger+2.JPG" /><br />La descripción del texto aqui</a>
    </li>
    <li>
      <a href="AQUÍ LA DIRECCION URL"><img alt="" src="http://1.bp.blogspot.com/-MF1L_XqY1HI/UhTMlDHO4sI/AAAAAAAAEVw/EYwHNEeWwgE/s1600/ayudadeblogger+3.JPG" /><br />La descripción del texto aqui</a>
    </li>
    <li>
      <a href="AQUÍ LA DIRECCION URL"><img alt="" src="http://1.bp.blogspot.com/-Doc6QS5kjXM/UhTM-PfEJxI/AAAAAAAAEWw/KYOL52ivhpM/s1600/ayudadeblogger+7.JPG" /><br />La descripción del texto aqui</a>
    </li>
    <li>
      <a href="AQUÍ LA DIRECCION URL"><img alt="" src="http://4.bp.blogspot.com/-t-HqZoFZFIg/UhTMrYjlnKI/AAAAAAAAEWA/H2aK2CP7IRQ/s1600/ayudadeblogger+4.JPG" /><br />La descripción del texto aqui</a>
    </li>
    <li>
      <a href="AQUÍ LA DIRECCION URL"><img alt="" src="http://3.bp.blogspot.com/-xgACiiveBS8/UhTMzPnMm0I/AAAAAAAAEWQ/x4924ZDmmY8/s1600/ayudadeblogger+5.JPG" /><br />La descripción del texto aqui</a>
    </li>
    <li>
      <a href="AQUÍ LA DIRECCION URL"><img alt="" src="http://2.bp.blogspot.com/-eWPDONn3OZY/UhTM4jrvj7I/AAAAAAAAEWg/A-utGhWNvKo/s1600/ayudadeblogger+6.JPG" /><br />La descripción del texto aqui</a>
    </li>
    <li>
      <a href="AQUÍ LA DIRECCION URL"><img alt="" src="http://1.bp.blogspot.com/-Doc6QS5kjXM/UhTM-PfEJxI/AAAAAAAAEWw/KYOL52ivhpM/s1600/ayudadeblogger+7.JPG" /><br />La descripción del texto aqui</a>
    </li>
    <li>
      <a href="AQUÍ LA DIRECCION URL"><img alt="" src="http://1.bp.blogspot.com/-fP2XucWabZQ/UhTMWvL3O3I/AAAAAAAAEVQ/YE6Oa-y20L8/s1600/ayudadeblogger+1.JPG" /><br />La descripción del texto aqui</a>
    </li>
    <li>
      <a href=" AQUÍ LA DIRECCION URL"><img alt="" src="http://1.bp.blogspot.com/-uYhhU8YTfCo/UhTMet9luBI/AAAAAAAAEVg/tyHvoIh2S4U/s1600/ayudadeblogger+2.JPG" /><br />La descripción del texto aqui</a>
    </li>
    <li>
      <a href=" AQUÍ LA DIRECCION URL "><img alt="" src="http://1.bp.blogspot.com/-fP2XucWabZQ/UhTMWvL3O3I/AAAAAAAAEVQ/YE6Oa-y20L8/s1600/ayudadeblogger+1.JPG" /><br />La descripción del texto aqui</a>
    </li>
    <li>
      <a href="AQUÍ LA DIRECCION URL"><img alt="" src="http://1.bp.blogspot.com/-uYhhU8YTfCo/UhTMet9luBI/AAAAAAAAEVg/tyHvoIh2S4U/s1600/ayudadeblogger+2.JPG" /><br />La descripción del texto aqui</a>
    </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.

Felicidades has realizado un buen trabajo

Fácil verdad!

Recuerda suscribirte para que recibas mis nuevas actualizaciones directamente en tu correo electrónico.

¿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
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

2 comentarios:

  1. Lo implementé en mi blog de pruebas y queda espectacular!!! Pero al implementarlo en mi blog, solo sale una linea blanca. A que puede ser debido? Muchas gracias

    ResponderEliminar
  2. Hola:Lo he probado en mi blog de pruebas y queda fantástico!!! Pero al implementarlo en mi blog real solo sale una linea blanca.Sería tan amable de decirme a que puede ser debido? Puede verlo en este enlace: http://localizarecursos.blogspot.com.es/
    En espera de su contestación reciba un cordial saludo

    ResponderEliminar