Tecnología

El Perro de Papel Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

Cómo instalar un slider de imágenes en blogger

Cómo instalar un slider de imágenes en blogger


Esta semana he recibido un correo con esta duda: ¿Cómo instalar un slider de imágenes debajo del cabecero en blogger? Y no es la primera vez que me preguntan por el mismo tema. Este tipo de correos no puedo contestarlos uno a uno, prefiero anotar las dudas y cuándo se repiten mucho, desarrollar un tutorial en el blog, para que pueda verlo todo el mundo.

Si me conoces un poco, ya sabes que no soy muy fan de los sliders. Aumentan el tiempo de carga del blog y ese detalle no le entusiasma demasiado a Google, por lo que yo prescindo de ellos siempre que puedo. Los he incluido en alguna de mis plantillas, porque están muy de moda y son visualmente atractivos, pero si me preguntan por mi opinión personal, no suelo recomendarlos.

Un slider puede dar visibilidad a tus fotografías y atraer la atención de tus visitas. Pero solo si tus fotos son de calidad y de verdad merece la pena darles ese protagonismo. Si tu objetivo es ese, puedes obviar el tema del tiempo de carga en favor de complacer a tus lectores. Pero piensa bien tus posibilidades y opciones antes de hacerlo.

Así que en respuesta a una de las dudas más repetidas, hoy voy a contarte cómo instalé el nivo slider de wordpress en la plantilla que utilizamos para diseñar el blog de Mica. Puedes ver su blog y el resultado final de la instalación del slider aquí:


VER EL BLOG DE MICA

Y ahora que has visto el slider funcionando en blogger y has decidido si de verdad lo necesitas o solo te gusta el resultado final, empezamos con el tutorial.

¿QUÉ NECESITO PARA EMPEZAR?

Elegir las entradas de tu blog que quieres promocionar: no te recomiendo más de cinco, para no cargarlo demasiado. Es un script que Blogger tiene que leer e interpretar para mostrarlo a tus seguidores con sus efectos de transición y demás... Tres es un número ideal.

Escoger una fotografía representativa de cada entrada. De calidad. Mínimo 1000px de ancho. Ten en cuenta que tendrás que recortarla y adaptarla al espacio que muestra el slider. Así que cuánto más grande mejor, para evitar que se pixele.

Los títulos y enlaces a cada una de las entradas que quieres mostrar. Puedes copiarlos en notepad o en un word para tenerlos cerca cuándo los necesites.

Un programa de edición de fotos o diseño gráfico, tipo GIMP, Inkscape, Photoshop, Corel... El que prefieras, es solo para recortarlas y adaptarlas a la medida elegida. Todas deben tener las mismas dimensiones para que se vean correctamente.


INSTALAR EL CÓDIGO DEL SLIDER:

1.- Entra en tu Plantilla HTML.

2.- Pincha dentro del cuadrado blanco que contiene el código, en cualquier zona, es solo para activar la plantilla y que se abra el buscador interno, no el de la web.

3.- Pulsa a la vez las teclas: Control (Ctrl) y F.

4.- Se abrirá una cajita gris con fondo blanco y la palabra SEARCH en la zona superior derecha dentro del cuadro blanco del código de tu plantilla.

Si se abre en la zona superior derecha de la página de administración del blog, vuelve a pinchar dentro de la plantilla para activarla y repite este último paso.

5.- Busca: ]]></b:skin>

6.- Pega encima:

NIVO SLIDER STYLES

#slider-container {
margin-bottom: 50px;
}

.nivoSlider {
position:relative;
width: 1080px !important;
heigh: auto !important;
}

.nivoSlider img {
position:absolute;
top:0px;
left:0px;

}

.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}

.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}

.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background-color: #C0A580 !important;
font-family: lato, sans-serif;
font-size: 16px;
text-transform: uppercase;
color:#494949;
opacity:0.8;
width:100%;
z-index:89;
text-align: center;
}

.nivo-caption p {
padding:5px;
margin:0;
}

.nivo-caption a {
display:inline !important;
}

.nivo-html-caption {
display:none;
}

.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}

.nivo-prevNav {
left:0px;
}

