TUTORIAL : Slide de Postagens Recentes em Miniatura

by - 01 setembro


Hey guys , estou um pouco sumida né? ando muito sem tempo, e com encomendas para entregar o que acaba me deixando bem cansada e quando tenho um tempinho já quero dormir, confesso que andei pensando ate em abandonar o blog esses dias, mas já passou. Ufa!
Hoje vim ensinar UM MEGA tutorial de "slide" de postagens recentes para o blog, diferente desses mais comuns, acho que você já viram em alguns blogs por ai, ele fica assim, como em quadrados separados, eu chamo de Grid! com esse "slide" você pode exibir quantas postagens quiser no blog, e você pode decidir entre mostrar as ultimas postagens, ou que o código selecione entre as postagens quais ficaram aparecendo lá.
Se você souber mexer com css você pode deixar redondinho como o do blog Não Provoque
EFEITO OPACIDADE QUANDO O MOUSE ESTÁ NA FOTO
Olhem que lindo fica <3 , Tem como fazer de muitas maneiras, com códigos adicionados no HTML do blog, CSS , a baixo de algumas tags. Mais isso deixaria a instalação dele mais complicado para a pessoas que não manjam muito disso né? por isso decidi ensinar a maneira mais fácil de fazer e editar , pois vou deixar tudo explicadinho do lado e não iremos mexer dentro do código do seu layout  ! vamos aprender?

Vá no Painel do blogger >Layout> Adicionar GadgetHTML/JavaScript

No Gadget Adicione o Código a baixo :
<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:70px;
width:1300px; ==LARGURA DO SLIDE==
float:center; ==POSIÇÃO DO SLIDE==
clear:both;
}

.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 10px 15px 0;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background:#000; /*==COR AREA DE TITULO==*/

display: block;
clear: left;
font-family: 'georgia', cursive; ==FONTE DO SLIDE==
font-weight:200;
text-transform:uppercase; /*==TDS LETRAS MAIÚSCULAS==*/
font-size:13px; /*==TAMANHO DO TITULO==*/
line-height:1.3em;
height:50px;
position: absolute;
bottom:0%;
text-align: center;  /*==POSIÇÃO DO TITULO==*/
color:#fff; /*== COR DO TITULO==*/
width:95%;
padding:6px;
word-wrap: break-word;
overflow:hidden;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img { 
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8; 
}
/*FIM CSS FOTOS*/
</style>
<script>
//byjana
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from poderondesign">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<div class="bs-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
hoje = new Date()
numposts =1
var bsrpg_thumbSize = 255;  

var bsrpg_showTitle = true;
document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>

Onde tem as partes indicadas em vermelho é onde você pode alterar ! 
A parte destacada "numposts =1 "  está indicado que mostrará as postagens recentes e a
 quantidade de miniaturas . quando não mudar por ele, tente no 4&orderby que vai, troque o 4 por o numero que de miniaturas que quiser!
 Mas se preferir que o gadget as postagens aleatórias  substitua essa parte por : numposts = (1 +(hoje.getSeconds())) .
Onde tem : var bsrpg_thumbSize = 255;  É  o tamanho das fotos .
As imagens do layout usado como modelo é um que estou fazendo e estará disponível para compra na site da Poderon Design !
Espero que tenham gostado do tutorial e deixem seus blogs lindos ! 
A cópia total ou parcial dessa postagem é proibida.
Me encontre:

             Facebook|Fanpage|Instagram|Twitter|ask

Você também poderá gostar

