Pokémon Era Black: Como colocar Slides Simples no Blog

Pessoal, há poucos minutos eu descobri como colocar slides simples no blog! Vamos aprender? Já vou avisando que vc vai ter que mexer com o código HTML do seu blog, portanto, salve o seu template sempre que fizer alguma alteração! Vamos dividir em etapas para vc compreender melhor...

1 - Código

Antes de mais nada vc precisará colocar um código no HTML do seu Blog. Vá em Design/Modelo > Editar HTML > Ctrl + F e procure por

(coloque as letras em minúsculo e retire os espaços entre os caracteres para pesquisar direitinho) e cole o seguinte código acima:

Procure também por ]]> e cole esse outro código acima:

/* 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;}

Salve tudo e feche o HTML.

2 - Adicionando os Slides

Agora vamos adicionar os slides em algum, lugar no blog. Vá em Layout > Adicionar um Gadget HTML/JavaScript e cole esse outro código:

Vc vai precisar saber o tamanho das imagens e o link. Confira esta legenda:

LINK DA IMAGEM: Link da imagem.

Width: Largura

Height: Altura

LINK: O link.

Fonte: Designer Project