Slide com postagens recentes no Blogger

Gente não sei se ja perceberam, mas o blog está com um design renovado! Foi eu quem ajeitou, mas isso não quer dizer que não tive ajuda rsrsr. Esse slide na parte de cima peguei do Tutorial do blog Ecleticus que traz vários outros tutoriais como esse :))) E se você quiser também colocar no seu blog ta aí embaixo bem direitinho ;)

     Bom pessoal, uma coisa que muitos vem procurando na blogsfera é como fazer um slide para blogger, aqueles que agora estão criando um blog com estilo revista, sempre fica a procura de um, existe vários tutorias ensinando, mais sempre uma parte que nem todo mundo adora, que é ta trocando direto as imagens do slide, então você já viram o slide do Ecleticus, ele funciona automátcamente, eu não preciso tá direto trocando as imagens, assim que faço algum post novo, ele vai aumáticamente por slide, maior barato isso  né? Então, decidi mostrar esse tutorial aqui pra vocês, espero que gostem e que agradem a todos. E é claro, só não esqueçam de comentar e é claro creditar. Então, let's go.

   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:100px auto 50px auto;
 width:618px; /* Make sure your images are the same size */
 height:246px; /* Make sure your images are the same size */
}
.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='http://catur-at-abu-farhan.googlecode.com/svn/trunk/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="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;   //number of posts
 var image_height = 246; //image height
 var image_width = 618;  //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 post 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. 
      Atenção, só troque a parte destacada de laranja, nada de passar dai.
 Então gostaram do tutorial? Espero que sim, agora é só comentar, e se usar só creditar.