Tutorial: Slide com postagens recentes

Oi gente, hoje eu trouxe um tutorial para vocês, lembra que eu disse que ia começar a postar tutoriais aqui no blog, para ajudar vocês? Bom então, como eu falei né o primeiro tutorial que vim trazendo hoje é de um slide muito legal. Porque você encontra muitos slides por aí, mas só que tem um problema, esses slides assim que você faz uma postagem nova, se você quiser que ela apareça no slide você tem que ir lá e trocar. E é muito chato porque você tem que pegar a imagem colocar no slide trocar o título. E o slide que eu trouxe pra vocês ele é automático então quer aprender a como instalar ele no se blog? Clique em leia mais e vem comigo.

 Bom gente, como disse ele é um slide automático. Então ele funciona assim, assim que você fizer uma postagem no seu blog ele já vai direto para o slide. Se quiserem ver como que fica é só ver o blog da minha amiga leticia: http://leticiaeoutrascoisass.blogspot.com.br/. Porque ela também usa esse slide e ela AMA. Lembrando que qualquer dúvida deixem nos comentários.

1º Vá em Designer > Editar HTML e procure pela seguinte tag ]]></b:skin>

2º Acima dela coloque o seguinte código.

/*----- INÍCIO DO SLIDE  ----------------------------------------*/
.theme-default .nivoSlider {
position:relative;
background:#fff url(http://i1043.photobucket.com/albums/b436/JBollton/loading.gif) no-repeat 50% 50%;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
 box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
 position:absolute;top:0px;left:0px;display:none;
}
.theme-default .nivoSlider a {
 border:0;display:block;
}
.theme-default .nivo-controlNav {
 position:absolute;left:50%;bottom:-42px;
 margin-left:-40px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
 display:block;width:22px;height:22px;
 background:url(http://i1043.photobucket.com/albums/b436/JBollton/bullets.png) no-repeat;
 text-indent:-9999px;border:0;margin-right:3px;float:left;
}
.theme-default .nivo-controlNav a.active {
 background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
 display:block;width:30px;height:30px;
 background:url(http://i1043.photobucket.com/albums/b436/JBollton/arrows.png) no-repeat;
 text-indent:-9999px;border:0;
}
.theme-default a.nivo-nextNav {
 background-position:-30px 0;right:15px;
}
.theme-default a.nivo-prevNav {
 left:15px;
}
.theme-default .nivo-caption {
 font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
 color:#fff;
 border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
 color:#fff;
}
/*----- END Default Theme ----------------------------------------*/
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.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;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:8;
}
.nivo-caption p {
 padding:5px;
 margin:0;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
 display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:9;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:9;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
.theme-default #slider {
margin:10px -20px 60px 10px; /* Aqui você define a posição do slide */
width:610px; /* Certifique-se de suas imagens são do mesmo tamanho */
height:300px; /* Certifique-se de suas imagens são do mesmo tamanho */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
 margin-top:150px;
}
.clear {
 clear:both;
}

3º Depois procure por </body> e acima dele coloque o código abaixo.

<!-- jQuery --><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/> <script src='https://sites.google.com/site/jbollton/arquivo/nivo-slider-modified.min.js' type='text/javascript'/> <script type='text/javascript'> $(window).load(function() { $(&#39;#slider&#39;).nivoSlider(); }); </script>

4º  Em seguida salve.

5º  Agora vá em Designer e adiciona um novo "Html/Javascript" e cole o seguinte código.

<div class="slider-wrapper theme-default">

<div class="ribbon"></div>

 <script style="text/javascript" src="https://sites.google.com/site/jbollton/arquivo/GallerySlide.js"></script>

<script style="text/javascript">

 var numposts_gal = 6;   //number of posts

 var image_height = 300; //image height

 var image_width = 610;  //image width

</script>

<script src="http://www.ecleticus.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>

</div>

6º  O código destacado de vermelho se refere a quantidade de posts que você deseja mostrar no slide, o meu eu coloquei 6.

7º O código destacado de azul, se refere a largura (width) e altura (height) do slide, caso não esteja ao seu gosto, só mudar os número para o tamanho desejado.

8º O código destacado de laranja se refere ao endereço do seu blog, que no caso você colocará o seu. 

     Atenção, só troque a parte destacada de laranja, nada de passar dai, isso é, caso você não tenha conhecimento em HTML. Então gostaram do tutorial? Espero que sim, agora é só comentar, e se usar só creditar.

Créditos: http://www.ecleticus.com/

Então pessol foi isso espero que tenham gostado e ah se ficaram com alguma dúvida deixem aqui nos comentários que tentarei ajudar. Beijo Beijos e até a próxima.