.nivo-nextNav {
right:0px;
}

.nivo-controlNav a {
position: relative;
z-index:99;
cursor:pointer;
}

.nivo-controlNav a.active {
font-weight:bold;
}

============================
=== Custom Slider Styles ===
============================

#slider {
position:relative;
width: 1080px !important;
heigh: auto !important;
background: #EFCED3 url(http://1.bp.blogspot.com/-F80SiDnYNs0/Ts0P4xXGd5I/AAAAAAAACp0/xA5AuZGzqEg/s600/loading.gif) no-repeat 50% 50%;
}

#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}

#slider a {
border:0;
display:block;
}

.nivo-controlNav {
position:absolute;
left:450px;
bottom:-30px;
}

.nivo-controlNav a {
width:22px;
height: 22px;
background: url(https://lh3.googleusercontent.com/-jGwSPhXjWXU/Voj5e1oX_TI/AAAAAAAAtVY/F4BfqYbY5xc/s44-Ic42/marcador.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:7px;
float:left;
}

.nivo-controlNav a.active {
background-position:0 -22px;
}

.nivo-directionNav a {
display:block;
width:30px;height:30px;
background:url(https://lh3.googleusercontent.com/-ofODwINSaMg/Voj5e57ogUI/AAAAAAAAtVU/9zblQCB26Tg/s60-Ic42/flechas.png) no-repeat;
text-indent:-9999px;
border:0;
}

a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}

a.nivo-prevNav {
left:15px;
}

Te he marcado en negrita lo que puedes personalizar, pero de momento déjalo así, cuando tengamos el slider instalado y funcionando podrás ver los cambios en vista previa y será más sencillo ver el resultado final.

Así que de momento guarda los cambios en tu plantilla, comprueba que no hay errores y continuamos.

7.- Ahora busca: </body>

Y pega justo encima:
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js type=text/javascript/>

<script type=text/javascript>
//<![CDATA[

* jQuery Nivo Slider v2.3
* http://nivo.dev7studios.com
*
* Copyright 2010, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php

(function(b){var a=function(j,q){var g=b.extend({},b.fn.nivoSlider.defaults,q);var m={currentSlide:0,currentImage:"",totalSlides:0,randAnim:"",running:false,paused:false,stop:false};var d=b(j);d.data("nivo:vars",m);d.css("position","relative");d.addClass("nivoSlider");var e=d.children();e.each(function(){var t=b(this);var s="";if(!t.is("img")){if(t.is("a")){t.addClass("nivo-imageLink");s=t}t=t.find("img:first")}var r=t.width();if(r==0){r=t.attr("width")}var i=t.height();if(i==0){i=t.attr("height")}if(r>d.width()){d.width(r)}if(i>d.height()){d.height(i)}if(s!=""){s.css("display","none")}t.css("display","none");m.totalSlides++});if(g.startSlide>0){if(g.startSlide>=m.totalSlides){g.startSlide=m.totalSlides-1}m.currentSlide=g.startSlide}if(b(e[m.currentSlide]).is("img")){m.currentImage=b(e[m.currentSlide])}else{m.currentImage=b(e[m.currentSlide]).find("img:first")}if(b(e[m.currentSlide]).is("a")){b(e[m.currentSlide]).css("display","block")}d.css("background","url("+m.currentImage.attr("src")+") no-repeat");for(var k=0;k<g.slices;k++){var o=Math.round(d.width()/g.slices);if(k==g.slices-1){d.append(b(<div class="nivo-slice"></div>).css({left:(o*k)+"px",width:(d.width()-(o*k))+"px"}))}else{d.append(b(<div class="nivo-slice"></div>).css({left:(o*k)+"px",width:o+"px"}))}}d.append(b(<div class="nivo-caption"><p></p></div>).css({display:"none",opacity:g.captionOpacity}));if(m.currentImage.attr("title")!=""){var n=m.currentImage.attr("title");if(n.substr(0,1)=="#"){n=b(n).html()}b(".nivo-caption p",d).html(n);b(".nivo-caption",d).fadeIn(g.animSpeed)}var c=0;if(!g.manualAdvance&&e.length>1){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}if(g.directionNav){d.append(<div class="nivo-directionNav"><a class="nivo-prevNav">Prev</a><a class="nivo-nextNav">Next</a></div>);if(g.directionNavHide){b(".nivo-directionNav",d).hide();d.hover(function(){b(".nivo-directionNav",d).show()},function(){b(".nivo-directionNav",d).hide()})}b("a.nivo-prevNav",d).live("click",function(){if(m.running){return false}clearInterval(c);c="";m.currentSlide-=2;p(d,e,g,"prev")});b("a.nivo-nextNav",d).live("click",function(){if(m.running){return false}clearInterval(c);c="";p(d,e,g,"next")})}if(g.controlNav){var l=b(<div class="nivo-controlNav"></div>);d.append(l);for(var k=0;k<e.length;k++){if(g.controlNavThumbs){var f=e.eq(k);if(!f.is("img")){f=f.find("img:first")}if(g.controlNavThumbsFromRel){l.append(<a class="nivo-control" rel="+k+"><img src="+f.attr("rel")+" alt="" /></a>)}else{l.append(<a class="nivo-control" rel="+k+"><img src="+f.attr("src").replace(g.controlNavThumbsSearch,g.controlNavThumbsReplace)+" alt="" /></a>)}}else{l.append(<a class="nivo-control" rel="+k+">+(k+1)+"</a>")}}b(".nivo-controlNav a:eq("+m.currentSlide+")",d).addClass("active");b(".nivo-controlNav a",d).live("click",function(){if(m.running){return false}if(b(this).hasClass("active")){return false}clearInterval(c);c="";d.css("background","url("+m.currentImage.attr("src")+") no-repeat");m.currentSlide=b(this).attr("rel")-1;p(d,e,g,"control")})}if(g.keyboardNav){b(window).keypress(function(i){if(i.keyCode=="37"){if(m.running){return false}clearInterval(c);c="";m.currentSlide-=2;p(d,e,g,"prev")}if(i.keyCode=="39"){if(m.running){return false}clearInterval(c);c="";p(d,e,g,"next")}})}if(g.pauseOnHover){d.hover(function(){m.paused=true;clearInterval(c);c=""},function(){m.paused=false;if(c==""&&!g.manualAdvance){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}})}d.bind("nivo:animFinished",function(){m.running=false;b(e).each(function(){if(b(this).is("a")){b(this).css("display","none")}});if(b(e[m.currentSlide]).is("a")){b(e[m.currentSlide]).css("display","block")}if(c==""&&!m.paused&&!g.manualAdvance){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}g.afterChange.call(this)});var p=function(r,s,u,x){var y=r.data("nivo:vars");if(y&&(y.currentSlide==y.totalSlides-1)){u.lastSlide.call(this)}if((!y||y.stop)&&!x){return false}u.beforeChange.call(this);if(!x){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}else{if(x=="prev"){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}if(x=="next"){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}}y.currentSlide++;if(y.currentSlide==y.totalSlides){y.currentSlide=0;u.slideshowEnd.call(this)}if(y.currentSlide<0){y.currentSlide=(y.totalSlides-1)}if(b(s[y.currentSlide]).is("img")){y.currentImage=b(s[y.currentSlide])}else{y.currentImage=b(s[y.currentSlide]).find("img:first")}if(u.controlNav){b(".nivo-controlNav a",r).removeClass("active");b(".nivo-controlNav a:eq("+y.currentSlide+")",r).addClass("active")}if(y.currentImage.attr("title")!=""){var z=y.currentImage.attr("title");if(z.substr(0,1)=="#"){z=b(z).html()}if(b(".nivo-caption",r).css("display")=="block"){b(".nivo-caption p",r).fadeOut(u.animSpeed,function(){b(this).html(z);b(this).fadeIn(u.animSpeed)})}else{b(".nivo-caption p",r).html(z)}b(".nivo-caption",r).fadeIn(u.animSpeed)}else{b(".nivo-caption",r).fadeOut(u.animSpeed)}var w=0;b(".nivo-slice",r).each(function(){var i=Math.round(r.width()/u.slices);b(this).css({height:"0px",opacity:"0",background:"url("+y.currentImage.attr("src")+") no-repeat -"+((i+(w*i))-i)+"px 0%"});w++});if(u.effect=="random"){var A=new Array("sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade");y.randAnim=A[Math.floor(Math.random()*(A.length+1))];if(y.randAnim==undefined){y.randAnim="fade"}}if(u.effect.indexOf(",")!=-1){var A=u.effect.split(",");y.randAnim=b.trim(A[Math.floor(Math.random()*A.length)])}y.running=true;if(u.effect=="sliceDown"||u.effect=="sliceDownRight"||y.randAnim=="sliceDownRight"||u.effect=="sliceDownLeft"||y.randAnim=="sliceDownLeft"){var t=0;var w=0;var C=b(".nivo-slice",r);if(u.effect=="sliceDownLeft"||y.randAnim=="sliceDownLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);i.css("top","0px");if(w==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="sliceUp"||u.effect=="sliceUpRight"||y.randAnim=="sliceUpRight"||u.effect=="sliceUpLeft"||y.randAnim=="sliceUpLeft"){var t=0;var w=0;var C=b(".nivo-slice",r);if(u.effect=="sliceUpLeft"||y.randAnim=="sliceUpLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);i.css("bottom","0px");if(w==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="sliceUpDown"||u.effect=="sliceUpDownRight"||y.randAnim=="sliceUpDown"||u.effect=="sliceUpDownLeft"||y.randAnim=="sliceUpDownLeft"){var t=0;var w=0;var B=0;var C=b(".nivo-slice",r);if(u.effect=="sliceUpDownLeft"||y.randAnim=="sliceUpDownLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);if(w==0){i.css("top","0px");w++}else{i.css("bottom","0px");w=0}if(B==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;B++})}else{if(u.effect=="fold"||y.randAnim=="fold"){var t=0;var w=0;b(".nivo-slice",r).each(function(){var i=b(this);var v=i.width();i.css({top:"0px",height:"100%",width:"0px"});if(w==u.slices-1){setTimeout(function(){i.animate({width:v,opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({width:v,opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="fade"||y.randAnim=="fade"){var w=0;b(".nivo-slice",r).each(function(){b(this).css("height","100%");if(w==u.slices-1){b(this).animate({opacity:"1.0"},(u.animSpeed*2),"",function(){r.trigger("nivo:animFinished")})}else{b(this).animate({opacity:"1.0"},(u.animSpeed*2))}w++})}}}}}};var h=function(i){if(this.console&&typeof console.log!="undefined"){console.log(i)}};this.stop=function(){if(!b(j).data("nivo:vars").stop){b(j).data("nivo:vars").stop=true;h("Stop Slider")}};this.start=function(){if(b(j).data("nivo:vars").stop){b(j).data("nivo:vars").stop=false;h("Start Slider")}};g.afterLoad.call(this)};b.fn.nivoSlider=function(c){return this.each(function(){var d=b(this);if(d.data("nivoslider")){return}var e=new a(this,c);d.data("nivoslider",e)})};b.fn.nivoSlider.defaults={effect:"random",slices:15,animSpeed:500,pauseTime:3000,startSlide:0,directionNav:true,directionNavHide:true,controlNav:true,controlNavThumbs:false,controlNavThumbsFromRel:false,controlNavThumbsSearch:".jpg",controlNavThumbsReplace:"_thumb.jpg",keyboardNav:true,pauseOnHover:true,manualAdvance:false,captionOpacity:0.8,beforeChange:function(){},afterChange:function(){},slideshowEnd:function(){},lastSlide:function(){},afterLoad:function(){}};b.fn._reverse=[].reverse})(jQuery);
//]]>
</script>

<script type=text/javascript>
jQuery(window).load(function() {
jQuery(&#39;#slider&#39;).nivoSlider();
});
</script>

Lo que te he marcado en negrita es la llamada a la librería JQuery. Antes de instalar la primer línea, comprueba que no la tienes ya. Si la encuentras, no hace falta que la añadas, ya que si hay dos pueden entrar en conflicto y no funcionará.

8.- Ahora vamos a DISEÑO. ¿Ves la zona dónde pone CROSS-COLUMN?


Ahí tienes que colocar tu slider. Puede que en el primero tengas tu gadget de páginas, pero no te preocupes.

Si no tienes espacio para añadir tu gadget del slider, haz click en añadir un gadget en la sidebar y elige HTML/JAVASCRIPT.


Escribe cualquier cosa, es solo una prueba. Guarda los cambios y arrástralo hasta la zona CROSS-COLUMN2.

Si tu plantilla no es la simple o está modificada, puede que los nombres que encuentres sean CROSSCOL (Cross-Column) y CROSSCOL-OVERFLOW (Crosscol-overflow).

9.- Edita tu nuevo gadget HTML/JAVASCRIPT y pega el siguiente código:

<b:if cond=data:blog.pageType != &quot;item&quot;>
<b:if cond=data:blog.pageType != &quot;static_page&quot;>
<div class=crosscol>
<div id=slider-container>

<div id=slider>

<a href=http://blogmuchomasquedos.blogspot.com.es/search/label/Decoraci%C3%B3n title=Decoración>

<img alt= src=https://lh3.googleusercontent.com/-fsdXHwWctl0/VposNXQGyGI/AAAAAAAAtoQ/H-PL5y03T8s/s1084-Ic42/slider001.png title=Decoración/>

</a>

<a href=http://blogmuchomasquedos.blogspot.co.uk/search/label/Fiestas title=Fiestas>

<img alt= src=https://lh3.googleusercontent.com/-VRC5QaGQGIw/VposNQzmiQI/AAAAAAAAtog/OTHz6gR43ZY/s1084-Ic42/slider002.png title=Fiestas/>

</a>

<a href=http://blogmuchomasquedos.blogspot.co.uk/search/label/Handmade title=Handmade>

<img alt= src=https://lh3.googleusercontent.com/-5XMJ6C3gXtU/VposNYsBvPI/AAAAAAAAtoU/_JbuNhmJPto/s1084-Ic42/slider003.png title=Handmade/>

</a>

<a href=http://blogmuchomasquedos.blogspot.co.uk/search/label/Lugares title=Lugares>

<img alt= src=https://lh3.googleusercontent.com/-d8g0Lrr00qc/VposN-IZRkI/AAAAAAAAtoY/HtEZce7dwZc/s1084-Ic42/slider004.png title=Lugares/>

</a>

<a href=http://blogmuchomasquedos.blogspot.co.uk/search/label/Sabores title=Sabores>

<img alt= src=https://lh3.googleusercontent.com/-R6jD42HB2Iw/VposNxTGReI/AAAAAAAAtoc/hPLeY6al2r8/s1084-Ic42/slider005.png title=Sabores/>

</a>

</div>

<br clear=all/>

</div>

</div>
</b:if>
</b:if>

10.- Guarda los cambios y tu slider ya debe estar funcionando. Pero con las fotos, enlaces y títulos del slider de Mica. Así que vamos a ver qué cambiar:

Enlaces en violeta: la url de la entrada enlazada.
Enlaces en fucksia: la url de tu imagen, primero tienes que redimensionarla y adaptarla al espacio del que disponemos. Las medidas del slider usando este script son: 1080px de ancho por 315px de alto.


Para conseguir la URL de tu imagen, puedes subirla a Picasa o Google Fotos. Es dónde Blogger aloja las fotos de tu blog por defecto y cargará más rápido que dropbox, tynic o cualquier otra plataforma que utilices para alojar archivos en la nube.

Texto en negrita: El título que quieres que aparezca en la parte inferior de cada fotografía de tu imagen. Puedes añadir un texto tan largo como quieras, pero siempre comprobando en VISTA PREVIA el resultado antes de publicarlo, para que no quede descompensado o ilegible.

ACLARACIÓN:

Este código muestra cinco fotografías.

FOTO UNO

<a href=http://blogmuchomasquedos.blogspot.com.es/search/label/Decoraci%C3%B3n title=Decoración>

<img alt= src=https://lh3.googleusercontent.com/-fsdXHwWctl0/VposNXQGyGI/AAAAAAAAtoQ/H-PL5y03T8s/s1084-Ic42/slider001.png title=Decoración/>

</a>

FOTO DOS

<a href=http://blogmuchomasquedos.blogspot.co.uk/search/label/Fiestas title=Fiestas>

<img alt= src=https://lh3.googleusercontent.com/-VRC5QaGQGIw/VposNQzmiQI/AAAAAAAAtog/OTHz6gR43ZY/s1084-Ic42/slider002.png title=Fiestas/>

</a>

FOTO TRES

<a href=http://blogmuchomasquedos.blogspot.co.uk/search/label/Handmade title=Handmade>

<img alt= src=https://lh3.googleusercontent.com/-5XMJ6C3gXtU/VposNYsBvPI/AAAAAAAAtoU/_JbuNhmJPto/s1084-Ic42/slider003.png title=Handmade/>

</a>

FOTO CUATRO

<a href=http://blogmuchomasquedos.blogspot.co.uk/search/label/Lugares title=Lugares>

<img alt= src=https://lh3.googleusercontent.com/-d8g0Lrr00qc/VposN-IZRkI/AAAAAAAAtoY/HtEZce7dwZc/s1084-Ic42/slider004.png title=Lugares/>

</a>

FOTO CINCO

<a href=http://blogmuchomasquedos.blogspot.co.uk/search/label/Sabores title=Sabores>

<img alt= src=https://lh3.googleusercontent.com/-R6jD42HB2Iw/VposNxTGReI/AAAAAAAAtoc/hPLeY6al2r8/s1084-Ic42/slider005.png title=Sabores/>

</a>

Cada slider va encorsetado entre las etiquetas <a href=...> </a>. Para eliminar alguna solo tienes que eliminar el correspondiente fragmento y para añadir una más, volver a copiar el fragmento delimitado por estas etiquetas con tus nuevas URLs, por ejemplo, a continuación de la FOTO CINCO:

<a href=http://blogmuchomasquedos.blogspot.co.uk/search/label/Sabores title=Sabores>

<img alt= src=https://lh3.googleusercontent.com/-R6jD42HB2Iw/VposNxTGReI/AAAAAAAAtoc/hPLeY6al2r8/s1084-Ic42/slider005.png title=Sabores/>

</a>

<a href=URL DEL ENLACE title=TÍTULO>

<img alt= src=URL DE LA IMAGEN title=TÍTULO/>

</a>

PERSONALIZAR EL DISEÑO:

Ya ha pasado lo peor, añadir el código. Tu slider ya está funcionando en tu blog de pruebas (te aconsejo hacerlo primero en un blog de pruebas para instalarlo con la configuración final en el real). Ahora volvemos a la plantilla HTML para darle nuestros colores y tipografías.

1.- Entra en tu plantilla HTML/JAVASCRIPT.

2.- Abre el buscador interno y busca: </b:skin>

3.- Encima encontrarás tu código, el que pegamos en la primera parte del tutorial. Vamos a ver las partes que te marqué en negrita para que puedas personalizarlas.

.nivoSlider {
position:relative;
width: 1080px !important;
heigh: auto !important;
}

WIDTH: ancho del slider. Puedes variarlo para adaptarlo al ancho de tu blog, pero recuerda que afectará también a la redimensión de tus imágenes de prueba.

HEIGHT: alto del slider. Esta configurado para que se adapte automáticamente al ancho. Es muy importante que todas tus imágenes tengas el mismo alto para que se vea correctamente.

4.- Los estilos del texto descriptivo:

.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background-color: #C0A580 !important;
font-family: lato, sans-serif;
font-size: 16px;
text-transform: uppercase;
color:#494949;
opacity:0.8;
width:100%;
z-index:89;
text-align: center;
}

Background-color: El color de fondo de la banda que aparece detrás del texto descriptivo.

Font-family: puedes cambiarla por la que prefieras siempre teniendo en cuenta las que ya utilizas en tu blog, ya sabes, para no cargarte tu imagen de marca.

Font-size: el tamaño del tipo de letra.

Text-transform: uppercase hace que se vea en mayúsculas. Puedes eliminarlo y aparecerá tal y como lo escribas.

Color: el color del texto. El primero es el color con el que aparecerá el texto y el segundo,

5.- Icono de carga de imágenes.
#slider {
position:relative;
width: 1080px !important;
heigh: auto !important;
background: #EFCED3 url(http://1.bp.blogspot.com/-F80SiDnYNs0/Ts0P4xXGd5I/AAAAAAAACp0/xA5AuZGzqEg/s600/loading.gif) no-repeat 50% 50%;
}

Aquí aparece el icono de carga y el color de fondo. El color puedes cambiarlo por el que quieras. El icono de carga no suele aparecer, pero puedes rediseñarlo a tu gusto, subirlo a la misma plataforma que tus botos y poner tu enlace.


6.- El marcador inferior que indica la foto en la que estás.

.nivo-controlNav a {
width:22px;
height: 22px;
background: url(https://lh3.googleusercontent.com/-jGwSPhXjWXU/Voj5e1oX_TI/AAAAAAAAtVY/F4BfqYbY5xc/s44-Ic42/marcador.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:7px;
float:left;
}

Puedes utilizar el mío:


Descarga la imagen y súbela junto a las demás, así la tendrás a buen recaudo y tu enlace nunca dejará de funcionar. Puedes rediseñarla y adaptarla a tus colores, respetando las medidas para que se vea correctamente.

7.- Las flechas de navegación laterales:

.nivo-directionNav a {
display:block;
width:30px;height:30px;
background:url(https://lh3.googleusercontent.com/-ofODwINSaMg/Voj5e57ogUI/AAAAAAAAtVU/9zblQCB26Tg/s60-Ic42/flechas.png) no-repeat;
text-indent:-9999px;
border:0;
}

De nuevo, puedes utilizar las mías si quieres:


O descargarlas y rediseñarlas para hacerlas del color que tu quieras. No tengo pensado borrar ninguna de las imágenes, pero ya sabes cómo funciona esto de internet... Así que si quieres conservarlas y tenerlas alojadas en tu propia plataforma, te aconsejo descargarlas y tener tu propia url personalizada.

¡Tachán! Ya tienes tu slider personalizado ¿qué te parece? Seguro que el esfuerzo invertido merece la pena ¿verdad?

REGALITO:

Si has llegado hasta aquí y no te apetece, no sabes o no tienes tiempo de diseñar los marcadores y flechitas para adaptarlos a tus colores, te regalo un pack de flechas y marcadores en varios colores que puedes descargar gratis compartiendo esta entrada en tu red social favorita desde el siguiente botón:

DESCARGAR PACK NIVO SLIDER

A mí me ayudas a llegar a más gente (que he tardado lo mío en preparar el tutorial de hoy y me haría ilusión saber que es útil a mucha gente) y tú ahorras un tiempo muy valioso que puedes dedicar a seguir haciendo crecer tu proyecto online.

¡Y no olvides dejarme el enlace a tu blog en los comentarios para ver tu nuevo slider funcionando!





Fuente: este post proviene de El Perro de Papel, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Cómo revivir tus viejos posts

El mes pasado te hablé de qué era contenido evergreen (los posts que no pierden relevancia y que siguen generando tráfico a tu blog forever and ever), así que hoy me toca explicarte algunos trucos par ...

Recomendamos

Relacionado

Blogger Código HTML Trucos Blogger

Crea marquesinas en Blogger

Lograr darle un toque especial y personal a tu blog forma parte del desafío a la hora de crear contenido único. Gracias a las plataformas de gestión de contenidos se hace mucho más sencillo organizar de forma práctica todo lo que queremos transmitir, pero siempre hay trucos y consejos que te pueden ayudar a optimizar tu blog. ¿Quieres que el título de tu blog se mantenga en movimiento como en una ...

BLOG blogging intermedio ...

Instalar los iconos de redes sociales en el header y sidebar de blogger

En una entrada anterior te conté cómo instalar una fuente llamada fontawesome para utilizar iconos en tus listas, páginas y entradas de blogger, para darles ese toque diferente y original que las haga especiales y visualmente atractivas. Puedes volver a revisar la entrada e instalar la fuente que te digo en el siguiente botón: CÓMO INSTALAR ICONOS EN BLOGGER Hoy, vamos a utilizar nuestros iconos p ...

Blogger gadgets Tutoriales

Cómo instalar un botón de subir arriba

Si quieres que tu blog tenga ese botoncito en el lateral para subir arriba (como verás, yo tengo a mi perrito que dice "Súbeme") tenemos que hacer lo siguiente: Nos vamos a Diseño ➡ Añadir un gadget ➡ HTML. Le añadimos el siguiente código: <a href=# style=display croll;position:fixed;bottom:5px;right:20px; title=IR ARRIBA><img src="URL del botón de subir arriba", wid ...

Blogger Código HTML Trucos Blogger

Crea marquesinas en Blogger

Lograr darle un toque especial y personal a tu blog forma parte del desafío a la hora de crear contenido único. Gracias a las plataformas de gestión de contenidos se hace mucho más sencillo organizar de forma práctica todo lo que queremos transmitir, pero siempre hay trucos y consejos que te pueden ayudar a optimizar tu blog. ¿Quieres que el título de tu blog se mantenga en movimiento como en una ...

general propuestas

Cómo hacer adaptables a cualquier dispositivo las imágenes en Blogger

Hoy día una web o un Blog no sólo se visualiza en ordenadores, ahora es necesario cuidar también su presentación en dispositivos móviles. Los usuarios utilizan pantallas de toda clase y tamaño para adentrarse en nuestros contenidos, debemos cuidar la manera en que mostramos la información para que sea fácilmente accesible desde cualquier aparato. Una parte fundamental de cualquier web o Blog son s ...

icono botón redes sociales ...

Cómo insertar botones de Redes Sociales en Blogger

Hoy les traigo el Tutorial de cómo insertar los botones de las Redes Sociales en Blogger. Lo primero que vamos a hacer es Descargarnos los Botones que más nos gusten y alojarlos en hosting (hay muchos gratuitos), pero yo uso el Google Drive, que me parece más sencillo y más completo. Una vez tengamos las imágenes subidas a Google Drive, tenemos que averiguar su URL, (si no sabes cómo hacerlo, te l ...

general ayuda blogger otros tutoriales

Como poner la barrita de cookies en blogger

No me suele gustar publicar sobre cosas que ya han sido publicadas tropecientas veces en otros lados. Ojo, seguro que lo hago, pues realmente no leo otros blogs sobre mi temática, pero si algo sé o intuyo que ya lo han publicado mil sitios más, pues trato de evitarlo, porque para qué. Si es algo tipo el post sobre si es mejor blogger o worpdress, pues sí, porque al final yo doy mi punto de vista ( ...

internet blog intermedio ...

Cómo poner un contador regresivo en Blogger

Si pasaste por mi blog de Servicios de Diseño Gráfico entre el 28 y 29 de noviembre seguro que viste el contador regresivo que instalé para que se viera el tiempo que quedaba para poder disfrutar de la oferta. Me gustó porque es sencillito pero puede personalizarse y queda bastante integrado en la web. Ahora que se acerca la Navidad puede usarse para contabilizar los días que faltan para fin de añ ...

BLOGGER blogging SEO ...

BLOGGER TERAPIA SEO y uso de backlinks

Como alguna vez mencioné es fundamental que estés centrado en tu temática, que te enfoques en la estética de tu blog de blogger, las estrategias de posicionamiento SEO, tu promoción o presentación. Y en posicionar están los backlinks. Por eso es importante dar un mayor grado de interés a esta Blogger Terapia. Terapia de SEO blogger La blogger terapia es importante para los niveles que dan posib ...

general

Creacion de un Game con HTML5 Javascript Utilizando el framework Phaser

En este tutorial iniciaremos un nuevo juego utilizando el Framework "Phaser", usando HTML y CSS3. Phaser es un framewprk/engine muy completo y facil de usar. Hola amigos, como ven en el video, el juego es muy simple de jugar, apenas tenes que comer las frutas para mantenerte en vuelo y cuidar para que las estrellas negras no te toquen o mueres. Si tienen un smartphone Android puden desc ...