Como colocar slides no seu blog

Bom dia! Hoje resolvi fazer um tutorial ensinando a colocar slides no topo do seu blog, pois alguns leitores estavam pedindo. É muito fácil e simples de mexer. Vamos lá!

  Acesse o painel do seu blog.

 Clique em "Modelo" e depois em "Editar HTML", como mostra a imagem abaixo.

 Agora, procure por </head> e cole acima dele o seguinte código:

<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>

O resultado será:

 Em seguida, procure por </b:skin>. Provavelmente vai aparecer uma linha como na imagem que vai ser mostrada abaixo, mas é só clicar na setinha preta para aparecer todo o texto que tem dentro.

Quando aparecer todo o texto, pesquise novamente por ]]></b:skin> e coloque o próximo código acima dele:

/* 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: 400px; /* largura */ height: 200px; /* 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/AVvXsEgGCg5Oy0ezHs7rt5lFRKLwigkx0xh96M8w6VGnhpBBWFELqHRIPWjx7BSTmXRN6731R3OScU_5yCjCP49yaTrKIIotwA5PicfiakohGm4iGTbAEyr6S3MsstqeEgmXH4KrFsnV-6BkSZTe/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;}

Ficará assim:

 Salve!

 Para finalizar, vamos fazer o último passo. Acesse o "Layout" e clique em "Adicionar um Gadget".

Selecione a opção HTM/Javascript clicando no +.

Depois, copie e cole o seguinte código na área do "Conteúdo":

<div id="slide"><div id="slider">

<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="400" height="200" /></a>

<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="400" height="200" /></a>

<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="400" height="200" /></a>

<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="400" height="200" /></a>

</div></div>

 Salve!

 Pronto, agora o slider estará em seu blog e para colocar imagens é só modificar as partes "Link do Post", "Link da Imagem" e "Título do Post". Veja como ficou em http://www.testesdoseparado.blogspot.com.br/

 Até a próxima!