Slider Carrusel para Blogger Video Tutorial
En la plataforma de Blogger.com pueden insertar una infinidad de widgets, gadgets, trucos Blogger, plugins, etc. Solo es cuestión de saber cómo hacerlo bien.
Para ello he creado este Video tutorial de Blogger, para los usuarios que les gusta tener un blog elegante y sobre todo creativo
¿Cómo funciona?
El slider carrusel, lo podrán ingresar justo abajo del título de su blog de Blogger o después del menú principal de su blog, o donde usted quiera mostrarlo, siempre y cuando tenga un widget 100 %. El slider carrusel se acoplara al tamaño del widget.
Las imágenes que se muestran en el slider carrusel, se las ingresa de forma manual, como también las direcciones URLs de los post que quieran dar a conocer.
Un truco de Blogger fácil de realizarlo
Pueden ver su demostración en la siguiente plantilla
Vamos a trabajar
1 Un clic en Diseño
2 Un clic en Añadir un gadget
3 Busca el widget HTML/Javascript, ábrelo
4 Ingresa las siguientes líneas de código en su interior
Realiza estos cambios:
Cambia las direcciones URLs que están marcadas de color azul, por las direcciones URLs de sus entradas
Cambia las direcciones URLs que están marcadas de color rojo, por las direcciones URLs de sus imágenes
Cambia las palabras que están marcadas de color verde, por una pequeña descripción de su imagen
Nota importante:
Tendrá que modificar las imágenes, debe ingresar imágenes del siguiente tamaño: 400x236px
5 Da un nombre a tu widget, por ejemplo: Slider
6 Un clic en Guardar
7 Ubica tu nuevo widget
10 Ingrese el siguiente código justo después del <head>
<script src='//code.jquery.com/jquery-1.11.3.min.js'/>
11 Busca el siguiente código
]]></b:skin>
Ingrese las siguientes líneas de código justo arriba del código que encontró
12 Busca el siguiente código
</head>
Ingrese el siguiente código justo arriba del código que encontró
13 Importante:
Ahora con cuidado vamos a buscar el widget en el cual habíamos ingresado el primer código, por ejemplo:
Les indique que le dieran un nombre a su widget
Mi widget se llama: Slider
Voy a buscarlo
Al dar con mi widget en el editor HTML de la plantilla me mostrara de la siguiente manera
Por ejemplo:
<b:section class='tabs' id='crosscolum' maxwidgets='1' name='Cross-Column' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='Slider' type='HTML' visible='true'>
Se debe cambiar el id, por ejemplo, el id de la plantilla que estoy utilizando se llama crosscolum, en su plantilla debe tener otro nombre, ese nombre lo deberé cambiar por: carousel, ahora me quedaría de la siguiente manera
<b:section class='tabs' id='carousel' maxwidgets='1' name='Cross-Column' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='Slider' type='HTML' visible='true'>
Para hacerlo más práctico, pueden seguir las instrucciones del Video tutorial que se encuentra en este tutorial
14 Es momento dar un clic en Guardar plantilla
Visite su blog y mire cómo funciona este nuevo Slider Carrusel para Blogger
¡Fácil verdad!
¿Necesitas ayuda?
Cualquier pregunta no duden en escribir
Para ello he creado este Video tutorial de Blogger, para los usuarios que les gusta tener un blog elegante y sobre todo creativo
¿Cómo funciona?
El slider carrusel, lo podrán ingresar justo abajo del título de su blog de Blogger o después del menú principal de su blog, o donde usted quiera mostrarlo, siempre y cuando tenga un widget 100 %. El slider carrusel se acoplara al tamaño del widget.
Las imágenes que se muestran en el slider carrusel, se las ingresa de forma manual, como también las direcciones URLs de los post que quieran dar a conocer.
Un truco de Blogger fácil de realizarlo
Pueden ver su demostración en la siguiente plantilla
Video Tutorial
Vamos a trabajar
1 Un clic en Diseño
2 Un clic en Añadir un gadget
3 Busca el widget HTML/Javascript, ábrelo
4 Ingresa las siguientes líneas de código en su interior
<div id='carousel_inner'>
<ul id='carousel_ul' style='left: -10.5vw;'>
<li><a
href="http://www.ayudadeblogger.com/"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpFqezNPTLbHg8dQleRfKGNitgUQHVznBm6u6MiCt7AHeybfX4E6-MUTK8XHFBZQXDZ-qJNCzoXupnIHk3zf6Iamf6L40O8JafvtG_dFs1yE6ucy_oiVA6kJbxS6Jx3aBx0d1Mzois2-0/s1600/1.png"
alt="Slider Carrusel para Blogger" /></a></li>
<li><a
href="http://www.ayudadeblogger.com/"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh1agXEWdI2WogIlVioPO7WSrHz_iqavY5tx3odgZgSfGOiEPTz8SRp3yYCYeGdpD-gL5vuyap3Rm5hK_yjdBbbUvciN3eZZUN1JyoPSOaElH9m-K0S_Kzc2jAq1am8xXb1BKGh0sD9zY/s1600/2.png"
alt="Slider Carrusel para Blogger" /></a></li>
<li><a
href="http://www.ayudadeblogger.com/"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2yEH0_FT6oEBOvpVuvHnS480hyeSwWSRqp2oJTr9xhETLTDlRHzCe82KJ-HTE4h8pSZLJH6fcUBWX47HgXPjuPN9v7Uzr7DRUVP9b4uy8DpkjsIyiIC1TI-p4j5eoFkjBukPnKJm9lTg/s1600/3.png"
alt="Slider Carrusel para Blogger" /></a></li>
<li><a
href="http://www.ayudadeblogger.com/"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC0yw8BwCMM4sn-NxumW6d-2a_ecx_O4DPmgTVKd9i3zCTHePuVOe0pX14SGr5An1RaY-E9tix4LTyMKsOPfWnTRohzS9cRtEdZk4hov8TSI-P1WU1HlMit7nuKWrdlAIP85MMs63wtp0/s1600/4.png"
alt="Slider Carrusel para Blogger" /></a></li>
<li><a href="http://www.ayudadeblogger.com/"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf0GFdbos-egAW5SiLWTJblScs6mNEaaKkWsS-YWQRXHoi8fdhw_ILADi8LanD5WJKqQB3SLw1uG1hNNKSAdmf8wdg4mPzdrWUQP4Aebs9TKm8p3oiudQamAKxOplS86GZu8uDxpyhvv8/s1600/5.png"
alt="Slider Carrusel para Blogger" /></a></li>
<li><a
href="http://www.ayudadeblogger.com/"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUxza8FqRqhfU9zWMPdXpbUq24i-8N0uh1pJW2bKnicFQzt18QCu4Qqhk2yLs8VI3h50_kDp9dCV8LccaK1dSvJkOhrY0ezf7m7WG-_xwR8JH5c_PQbgFdHFk1ZQE67FlZAYBhwYwR9AM/s1600/6.png"
alt="Slider Carrusel para Blogger" /></a></li>
<li><a
href="http://www.ayudadeblogger.com/"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmE9mn4xZoBKT9KK7MAcnGtnUPJ1Av8VraNJMM7uA96GD2xYTH5kv3qKDstJth6U8vf4clY-Zp8K6zzmOIsr7cKt_teY78aXJP1TMBZQzCvy46CAeOdBLAkpQmlcdJWoV0YIBvJnHJqMw/s1600/7.png"
alt="Slider Carrusel para Blogger" /></a></li>
<li><a
href="http://www.ayudadeblogger.com/"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8m7_IT2isxpYInuqgE9OhmjSoDfRrBbEpTHT4mI_YGUQHOALNE_88PXIIce1ZPLiY2INVLeBq4AVOao1eFx_Uy0C7KqS-BYbxlnAB-WYDaaOlO_WzphoL8BmbYI4QIkCygt-0ESVs-pE/s1600/8.png"
alt="Slider Carrusel para Blogger" /></a></li>
<li><a
href="http://www.ayudadeblogger.com/"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf0GFdbos-egAW5SiLWTJblScs6mNEaaKkWsS-YWQRXHoi8fdhw_ILADi8LanD5WJKqQB3SLw1uG1hNNKSAdmf8wdg4mPzdrWUQP4Aebs9TKm8p3oiudQamAKxOplS86GZu8uDxpyhvv8/s1600/5.png"
alt="Slider Carrusel para Blogger" /></a></li>
</ul>
<div class='' id='left_scroll'><a
href='javascript:slide("left");'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGcRGVobNZVpFyMBoL6ZMyqE2wIdfVvM5EesyDTOyAveO-dJppDDOr7xMrDRu_CZajlUwXTqbPRAawDEv9_aQ7G5PrT6r6_rG2h4ZFtR-LFzXNLQiuUAtuuRfpGkEQ23SRr_P-2Ew_wsc/s1600/ayudadeblogger-izquierda.png'/></a></div>
<div class='' id='right_scroll'><a
href='javascript:slide("right");'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvNyIBRVfzksDCH58a86LFDo55bkjfkOfM-jqUg5iKOWyYJKZolpZOwTGUFF_kfB0o21oqxzkAaFrpA5QbnMxZH-dzMEJJ-ga0k7EkDMrStYu_EMZtKTDaxi59b0MXqK29FLR9T_BPdLk/s1600/ayudadeblogger-derecha.png'/></a></div>
<input id='hidden_auto_slide_seconds' type='hidden'
value='8000'/>
</div>
<script asnyc='async'>
$(document).ready(function() {
$('#carousel_inner, #carousel_inner li, #left_scroll img,
#right_scroll img').hover(function(){
$('#left_scroll, #right_scroll').addClass('carousel-hover');
},
function(){
$('#left_scroll, #right_scroll').removeClass('carousel-hover');
});
});
</script>
|
Realiza estos cambios:
Cambia las direcciones URLs que están marcadas de color azul, por las direcciones URLs de sus entradas
Cambia las direcciones URLs que están marcadas de color rojo, por las direcciones URLs de sus imágenes
Cambia las palabras que están marcadas de color verde, por una pequeña descripción de su imagen
Nota importante:
Tendrá que modificar las imágenes, debe ingresar imágenes del siguiente tamaño: 400x236px
5 Da un nombre a tu widget, por ejemplo: Slider
6 Un clic en Guardar
7 Ubica tu nuevo widget
8 Un clic en “Plantilla”
9 Un clic en “Editar HTML”
Ahora se le abrirá el Editor HTML de su plantilla
En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.
10 Ingrese el siguiente código justo después del <head>
<script src='//code.jquery.com/jquery-1.11.3.min.js'/>
11 Busca el siguiente código
]]></b:skin>
Ingrese las siguientes líneas de código justo arriba del código que encontró
#carousel{border-bottom:1px
solid #E4E4E4}#carousel
a{display:block}#carousel_inner{width:100%;position:relative;overflow:hidden;background-color:#F7F7F7}#carousel
ul{position:relative;list-style-type:none;margin:0px;padding:0px;width:99999px;padding-bottom:0px;left:-10.5vw}#carousel
ul li{float:left;width:auto;padding:0px;height:100%;padding:0
.1vw;position:relative}#carousel_ul li:first-child{display:none}#carousel ul
li img{cursor:pointer;width:auto;height:180px;height:15.1vw;border:1px solid
#E4E4E4;border-top:0;pointer-events:none;display:block}#carousel ul
li:active{opacity:0.9}#left_scroll,#right_scroll{display:none}.carousel-hover{display:block
!important}#left_scroll img,#right_scroll
img{cursor:pointer;border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;background-color:rgba(255,
255, 255, 1);opacity:0.6}#left_scroll img:active,#right_scroll
img:active{opacity:0.5}#right_scroll
img{padding-left:3px;padding-top:2px;padding-bottom:2px;position:absolute;bottom:15px;right:15px;-webkit-user-drag:none}#left_scroll
img{padding-right:3px;padding-bottom:2px;position:absolute;bottom:15px;left:15px;-webkit-user-drag:none}.post-body{margin:0
3%}.post-title{padding:6px 3% 0 3%}#carousel .widget{margin:0}
|
12 Busca el siguiente código
</head>
Ingrese el siguiente código justo arriba del código que encontró
<script
asnyc='async'>
function slide(e){var
l=$("#carousel ul
li").outerWidth()+10;if("left"==e)var
s=parseInt($("#carousel
ul").css("left"))+l;else var s=parseInt($("#carousel
ul").css("left"))-l;$("#carousel
ul:not(:animated)").animate({left:s},350,function(){"left"==e?$("#carousel
ul li:first").before($("#carousel ul
li:last")):$("#carousel ul
li:last").after($("#carousel ul
li:first")),$("#carousel
ul").css({left:"-10.5vw"})})}$(document).ready(function(){var
e=1,l=1,s=1,t=8e3;if($("#carousel ul li:first").before($("#carousel
ul li:last")),1==e){var
r=setInterval('slide("right")',t);$("#hidden_auto_slide_seconds").val(t)}1==l&&$("#carousel
ul").hover(function(){clearInterval(r)},function(){r=setInterval('slide("right")',t)}),1==s&&$(document).bind("keypress",function(e){37==e.keyCode?slide("left"):39==e.keyCode&&slide("right")})});
</script>
|
13 Importante:
Ahora con cuidado vamos a buscar el widget en el cual habíamos ingresado el primer código, por ejemplo:
Les indique que le dieran un nombre a su widget
Mi widget se llama: Slider
Voy a buscarlo
Al dar con mi widget en el editor HTML de la plantilla me mostrara de la siguiente manera
Por ejemplo:
<b:section class='tabs' id='crosscolum' maxwidgets='1' name='Cross-Column' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='Slider' type='HTML' visible='true'>
Se debe cambiar el id, por ejemplo, el id de la plantilla que estoy utilizando se llama crosscolum, en su plantilla debe tener otro nombre, ese nombre lo deberé cambiar por: carousel, ahora me quedaría de la siguiente manera
<b:section class='tabs' id='carousel' maxwidgets='1' name='Cross-Column' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='Slider' type='HTML' visible='true'>
Para hacerlo más práctico, pueden seguir las instrucciones del Video tutorial que se encuentra en este tutorial
14 Es momento dar un clic en Guardar plantilla
Visite su blog y mire cómo funciona este nuevo Slider Carrusel para Blogger
¡Fácil verdad!
¿Necesitas ayuda?
Cualquier pregunta no duden en escribir
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
2 comentarios: