06 agosto, 2013

Tutorial : Slide no blog dos posts recentes aparecem automaticamente


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(http://1.bp.blogspot.com/-c_huDpWSgJM/UWIYlbuqZzI/AAAAAAAAFAE/1bEsEghvU-E/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

10 comentários:

  1. Muito bom o tutorial! Eu gostei muito quando vi aqui no seu blog, e parece que não pesa muito porque aqui carrega seu blog normal. : )

    mundodeliina.blogspot.com.br

    ResponderExcluir
  2. Estava mega procurando esse tutorial, tinha visto em um lugar uma vez, e achei lindo, mas não estava achando :( se já não tivesse terminado meu layout com certeza usaria ;(! Mas enfim, já favoritei para o próximo lay! Beijos
    pandalland.blogspot.com

    ResponderExcluir
  3. Estava a procura desse tutorial. Acho que ele é perfeito, mas pena que é muito grande até meio cansativo.
    Jéssica
    donaurbana.blogspot.com

    ResponderExcluir
  4. Nossa, super adorei esse tutorial, é mega útil! Deixarei até salvo aqui pra usar quando precisar, ele é realmente muito bom! *-* Beijos. ^^

    Rediscovering Dreams

    ResponderExcluir
  5. Dessa das postagens aparecer automaticamente eu não sabia, mas por enquanto não curto slide no meu blog. Mas eu super gostei! :D
    Blog: http://ninexcebolitos.blogspot.com.br/
    Pessoal: http://warz-one.blogspot.com.br/

    ResponderExcluir
  6. Fica ótimo, adorei o tuto, super útil <3
    xoxo
    http://www.universovanguarda.com/

    ResponderExcluir
  7. Ficou muito bonitinho!!! Quero ser afiliada, pode ser?
    www.s2nopiquedamoda.blogspot.com.br

    ResponderExcluir
  8. Este comentário foi removido pelo autor.

    ResponderExcluir
  9. Sou muito fã dos seus tutoriais, parabéns! coloquei no meu blog credito de agradecimento porque não lembro o que eu peguei aqui, mas sei que tive uma boa base aqui. Obrigada e continue assim.. <3
    www.entao-confesso.blogspot.com

    ResponderExcluir