98 comentários

  1. Já testei no meu blog acho que vai ficar legal, sempre tentei colocar mais nunca consegui, só uma pergunta onde defino a quantidade de slides no teste que fiz apareceu uns 10 post? Beijos

    www.paularibeiromoda.com.br

    ResponderExcluir
    Respostas
    1. oi paula! já atualizei no post mostrando como ajeitar! tenta e me diz!

      Excluir
  2. o meu também aconteceu isso. apareceu 10 caixinhas com posts. tentei mudar e não deu certo

    www.comoserdiva.com

    ResponderExcluir
  3. Futuramente vou querer isso. heheheh Ameiii. *-*
    Adoro seu blog lindona.
    Vc esta na lista dos meus favoritos.

    ResponderExcluir
    Respostas
    1. uhuuu! fica lindo né?! obg amoreeeeeee <3

      Excluir
  4. Boa tarde!! ate que nao e dificil..vou fazer no meu tb!
    obrigada pelo tutorial!
    besos y buena semana

    www.cosasde-ladydiva.com

    ResponderExcluir
  5. Serio, muito obrigada, estou há um seculo querendo botar isso no meu Blog hahaha ♥ Se quiser visita lá. www.aalamari.blogspot.com.br

    ResponderExcluir
  6. Estava procurando esse tutorial a muito tempo mesmo! Obrigada, você me ajudou muito. Já está lá no blog. Seu blog é lindo! Sucesso e obrigada mais uma vez <3

    Beijinhos com açúcar! Camila lá do http://mypaperskies.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. oi linda! fico tão feliz em ter ajudado!

      Excluir
  7. Amei o tutorial <3
    http://toobege.blogspot.com.br/

    ResponderExcluir
  8. Genteeeee, eu tava louca procurando por esse tutorial, mas nunca dava certo. Amei esse e já coloquei. Obrigada <3

    http://prazerjessica.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. olhei lá no teu blog e ficou tudo lindo!

      Excluir
  9. Recém que fui conhecer teu blog Jana!! E ameiiii, parabéns pelo trabalho, mesmo! Sucesso sempre!

    www.gabitarabal.com

    ResponderExcluir
    Respostas
    1. Ah que linda! obg, esses dias estava visitando o seu também e gostei muito !

      Excluir
  10. Meninaaaaa amei os post bem explicadinhooo vou tentar bjoooooos

    http://divinabelezamulher.blogspot.com.br/

    ResponderExcluir
  11. Meninaaaaaaaaaa, amei o post, me ajudou muito, estava procurando isso esses dias, mas não encontrei em lugar nenhum :( Você me salvou o/
    Mas eu tenho uma duvida, como faz para ele ficar em formato de retângulo, como a gente sempre vê no blogs? Obrigado :)
    http://vaidadeparatodas.blogspot.com.br

    ResponderExcluir
    Respostas
    1. é dificil de achar ensinando mesmo! por isso vim mostrar pra vocês <3

      Excluir
  12. Adorei quero muito mudar meu lay, justamente pondo esse eslaid, obrigado aorei teu post já seguindo sucesso flo!!,
    http://polianehenrique.blogspot.com.br/

    ResponderExcluir
  13. Aiw Jana que tutorial Perfeito, Amei demais *-*
    Fica um amor no Blog nê?!
    Beijos
    http://www.omelhordemim.com/

    ResponderExcluir
    Respostas
    1. oi linda! vai te ajudar muito né! é bem legal isso!

      Excluir
  14. Nossa quue perfeito ,voou fazer no meeu :) Beijos , Evelyn :D

    ResponderExcluir
  15. Oi Jana, o post é explicadinho muito fácil. Pena que não funcionou no meu blog, é bug do meu lay eu acho. Depois vou tentar resolver. Esse post seu é super de utilidade pública!

    Beijinhos
    www.carolneumann.com.br

    ResponderExcluir
    Respostas
    1. lindona ! deve ser algo mesmo ! tenta de novo , fica lindo no blog !

      Excluir
  16. Oi Jaaana!!
    Eu queria fazer isso mas meu blog já tem slide, dai eu iria desconfigurar tudo :((( mas quero ver se no futuro consigo trocar um pelo outro!
    Beijoo
    www.vitaminatrendy.com

    ResponderExcluir
  17. Aeee deu super certo! *-* supeeeeer amei <3

    Obrigada pelas dicas!

    Beijos

    www.todaonca.com.br

    ResponderExcluir
  18. Jana, olha o meu como ficou :( Ficou muito afastado do menu, e muito em cima da parte de post.
    Pode me ajudar como concerta?
    http://testemodahoje.blogspot.com.br/

    ResponderExcluir
  19. hahahah fiz no meu Jana!!! Adorei sua linda!

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

    ResponderExcluir
  21. Seu post é muito útil, até compartilhei no meu blog ♥
    Já faz um tempinho mas só agora tive um tempinho de avisar ^-^ Bjs
    http://www.adolecentro.com/2014/10/os-melhores-links-de-setembro.html

    ResponderExcluir
  22. Jana que post ótimo! Você sabe me dizer como colocar um efeito rotativo, ou até mesmo o da Paula Buzzo que o nome do post só aparece e fica em hover quando o cursor esta em cima da foto?

    ResponderExcluir
    Respostas
    1. dá pra fazer tbm, porem notei que as imagens perdem a resolução :/

      Excluir
  23. Como eu mudo a cor da área do título?

    ResponderExcluir
  24. Só eu que não consegui? :'( Fiz tudo certinho mas no meu blog não aparece nada! Já tentei vários tutoriais, e apesar do seu estar mais explicado e mais fácil nenhum aparace :/

    ResponderExcluir
  25. Obrigado janaina aqui deu super certo. Vou ver se consigo retirar os espaços superiores e inferiores, gosto tudo juntinho, seu eu conseguir deixo ele e coloco os créditos. bjos

    ResponderExcluir
  26. Ei tudo bem? Amei o tutorial, estava procurando um deste tipo (que desse certo!). Só queria saber se há como fazer alguma modificação no código para que o título da postagem apareça em fade, como no seu. Se puder me dar uma ajuda, muito obrigada desde já! : *

    ResponderExcluir
    Respostas
    1. olá amore, tem sim, me manda email que te mando o codigo!
      janainapoderon13@gmail.com

      Excluir
  27. Mds, SABE QUANTOS MIL ANOS demorei para encontrar aqui? hjahahaha moça! Obrigado mesmo, de coração. Ajudou meu blog ficar mais LINDO <3

    ResponderExcluir
  28. Esse post salvou meu layout :) :) Estava procurando esse algo assim desde quando comecei a fazer o layout do blog.
    Janaína, poderia explicar como faz para ele ficar com efeito igual ao do seu?
    Bjuss
    Obrigada e parabéns pelo blog :)

    ResponderExcluir
  29. oii jana! amei o tutorial, me ajudou muito!
    Eu só gostaria de saber se tem como deixar as imagens redondas?

    ResponderExcluir
  30. Gostei muito....
    Meu blog é o www.bandas.mus.br e precisava muito desse código!

    Deixa eu perguntar mais uma coisa, será que é possível colocar para aparecer por categoria/marcadores?

    ResponderExcluir
  31. Não sei nem como agradecer! Fazia tempo que eu procurava mas estava procurando errado rs, obrigada!!!!

    ResponderExcluir
  32. Jana! Obrigada por isto! Mas tenho uma dúvida: dá para pôr este slide debaixo de cada post (de preferência só aparecer quando clicarmos no post para o ler todo)? Era capaz de ficar giro :D

    Beijinhos de Portugal :*

    ResponderExcluir
  33. Conseguir, muito obrigada.

    www.meninadofuturo.com.br

    ResponderExcluir
  34. Segui seu tutorial e amei :)
    Parabéns pelo Blog :)

    Beijos da Rabêlo :*
    Deixe Apenas Fluir

    ResponderExcluir
  35. Jana meu amor, adoro esse tutorial e uso ele a bastante tempo no meu blog. Queria saber se tem como deixar o slide redondo ?
    Beijão <3

    http://cafeamargoblog.blogspot.com/

    ResponderExcluir
  36. Adorei o tutorial ,foi o unico que consegui fazer! mas no meu blog ficou mais para a direita, tem como centralizar?

    http://filosofandoentrela.blogspot.com.br/

    ResponderExcluir
  37. Olá querida.
    Amei o slide! Vou testar no meu blog e volto pra contar!

    Obrigada!

    Luciana Pessoa
    www.decoralternativa.com.br

    ResponderExcluir
  38. Oi Jana, testei no meu, deu certo, adorei esse post, obrigada! *-*

    https://thecorbal.blogspot.com.br/

    ResponderExcluir
  39. Oh jana.Boa noite! como você fez para deixar o formato do slide arrendonado.como o seu temcomo você dizer por favor Help me!

    ResponderExcluir
  40. flor, eu usei o seu código em praticamente todos os blogs que eu tive( e te garanto que é muito útil)!
    Eu tava vasculhando o meu face e eu achei uma postagem que tem esse mesmo tutorial(ou muito parecido) e você disse que a copia total ou parcial é proibida e por isso eu vim aqui avisar:3
    o link do blog: http://taiinara-oliveira.blogspot.com.br/2015/06/repaginando-o-blog-post-recentes.html
    Eu tenho quase certeza que é o mesmo ( seria muito complicado checar o código inteiro)

    tchau :3

    http://exalandopurpurina1.blogspot.com.br/

    ResponderExcluir
  41. janaaaaa, não dá certo de jeito nenhum :( Meu modelo base é o maca d'água, é por isso?

    ResponderExcluir
  42. lindo, lindo, lindo..... estava muito procurando esse tutorial, super obrigada por disponibilizar!

    http://believetempodeacreditar.blogspot.com.br/

    ResponderExcluir
  43. Oi acabei de conhecer seu blog e amei. Estou personalizando meu blog sozinha e queria muito esse gadget, só que os outros tutoriais que vi tinha que mexer no html e fiquei meio insegura rs. Se não for pedir muito faz um tutorial de como por assinatura personalizada tipo a sua :D

    ResponderExcluir
    Respostas
    1. OI LINDA! proximo post então ensino isso!

      Excluir
  44. Como faz pra aumentar a largura das imagem e não do slide?

    ResponderExcluir
  45. Muito obrigada, era tudo o que eu precisava!

    Beijos,
    Rafaella.

    http://imperioretro.blogspot.com.br

    ResponderExcluir
  46. Querida, funcionou! Mas ele não está ficando acima das postagens, está ficando em cima do meu perfil, ou seja do lado esquerdo da tela.
    Como faço?

    ResponderExcluir
  47. JANAAAA, TU É FODA MIA FIA, TXI LOVU ♥♥♥♥

    ResponderExcluir
  48. JANI...Coloquei no meu blog, só aparece as postagens recentes queria que mostra-se as mais antigas. Como faço pra mudar ???

    ResponderExcluir
    Respostas
    1. http://vitoriabarbosablog.blogspot.com.br/

      Excluir
  49. Tô tentando colocar ele na parte superior do blog e não aparece :( o que faço?

    Beijos,
    www.destemidagarota.com

    ResponderExcluir
  50. Adorei o tutorial tentei tantos outros e não consegui e finalmente encontrei seu blog e segui seu tutorial,beijos linda!

    ResponderExcluir
  51. Janaina, acabei encontrando esse post de um blog quase identico ao seu! http://heydezoito.blogspot.com.br/2015/04/tutorial-slide-de-postagens-recentes-em.html?showComment=1443136224593#c1375010395190736013

    ResponderExcluir
  52. Queria alterar o tamanho das miniaturas e não consegui, Como faz?

    ResponderExcluir
  53. Olá.

    fiz e ficou perfeito, mas queria diminuir a area preta onde fica o titulo como faço?:

    ResponderExcluir
  54. Adorei !
    dezesseisdiasdepois.blogspot.com

    ResponderExcluir
  55. E se eu quiser que apareça os posts de um determinado marcador, tem como?

    ResponderExcluir
  56. E se eu quiser que apareça os posts de um determinado marcador, tem como?

    ResponderExcluir
  57. Como que eu faço para centralizalo? Pois não estou conseguindo :/
    http://deixagata.blogspot.com.br/

    ResponderExcluir
  58. Ótimo tutorial! No meu deu certinho! Quer dizer... Quase! A qualidade das minhas imagens do blog são ótimas por sinal, pena que quando coloco esse slide, as imagens perdem a qualidade ://

    Fique com Deus!

    ResponderExcluir
  59. obrigada pelo tutorial. ficou perfeito. seria possível fazer ele mudar os posts automaticamente?

    ResponderExcluir
  60. Olá Janaina,
    Eu gostaria de uma dica. Para que ao invés das postagens recentes apareçam as postagens de uma determinada categoria, qual mudança deve ser feita?

    ResponderExcluir
  61. Olá, bom dia!
    Jan, muito obrigada pelo tutorial, me ajudou bastante!
    Um abraço, fique com Deus
    http://estaimerecidagraca.blogspot.com.br/

    ResponderExcluir
  62. Olá Janaína! Adorei o seu post, me ajudou demais, sou meio lesada pra mexer em códigos html, então fujo deles..Rs. Facilitou muito, obrigada!

    ResponderExcluir
  63. Deus abençoe!!! Muito obrigada <3

    http://akayjk.blogspot.com/

    ResponderExcluir
  64. Ficou muito bom, além de fácil instalação e customização, e bem melhor que o estilo redondo que eu vinha usando no +40BC.
    Grato pela dica!

    www.mais40bemcuidado.com.br

    ResponderExcluir
  65. Estou usando no meu blog e já creditei. Muito obrigada...amei!

    ResponderExcluir
  66. Olá, gostaria de saber se tem como fazer em wordpreess? Beijos

    ResponderExcluir
  67. Muito obrigado, ajudou bastante, já estou usando no meu...
    Já começei a seguir se blog, beijos e sucesso pra você!
    http://girlswholoveparis.blogspot.com.br/

    ResponderExcluir
  68. Olá jana tudo bem?? . Nossa que legal esse post , adorei e o que é melhor consegui utilizar!!!!!!! Estava atras disso, mas não encontrava. Jan preciso de uma ajida tem como escolher a foto que vai aparecer na miniatura ?? como se faz ?
    https://pequenosinfinitosz.blogspot.com.br/#uds-search-results

    Obrigada por ensinar!!

    ResponderExcluir
  69. Amei, super deu certo aliás foi o único q deu certo no blog q estou editando obrigadaaaa

    ResponderExcluir
  70. Olá, ficou tudo certinho. Mas ao invés de quadrado, apareceu redondo. :/

    ResponderExcluir

Instagram