Slide No Blogger
Autor: Alecsander Dias | Publicado: 2012-11-23T14:16:00-08:00

Me desculpa não ter postado esse tutorial antes. Eu acabei me distraindo e me esqueci de postar, Vamos ver como por Slides no blog? Os slides que me refiro são aqueles que tem uma setinha pra mudar o slide e com efeitos hovers diferentes.










Vamos ver como faze-lo? Então clique no Leia Mais.

&nbsp;Primeiro, você vai em Design/Modelo &gt; Editar HTML &gt; Ctrl + F e procure por&nbsp;&lt;/head&gt;&nbsp;e&nbsp;acima&nbsp;cole:
 



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 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: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...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: '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
});
});

 

Agora procure por ]]&gt; e acima cole:


 /* 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: 356px;}
.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:#000; color:#fff; 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(http://twizonebr.com/Novidades/wp-content/themes/twizonebrvrs1/arrowswleft.png)
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;}  

Você não precisa mudar NADA. Agora vamos adicionar o slide em algum Lugar do blog. Vá em Design/Modelo &gt; Elementos da página &gt; Adicinar um gadget HTML/JavaScript &gt; Cole esse código:

 
<div
id="slider">
<img src="LINK DA IMAGEM"
width="763" height="277" />
<img src="LINK DA IMAGEM"
width="763" height="277" />
<img src="LINK DA IMAGEM"
title="ESCREVA A DESCRIÇÃO"width="763"
height="277" />


 

Primeiro você vai ter saber a largura das imagens, e ter o link. Saiba o que cada parte significa:
LINK DA IMAGEM:&nbsp;Link da imagem.width/height:&nbsp;Largura e altura da imagem (height: altura &amp; widht: largura).LINK:&nbsp;O link.Bem mais fácil do que se parece né? Espero que tenham gostado do tutorial.&nbsp;Obrigado e até.