Blogger: Miniaturas dos últimos posts | Follow your dreams
Blogosfera

Blogger: Miniaturas dos últimos posts

Oi pessoal, como estão?

Esse é um dos tutoriais mais pedidos por vocês, inclusive lá no grupo do Facebook (se você ainda não participa, vem correndo! :D), então, antes tarde do que nunca, cá estou eu com o tutorial.

Miniaturas dos ultimos posts 2

 

  • 1 – Em MODELO > Editar HTML pesquise por ]]></b:skin> e acima dele cole:

/* Miniaturas dos últimos posts
———————————————–*/
.bsrp-gallery {
width:100%;
clear:both;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 0 0 0;
text-decoration:none;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
}
.bsrp-gallery .bs-item .ptitle {
background: #b8d8dd;
display: block;
clear: left;
font-size: 16px;
text-transform:uppercase;
line-height:1.3em;
font-weight:300;
height: 48%;
width:79%;
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 14px 13px;
padding:60px 10px 20px 10px;
color:#555;
word-wrap: break-word;
overflow:hidden;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
}
.bsrp-gallery .bs-item .ptitle:hover {
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity:0.9;
opacity:0.9;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
}
.bsrp-gallery a img {
background: #fff;
float: left;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
}
.bsrp-gallery a:hover img {
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
}

– Em vermelho está a cor do fundo que aparece quando o mouse está em cima da miniatura. Modifique se desejar.

 

  • 2 – Em LAYOUT, adicione um widget HTML/Java Script e dentro dele cole o seguinte código (deixe o título em branco):

