Tutorial : Slide no blog dos posts recentes aparecem automaticamente

(http://www.kawaii-world.net/2013/07/prazer-ayumi-ilustracoes-larguinhas.html)

Hooooy minhas bolachas =3 *Desvia de cadeira* Eu sei que fiquei muito tempo fora. Bem e com as aulas de volta, eu fui aproveitar as minhas férias um pouco ...

Então para compensar o meu sumiço, irei ensinar a colocar um slide no blog tipo o do SD, que os posts mais recentes do blog apareceram automaticamente no slide.

Antes os devidos e merecidos créditos :

Vá no modelo do seu blog, e pesquise pela seguinte tag :

</body>

Acima dela cole este código, que é o arquivo JQuery que fará o slide funcionar:

<!-- 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>

Agora vamos aplicar os estilos ao slide. Pesquise pela tag :

]]></b:skin>

E acima dela cole este 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:20px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDSmutsTNtp097m5hoF-33PE_o8LdnPqrgmeNxKdHYtuzxPYD_FTGnLL1Fz8et09P9rfSJpxQtintlxqFPi0WPhw8FEb7ZJGnDEQH2L8nAcJBwfGQxKVvJpOp8AXZlpRS0_QiNxWskUeo/s1600/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;
}

Atenção para as partes marcadas no código: elas indicam o que pode ser personalizado em termos de cores, tamanhos, imagens etc.

Importante:

Você pode alterar a altura e a largura que o slide terá. Lembre-se que o ideal é que sejam números iguais para não deformar as imagens.

Depois de inserir os códigos em seu blog clique em Salvar modelo. Não adianta visualizar pois nada aparecerá. Falta incluir o gadget, a não ser que coloque-o antes para editar e visualizar até que o satisfaça.

________________________________________________

Para fazer aparecer em seu blog depois de salvar clique para fechar o código-fonte e selecione a aba Layout. Na página que abrir clique em Adicionar um gadget e escolha a opção HTML/JAVASCRIPT. Na janela que abrir cole este código:

<div class="slider-wrapper theme-default"><div class="ribbon"></div><script src="http://teste.bymetemplates.zip.net/galleryposts.js"></script>

<script>

var numposts_gal = 6;   //number of posts

var image_height = 246; //image height

var image_width = 618;  //image width

</script>

<script src="http://ENDEREÇODOBLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>

</div>

Onde está 

var numposts_gal = 6;   //number of posts 

O número 6 são o tanto de postagens que quer que apareça no slide.

E onde está 

var image_height = 246; //image height
var image_width = 618;  //image width

Procure deixa o mesmo número que está no fim do código no modelo. Ou seja, height e width , altura e largura.

Onde está :

"http://ENDEREÇODOBLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"

Coloque o link do seu blog, por exemplo :

"http://sweetdreamsoficial.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"

________________________________________________

Espero ter ajudado a vocês, beijoos =3