Tutorial: Como colocar slide no blog!!

Oiii framboesas tudo bem??
  Eu vim aqui para dizer que estou muito feliz pois meu blog apareceu na revista do Uprising Teen, foi em setembro mas como o blog ficou desatualizado eu não tinha visto!! Obrigada á galerinha do uprising teen por terem me colocado na revista!! muitos beijinhos para vocês!!  u3u e quem quiser ver a revista deles clique Aqui.
Enfim eu também quero dizer que meu notbook ainda não está arrumado e por isso não sei se vou conseguir postar todos os dias!! Enfim hoje vou mostrar um tuto de como colocar Slide no blog que é um tuto bem procurado, eu amo blog com slides deixa o blog com cara de profissional, quem sabe no próximo lay nós usaremos aqui no Things Teen!!
                                              Clique em leia mais para ver o tutorial!!
 
Agora vamos ao tutorial (desculpa se o tuto for grande!!) Créditos do tutorial vai para este site.

Primeiro, vá em Modelo no seu Blog, e clique em Editar HTML. Aperte Ctrl+F, e procure pela tag </head> e cole esse código abaixo.


 <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/AVvXsEi09xudyICIf88pUcf9QA4Ba9Aj9L9729I6qThJ-AYq3ruoUnVDnFrUiBmITNrKgnppdpt507pJQ1aO386QJCpl6At_f-_IxYMQGmbiL5BeTISYWLp5XEYWmtUMsN3LxyOFrW3PLOXcGru1/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://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>

                          As partes em vermelho, você pode modificar a seu gosto é muito simples. 
                Agora vá em Layout no seu blog, clique em "adicionar um gadget" e procure pelo gadget "HTML/JavaScript ". Dentro dele cole esse 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>

Simples não? e agora vou deixar algumas imagens para vocês personalizarem seus slides!! Os créditos das imagens vão para o Cherry Bomb:
                                                                    Setas:


                                                                   Bolinhas:

                                                                    

Gostaram do tutorial?? Ele é bem grande só que ele é bem útil é também um pouco complicado mas enfim é bem útil para blogs!!

                                                        Beijinhos de caramelo ^3^