24 setembro 2013

Nivo Slider no seu blog

Você pode por no cabeçalho ,ou mesmo no topo das postagens em tamanho grande. Se você quiser colocar no cabeçalho recomendo ler com atenção este post do falecido Cherry Bomb (Que nos faz muitaaaaaaa falta)Espero que volte um dia,quem sabe.

Os códigos são grandes:
Procure por }]]></b:skin> (Ctrl + F) e acima dele cole o seguinte código:
/* The Nivo Slider styles */
#slider {position:relative;}
#slider img {position:absolute; top:0px; left:0px;
display:none;}
#slider a {border:0; display:block;}
.nivoSlider {position:relative; width: 556px; /* largura */ height: 440px; /* altura */ } .nivoSlider img {position:absolute; top:0px; left:0px;}
/* If an image is wrapped in a link */
.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;}
/* The slices and boxes in the Slider */
.nivo-slice
{display:block;position:absolute;z-index:5;height:100%;}
.nivo-box {display:block;position:absolute;z-index:5;}
/* Caption styles */
.nivo-caption {position:absolute;left:0px; bottom:0px;
background: #ccc/* Cor de fundo do título */  color: #fff/* Cor do título */  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;cursor:pointer;}
.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}
/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibrht-Lyj874yPcQLztqbiH-ZPFdLVWJqYCsNRRIH_QBNsu4aQe6xHO4pUTcg8LzPXageI5ASx_P0_oOY0WRFXj7AUrR-g2GfKxneju5k_StOZUBscuOqwrOgEaINgCXXq9neQ_D4zGOsl/s1600/s-12.png)
no-repeat; /* imagem das setinhas */ 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;}
As únicas coisas que você precisa alterar são as que estão em vermelho: Principalmente o tamanho (width e height).
Agora procure por </head> e acima dele cole:
   <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='http://static.tumblr.com/ifqwhnb/GBsm20q7d/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
var $nv4wp = jQuery.noConflict();
$nv4wp(window).load(function() {
$nv4wp(&#39;#slider&#39;).nivoSlider({
effect:&#39;random&#39;,
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 and 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: &#39;.jpg&#39;, // Replace this with...
controlNavThumbsReplace: &#39;_thumb.jpg&#39;, // ...this in thumb Image src
keyboardNav:true, //Use left and right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
prevText: &#39;Prev&#39;, // Prev directionNav text
nextText: &#39;Next&#39;, // 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>
Visualize e se estiver tudo ok salve. 
O slide ainda não irá aparecer. Para mostrá-lo vá até Layout e adicione em um lugar estratégico um gadget de HTML/JavaScript. Dentro dele cole:
<div id="slide"><div id="slider">
<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>
<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>
<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>
<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>
</div></div>
Altere o que se pede e seja feliz!
Lembrando que você deve alterar height e width conforme o tamanho que estipulou lá no primeiro código!
Não retire nenhuma "aspa" .

Nenhum comentário:

Postar um comentário