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.
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
<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
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
ResponderEliminarHola: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/
ResponderEliminarEn espera de su contestación reciba un cordial saludo