Tutorial colocando Nivo Slide

Hoje iremos aprender a colocar um slide no seu blog, conhecido como Nivo. Ele é bem fácil de colocar e deixa seu blog bem mais profissional, colocando as novidades. Ele é ótimo para blogs de notícias de famosos por exemplo. Que da para colocar os anúncios ou post mais populares ou recentes na frente.

Antes de tudo entre na sua conta Blogger, e por questão de segurança faça um backup do seu blog.

O slide tem o resultado parecido com esse:

Claro você vai poder personalizar ele.

1- Vai em Modelo > Editar HTML > Prosseguir 

2- Aperte Ctrl + F e na caixinha pesquise por: </head>

Quando encontrar, cole o código a seguir ABAIXO da tag

<style type="text/css">
/* <![CDATA[ */
#w2bSlideContainer {position: relative;display: block; top:0px; left:0px; right:0px;/*Ajuste as posição do slide*/}
#w2bNivoSlider { position:relative;
width:640px !important; /*largura do slide*/height:300px !important; /*Altura do slide*/
background: #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3OE8P1Pp7fEGk73qtP8ARW69YKm7Zp7THMElOH99Lul1xbFlc6QaFnso13LeOVW4mt1-3oK4-bqZ8J9ZcOhE47tCtk5e04IvxKVQ79Z1KugXqBCRQ23AhLaGtOP-eorj2ikwlmJwxPHM2/s1600/w2bLoader.gif") no-repeat 50% 50%;
margin: 20px auto 35px;
border: 3px solid #000;/*Coloque borda se quiser*/ }
#w2bNivoSlider img {position:absolute; top:0; left:0; display:none}
.nivoSlider {position:relative;width:100%;height:auto;}
.nivoSlider img {position:absolute;top:0;left:0}
.nivo-main-image {display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;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%;top:0}
.nivo-box {display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img {display:block}
.nivo-caption {padding: 5px;
font-family: Arial,sans-serif;position:absolute; /*Fonte da legenda*/Font-size: 14px; /*Tamanho da fonte da legenda*/background:#000; /*Cor de fundo da legenda*/color:#fff; /*Cor do texto da legenda*/-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8;width: 630px;/*Largura da legenda*/ z-index:8;}
.nivo-caption p {padding:2px;margin:0}
.nivo-caption a {display:inline!important}
.nivo-html-caption {display:none}
.nivo-directionNav a {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;
background: url("URL IMG SETA") no-repeat;text-indent:-9999px;border:0}
.nivo-prevNav {left:10px}
.nivo-nextNav {background-position:-30px 0!important;right:10px}
.nivo-controlNav {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
.nivo-controlNav a {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;
background:url("URL IMG BULLETS") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
.nivo-controlNav a.active {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://bloggerblogwidgets.googlecode.com/svn/trunk/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery(document).ready(function($) {
$('#w2bNivoSlider').nivoSlider({
effect : 'random',
slices : 10,
boxCols : 8,
boxRows : 4,
animSpeed : 500,
pauseTime : 4000,
startSlide : 0,
directionNav : true,
directionNavHide : true,
controlNav : true,
keyboardNav : false,
pauseOnHover : true,
captionOpacity : 0.8
});
});
/* ]]> */
</script>

No código já tem explicações, aonde está escrito URL IMG SETA e BULLETS é os botões no caso eu trouxe uns para vocês usarem:

SETA:

  

BULLETS



Agora depois de personalizar tudo o código, salve. E em seguida vai em Layout > Adicionar Gadget > HTML/JavaScript e nela você vai colar o seguinte código:

<div id="w2bSlideContainer">
<div id="w2bNivoSlider">
<a href="LINK_DO_SLIDE_1"><img src="URL_DA_IMAGEM_1" title="LEGENDA DA IMAGEM 1"/></a>
<a href="LINK_DO_SLIDE_2"><img src="URL_DA_IMAGEM_2" title="LEGENDA DA IMAGEM 2"/></a>
<a href="LINK_DO_SLIDE_3"><img src="URL_DA_IMAGEM_3" title="LEGENDA DA IMAGEM 3"/></a>
<a href="LINK_DO_SLIDE_4"><img src="URL_DA_IMAGEM_4" title="LEGENDA DA IMAGEM 4"/></a>
</div>
</div>

LINK DO SLIDE - Você coloca a url do link de quando alguém clicar na imagem sera redirecionado

URL DA IMAGEM - Você faz em algum programa de edição a imagem que você quer que apareça, hospeda e coloca a url ali.

LEGENDA DA IMAGEM - Quando passar o mouse em cima mostra uma legenda, se você não quer legenda não escreva nada e apenas apague o LEGENDA DA IMAGEM.

Fácil né? É só prestar atenção. Qualquer dúvida  deixe o comentário abaixo que eu respondo.
Achei o código as setas e os botões  no blog Cherry Bomb.

Tutorial por: A Casa dos Templates