Colocar un slider de imágenes ~

¿Slider de imágenes? Si, una galería de imágenes con algún efecto llamativo al cambiar cada imagen para resaltar ciertos acontecimientos, entradas, etc. en nuestro blog ~

Para colocar el slider sigue estos sencillos pasos:

1er paso: Ve a Plantilla / Edición HTML & presiona dentro del cuadro donde se encuentra el código de tu plantilla.

2do paso: Busca {con la ayuda magica del Ctrl + F} la siguiente linea:

</body>

ARRIBA de ello pega los siguientes script:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ifqwhnb/GBsm20q7d/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
var $nv4wp = jQuery.noConflict();
$nv4wp(window).load(function() {
$nv4wp('#slider').nivoSlider({
effect:'random',
slices:15, // For slice animations
boxCols: 4, // For box animations
boxRows: 2, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>

3er paso: Busca la siguiente linea:

]]></b:skin>

& ARRIBA pega el siguiente codigo CSS:

#slider {position:relative;}
#slider img {position:absolute; top:0px; left:0px; display:none;}
#slider a {border:0; display:block;}
.nivoSlider {position:relative; width: 356px;}
.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:6; display:none;}
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;}
.nivo-box {display:block;position:absolute;z-index:5;}
.nivo-caption {position:absolute;left:0px; bottom: -30px; background:#fff; color:#F88594; text-transform: uppercase; width: 100%;
z-index:50; border-right: 5px solid #;padding: 5px 0;}
.nivo-caption p {padding:0 20px;margin:0;font-size:14px;}
.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}
.nivo-directionNav a {position:absolute;top:45%;z-index:99;}
.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}
.slider {width:100%;}
.slider img {position:absolute;top:0px;left:0px;display:none;}
.slider a {border:0;display:block;}
.nivo-controlNav {display:none;}
.nivo-directionNav a {display:block;width:31px;height:34px;background:url(URL IMG FLECHAS) no-repeat; text-indent:-9999px;border:0;}
a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav {left:15px;}
.nivo-caption {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
.nivo-caption a {color:#efe9d1; text-decoration:underline;}

Edita lo marcado:

backgrouns: FONDO DE LA DESCRIPCION DE CADA IMAGEN.

color: COLOR DE LA DESCRIPCION.

& una ves todo listo, guarda los cambios.

Elige las flechitas que quieras: {click sobre la que quieras para tenerla en color blanca, copias su URL & la colocas donde indica!}

     

4to paso: Vas a Diseño / Añadir un gadget / HTML/javascript & alli pega la estructura de tu galería:

{Recomiendo que la coloques debajo de la cabecera o arriba de las entradas, para que se luzcan mas los efectos & no desordene el blog}

<div id="slide" style="margin-bottom: 30px;"><div id="slider">
<a href="URL" target="_blank"><img src="URL IMG" width="790" height="270" title="TITULO" /></a>
<a href="URL" target="_blank"><img src="URL IMG" width="790" height="270" title="TITULO"/></a>
<a href="URL" target="_blank"><img src="URL IMG" width="790" height="270" title="TITULO" /></a>
<a href="URL" target="_blank"><img src="URL IMG" width="790" height="270" title="TITULO"/></a>
</div></div>

& donde indica, coloca las imágenes que quieres que se muestre.

Edita el tamaño de las imágenes según el tamaño que tendrá tu slider:

{Las medidas que están colocadas son las que yo utilizo ~}

width: Ancho de tu imagen.

height: Alto de tu imagen.

& ya tienes tu Slider/Galería de imágenes!

El código original lo encontré en tumblr, pero le hice unos arreglos ~