<script>
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = [‘<div class=”bsrp-gallery nopin” >’];
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 : ‘https://lh5.googleusercontent.com/-iaKQ-tiz6KE/VPyO2GnMRXI/AAAAAAAADrc/si7De0SoFO0/s300/semimagem1.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 = 3;
var bsrpg_thumbSize = 220;
var bsrpg_showTitle = true;
document.write(“<script src=\”http://www.ENDEREÇO-DO-SEU-BLOG.com.br/feeds/posts/default?start-index=”+numposts+”&max-results= 3&orderby=published&alt=json-in-script&callback=bsrpGallery\”><\/script>”);</script>

– Em vermelho está a URL da imagem padrão, que aparece quando o post em questão não tem imagens. (veja modelos gratuitos abaixo)
– Em azul {duas vezes} está o número de miniaturas a serem exibidas.
– Em verde está o tamanho da miniatura em pixels.

 

IMAGEM PADRÃO

Para a imagem padrão fiz 8 modelinhos que podem ser baixados gratuitamente. Basta hospedar no Picasa Web de vocês, clicar com o botão direito e copiar a URL, depois substituir pelo código informado no passo 2.

Miniaturas dos ultimos posts 1

DOWNLOAD

 

OBSERVAÇÃO IMPORTANTE:
– Para esse tutorial funcionar, seu blog precisa estar público e com o Feed ativo.

 

Espero que ajude, qualquer dúvida comente! Emoji5

Tags : Blogger

94 Comentários

    1. Oi Marina, tenho isso salvo há anos e não sei de onde é, mas se você souber quem criou o código inicial pode me informar por gentileza o link que eu coloco no post, como já fiz em outros tutoriais.
      Também se possível me envia o link do seu blog, adoraria saber quem você é.
      Bjs

    1. Karol, eu consegui fazer com que aparecesse mais ele esta aparecendo depois dos comentários, oque eu faço? Eu uso o seu template petit formal… Tem como arrumar?

  1. OIIII, AMEI O TUTORIAL!!!!
    MAS, O MEU APARECE NO SIDEBAR, TENTEI ARRUMAR, MAS NÃO CONSEGUI.
    EU QUERIA SABER, SE A POSTAGEM NÃO TIVER IMAGEM, TEM COMO PERSONALIZAR UM POR UM, OU NAO ???
    QUERIA MUITO ESSE TUTO!!!
    E VOCÊ FEZ, AIIIII QUE FOFA!!!
    E TAMBÉM, JÁ PEÇO DESCULPAS POR INCOMODAR, MAS QUERIA SABER, COMO VOCÊ FEZ ESSE FORMULÁRIO DE COMENTÁRIO???
    MUITO OBRIGADA MESMO!!!!
    VOCÊ É MUITO TALENTOSA, CONTINUE ASSIM.

    1. Oi Luzia, obrigada! Usei um plugin pra fazer o formulário, só disponível para WordPress. No Blogger já existe o formulário padrão que é em formato de widget, mas é possível colocar ele em uma página, dá uma pesquisada que já existem tutoriais ensinando a fazer isso.

      Não é possível personalizar a imagem padrão para cada post. Para isso seria melhor você adicionar a imagem no post, então ela aparecerá nas miniaturas.

      Se o widget está salvo na sidebar, ele vai aparecer na sidebar mesmo. Você precisa (em LAYOUT) arrastá-lo para onde deseja que ele fique e salvar.

      Um beijo!

  2. Oi Karol, tudo bem?
    Então, eu consegui fazer tudo direitinho, mas ao invés de aparecer embaixo das postagens, ela aparece no final do blog.
    É o único problema que apareceu rs obrigada por esse tutorial, eu precisava de um assim! *-*
    Beijos e bom final de semana! ♥

    1. Oi Julia, você entendeu errado, pois esse tutorial não é pra aparecer no fim de cada post, é pra aparecer onde você instala o widget.
      Bjs

    1. Ah, tem outra coisa também…

      Quando eu clico em cima, a bolinha não fica centralizada.

      E qual item do código eu altero isso?

      Mudei o ‘height: 48%;’ para ‘height: 35%;’ pois não estava uma bolinha, e sim uma coisa oval… mas com essa alteração deu certo…

      Mas mesmo assim não consigo centralizar.

    2. Oi Daniela, você entendeu errado, pois esse tutorial não é pra aparecer no fim de cada post, é pra aparecer onde você instala o widget.
      Bjs

    1. Nathalia eu consegui colocar espaço no meu da seguinte forma, abaixo de:
      .bsrp-gallery .bs-item a {
      Adicionei:
      padding-left: 15px;
      Mas ai tem que mudar a
      margin: 0 0 14px 13px;
      que esta na parte de
      .bsrp-gallery .bs-item .ptitle {
      e ir ajeitando ate o houver se ajustar como coloquei padding-left: 15px. meu margin ficou 0 0 14px 5px; – Não sei se isso ajuda.

      Karoline eu não consigo centralizar, como posso fazer ?

    1. Oi Lícia, impossível eu te dizer porque você não conseguiu, principalmente sem saber o erro, podem ser mil motivos, você pode ter cometido algum errinho em algum dos passos.. Se não houver um erro específico fica complicado :/
      Bjs

    1. Se você fez tudo corretamente e seu blog está público com feed ativo mas mesmo assim não funcionou, não tenho como te ajudar :/

    1. Beatryz, tem sim, o número de posts existentes não pode ser menor do que o número de posts configurado no código (no passo 2 desse tutorial), caso contrário as miniaturas não vão aparecer.
      Bjs

  3. Karol, desculpa está pertubando novamente! Mas é porque essa miniatura dos ultimos posts não fica logo a baixo das minhas postagens, elas ficam jogadas fora da área dos posts. O que eu faço?

  4. Olá karol muito bom esse tutorial, no meu blog eu já uso o slide automático que vc disponibilizou aqui, agora queria mudar para postagens recentes na horizontal e esse tutorial serviu direitinho rsrs :) mas gostaria de alterar a exibição das imagens para quadradas ao invés de redondas como faço? Poderia me ajudar nessa questão?

    1. Oi Laila, é só você remover esses três códigos (que aparecem várias vezes) do passo 1:
      border-radius:200px;
      -moz-border-radius:200px;
      -webkit-border-radius:200px;

      Bjs

    1. Bruna, esse tutorial não é pra ficar abaixo de cada postagem, isso se chama “posts relacionados”. Esse tutorial é outra coisa :)
      Bjs

  5. Oi, eu comecei a ler o blog a pouco tempo e já estou tipo mega apaixonada, porém tive um problema, as postagens ficaram uma abaixo da outra (ao invés de uma ao lado da outra), poderia me ajudar por favor? Obrigada!

  6. Oi Karol!! Tudo bom?? Então eu tentei fazer isso no meu blog só que ele não fica redondo ele fica quadrado e não consigo arrumar!! Voê poderia me ajudar por favor?! Obrigada desde já amo seu blog!

  7. Olá,
    Amo seu blog e os tutoriais, eu coloquei tudo certinho apareceu, ficou redondo , mas elas não saem da área do post, elas ficam em cima da área dos posts já tentei centralizar mas não consegui o que eu faço? queria 4 miniaturas em baixo no nome do meu blog, só que centralizado, e não só 3 em cima da área dos posts eu coloquei o gadget na área crosscol-overflow mas continua em cima dos posts poderia me ajudar?

    1. Giselly, nesse caso o problema é referente ao seu template e a disposição dos widgets dele, não tem nada a ver com o meu tutorial, por isso não posso te ajudar, infelizmente.
      Bjs

    1. Então provavelmente você fez algum passo errado, infelizmente não tem outra explicação, pois esse código funciona em qualquer template sem restrições.
      Bjs

  8. K. Eu fiz seu exatamente como você ensinou, consegui colocar a miniatura do blog, mas acontece que não está aparecendo as últimas postagens, acho que está aparecendo as postagens mais visualizadas, eu até tentei editar as últimas postagens para ver se conseguiria mudar alguma coisa, mas nada mudou, você pode me dizer como mudar isso? Eu estou usando o seu template Sweet Dreams.
    Desde já agradeço.

    OBS: Eu estou apaixonada pelo seu blog.
    Beijinhos violetas ^^

    1. Oi Brenda,
      O código está configurado pra mostrar as últimas postagens, nessa parte aqui oh “orderby=published” que seria “ordenar pela data de publicação”. Não sei porque pra algumas pessoas não mostra as últimas postagens :(

  9. Olá Karol tudo bom?
    Primeiro quero falar que seu blog é maravilhoso, e super útil, estou modificando todo o layout do meu blog, e assim que terminar irei fazer um post, e irei deixar seu blog lá, porque foi o que mais me ajudou a modificar tudo haha’
    Fiquei apenas com uma dúvida em relação esse tutorial, teria como eu colocar uma distancia maior entre as miniaturas? Para deixar mais centralizadas? Qualquer coisa entra no meu blog e ve se é possível!
    Um super beijo, e mais uma vez, parabéens, e sucesso ♥

  10. Oi! Já tentei colocar essas miniaturas e outras coisas que você ensinou, mas sempre que procuro por ” ]]> ” não aparece nada. Eu uso o template que você disponibilizou, o aquarela (estou apaixonada por ele inclusive hahah).

  11. Olá consegui colocar e ficou lindo , mas como faço para deixar um espaço maior entre eles ?
    E como faço pra eles ficarem retos sem interferir na minha foto ou minha foto ficar abaixo ? Obrigada , amo todos os seus posts ♥

  12. Oi, moça!

    Me ajudou muiitooo, coloquei e modifiquei conforme suas orientações a outros comentários para miniaturas quadradas.
    Obrigada <333

    Beijos!
    janeladesorrisos.com

  13. não estou conseguindo colocar faço tudo certinho e meu é publico eu uso o templte em duas cores que vc disponibilizou me ajude por favor #help

Deixe uma resposta