Home Slider Carrusel Tutorial como insertar un slider carrusel en blogger

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

1 Slider Carrusel para blogger V1
2 Slider Carrusel para blogger V2
3 Slider Carrusel para blogger V3

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo_Ne9RaFdhX1zc-wOkDrtGjuQtquwfciIuBLTuuIZuvvUgPlW-npFGDnR7NhwmdMHwJtno4h9BO9BiJC_koHl5RPHqpn32OxyY_QhAbjkGIXIeNS70bDV96EKf3SITYdt8DBgk5XE7NM/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibyd2ZLV9peLu6hE3urMCYvVOjLQIpClkRbSvxrp0Dqlq_leOrHcZ3FejF8bHSOGE5Rb6gQ9uOpQw0BF22dg4bOrhPlzCb8CvRp7e-8gu3dO3szXjkQ4_ZfOxUy4pobIw-H0Y4cfSsuLQr/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/AVvXsEgF4lUBVqbV0PhyDlJKWMVIdcKxrYmaqX45qToFZrql8RkTjJHX6ZRjcZvev_HKQM9UVrakx8WfKFg1w5d25XfRYHfZN1P-7avmJu5HEBhUbvanHT2rxB_FMHQbjIwDe98kaogYCWtcr1oE/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/AVvXsEhP9RfecMP5KZnY7x902yUNSHYVjbe3KRtE6Y7t552BURSvYZ-hnCz1w-GVCrsUJsKsQYESAcqVGTzGJImVaWyuqT0V9XBJyalt8vXls9v-iqDJvSWsGftIEsWKEyeNJECQoLlGhvR9oqWp/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/AVvXsEh_-9YAH36rYd6j98HjNFGBOFTdhaq8b7GQBDTrkAxItGlDIA8mHTfBGg7oVz9tTgPhpPyTXL_MobifLmuTGAuU9sOSixMhbpQ-0rw9D7SBofuJuJEKEM3XOXSUdm6L8k37bGXNOlK_zbW_/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/AVvXsEjw_yuvbUF_rBW-68AXf9UNUVl2_qF8La0R6A4ChOyvHVLNFzu1F2BnrvTbX_ZQeAgQvYD2MKdiE7R3VqyKvvW2Dn9aDNVhX1RhUQayKL2Zy6OR859duwi5OB1zFkENwe0o35kcqJ2H2n5B/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/AVvXsEjXxe-Se0WaSZJ3P_yAB7y1YKSuqyl3-rrqQfTNk5e0SRcpKXgPjuKil4pDrNxWm9AKQAIrDMF6Tbig4CjXHmd-8tVgjRNDu-zfLCezT1wpdIik2gXHCSm73DjBtPcxdrgrWPIS6-snw8bn/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/AVvXsEgc9Agg48JEahyFP10W-7yo1OxtYHKplQogbepZ3Ll1YXdHjg0SrLnftF3d9OxqqChV0A8sVzVEUuNNQZC_LQOLPu7nQ_e_4WHFUIC5Ko3ikD0ibP_1OolElDbiTEwSXHh541nNTKpzi1vv/s1600/ayudadeblogger+6.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/AVvXsEh_-9YAH36rYd6j98HjNFGBOFTdhaq8b7GQBDTrkAxItGlDIA8mHTfBGg7oVz9tTgPhpPyTXL_MobifLmuTGAuU9sOSixMhbpQ-0rw9D7SBofuJuJEKEM3XOXSUdm6L8k37bGXNOlK_zbW_/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/AVvXsEibyd2ZLV9peLu6hE3urMCYvVOjLQIpClkRbSvxrp0Dqlq_leOrHcZ3FejF8bHSOGE5Rb6gQ9uOpQw0BF22dg4bOrhPlzCb8CvRp7e-8gu3dO3szXjkQ4_ZfOxUy4pobIw-H0Y4cfSsuLQr/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/AVvXsEgF4lUBVqbV0PhyDlJKWMVIdcKxrYmaqX45qToFZrql8RkTjJHX6ZRjcZvev_HKQM9UVrakx8WfKFg1w5d25XfRYHfZN1P-7avmJu5HEBhUbvanHT2rxB_FMHQbjIwDe98kaogYCWtcr1oE/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/AVvXsEibyd2ZLV9peLu6hE3urMCYvVOjLQIpClkRbSvxrp0Dqlq_leOrHcZ3FejF8bHSOGE5Rb6gQ9uOpQw0BF22dg4bOrhPlzCb8CvRp7e-8gu3dO3szXjkQ4_ZfOxUy4pobIw-H0Y4cfSsuLQr/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/AVvXsEgF4lUBVqbV0PhyDlJKWMVIdcKxrYmaqX45qToFZrql8RkTjJHX6ZRjcZvev_HKQM9UVrakx8WfKFg1w5d25XfRYHfZN1P-7avmJu5HEBhUbvanHT2rxB_FMHQbjIwDe98kaogYCWtcr1oE/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

TAGS:


Share:

Related post

Comentarios

2 comentarios: