Colocando Slide Personalizado No Blog

Olá meus amores, lindões, fofos e etc. 

Hoje eu vim trazer para vocês um tutorial muito útil e que eu demorei muito a achar. Pra ser sincera eu achei o Tutorial em vários blogs, porém a maioria não funcionava, pois os blogs ja estavam abandonados a muito tempo, e os códigos não foram atualizados. Achei, como se faz em um blog que não sei o nome, então quem reconhecer e souber me avise para que assim eu credite também, porém, não com a aparência que vou ensinar aqui para vocês, lá ele estava bem simples. Créditos também ao Cherry Bomb, eu não sabia, mas estavam querendo denunciar meu blog por plágio porque disseram que o código foi todo de lá, então não seja por isso! Créditos: Cherry Bomb. Sem mais delongas, vamos ao tutorial.

Aqui está uma imagem de como ficará o slide:

Se gostou e quer aprender, é só continuar lendo. 

Primeiro vocês devem ir no HTML do seu blog, dá um ctrl+f e procurar pelo código  </head> 

e Abaixo dele vocês colocam o seguinte código sei que é um pouco grande, mas com atenção, chegamos lá: 

<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:500px  !important; /*largura do slide*/height:200px  !important; /*Altura do slide*/;background:  #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmLE75FQOnYOgI4pTsQmWn8jSFXrO8IFnJaxFyITwol11mVUigreY_HJAobMB8W5Y0XAvUhVslk9i4DlPtZWEeNOoNolKhKeHeg5resUvYsPM_tMkONdcvNRuep0-RdtzOf8cLa2K_Qdz_/s1600/w2bLoader.gif") no-repeat 50% 50%;
margin: 20px auto 35px;
border: 2px DASHED #FFE1FF;/*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: 'Allura', cursive;,sans-serif;position:absolute; /*Fonte da legenda*/Font-size: 14px; /*Tamanho da fonte da legenda*/background:#EED2EE; /*Cor de fundo da legenda*/color:#fff; /*Cor do texto da legenda*/-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8; width: 490px;/*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-DA-SETINHA") 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-DA-BOLINHA") 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://static.tumblr.com/y66747w/9hlmdpcpa/nivoslider.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>

Prestem atenção nas partes em negrito. Prestou? Agora vamos ver o que cada uma significa, destaquei somente as partes mais impostantes. 

width:500px  !important; /*largura do slide*/height:200px  !important; /*Altura do slide*/; 

Como o próprio código já diz, esse código determina a altura e largura do Slide, deixe a do mesmo tamanho da imagem que for usar. 

border: 2px DASHED #FFE1FF;/*Coloque borda se quiser*/ }

Esse código é o que determina a largura da borda, o tipo e a cor é ela que vai determinar como irá ficar o seu slide. Pode colocar a que quiser. 

font-family: 'Allura', cursive;,sans-serif;position:absolute; /*Fonte da legenda*/Font-size: 14px; /*Tamanho da fonte da legenda*/background:#EED2EE; /*Cor de fundo da legenda*/color:#fff; /*Cor do texto da legenda*/-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8; width: 490px;/*Largura da legenda*/ z-index:8;}

Tudo neste código diz respeito a legenda, o fundo, tipo da fonte, tamanho da fonte e largura do fundo, a respeito dele tente deixa-lo de modo que não vai passar a borda do slide, para que assim não fique estranho.

Onde está escrito URL-DA-SETINHA e URL-DA-BOLINHA não se preocupem, deixarei algumas imagens aqui em baixo para vocês. (Imagens: Cherry Bomb)

 

Depois, é só colocar esse código em um Gadget HTML/Java script, coloquem no PRIMEIRO, aquele que fica Cabeçalho, (se o seu blog não tiver cabeçalho) mas se tiver, o coloque em qualquer lugar que achar melhor.

<div id="w2bSlideContainer">
<div id="w2bNivoSlider">
<a href="LINK_DO_SLIDE_1"><img src="LINK-DA-SUA-IMAGEM" title="LEGENDA DA IMAGEM 1"/></a>
<a href="LINK_DO_SLIDE_2"><img src="LINK-DA-SUA-IMAGEM" title="LEGENDA DA IMAGEM 2"/></a>
<a href="LINK_DO_SLIDE_3"><img src="LINK-DA-SUA-IMAGEM" title="LEGENDA DA IMAGEM 3"/></a>
<a href="LINK_DO_SLIDE_4"><img src="LINK-DA-SUA-IMAGEM" title="LEGENDA DA IMAGEM 4"/></a>
</div>
</div>

E então? Esse tutorial foi útil para você? Gostaria de pedir algum tutorial? Não se esqueça de me pedir aqui por comentários. Beijinhos, e até a próxima. :*