add

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

emailEnviar por correo

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

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (11) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios