Menu de postagens recentes em miniatura para blogger

17:20:00

Menu de postagens recentes em miniaturas para blog | Um Container | Alef Cauê

Eu vivia procurando uma forma de deixar o blog com a minha cara para que ficasse exatamente como eu gostaria de -lo todos os dias, para entrar e me perder na quantidade de conteúdo que tem nele, sem ter que simplesmente me cansar do layout ou aparênciaMenu de postagens recentes em miniatura sempre foi algo que eu precisava e que eu achava necessário para o blog. Acho que eu  mudei de template umas oito vezes em menos de um ano e tive que aprender a me virar no HTML. O meu maior problema era encontrar um menu suspenso que mostrasse as postagens mais recentes em linha reta, na primeira parte do blog e eu passei muito tempo procurando para achar o formato que eu queria. Estou usando este código a um certo tempo já e além de ser muito leve para o blog, ele pode ser facilmente instalado no blogger de uma forma mais simples do que você pode imaginar.

Menu de postagens recentes em miniaturas para blog | Um Container | Alef Cauê

Menu de postagens recentes em miniatura para blogger parece não ser algo fácil de colocar ainda mais quando usamos templates grátis que as vezes não deixam esses códigos se encaixarem. O melhor desse código é que pelos testes que eu fiz em mais ou menos doze templates é que ele pode acabar funcionando em todos (ou quase todos). Eu sempre senti essa necessidade de ajudar a todos e muitas pessoas vem me pedindo para ajuda-las, mas como estou sem um computador no momento (isso fica para a próxima postagem) eu acabo ficando sem ter como ajudar a cada um, mas nada me impede de ajudar a todos de uma forma única com que colabore também para o blog. 


Vá no Painel do blogger >Layout> Adicionar Gadget > HTML/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>

Não posso dizer que esse código é 100% mutável, mas há coisas que podemos mudar pra deixar da forma que melhor se encaixe no blog de cada um. A parte destacada "numposts =1"  está indicado que mostrará as postagens recentes mas se quiser mudar isso, recomendo que coloque o numero "3" que vai colocar sua miniatura para começar a mostrar desde três postagens pra trás.  Se quiser mudar a quantidade de miniaturas que vai aparecer, vá em "4&orderby" e mude o numero "4" pelo numero que representa a quantidade de miniaturas que você quer. O tamanho dessas miniaturas também podem ser mudadas, basta achar essa parte "var bsrpg_thumbSize = 255" no final do código e mudar o "255" pelo numero maior ou menor, dependendo do tamanho da miniatura que quiser.


Espero que essa postagem, ajude a muitas pessoas que querem muito colocar esse menu no blog e que não conseguiam porque não achavam o código ou porque colocavam e não sabiam como deveriam mexer nas partes dele para deixa-lo parte do template. Quero lembrar também que sempre que precisarem de mim, podem me enviar e-mail com qualquer coisa que precise dizer, seja uma critica para o blog (construtivas, por favor) ou seja apenas um pedido de ajuda, se eu souber ajudar e souber que eu consigo ajudar, nada irá me impedir de fazer isso.



Siga o blog e receba tudo em primeira mão. 
Me leve com você 

 FACEBOOK | INSTAGRAM | TWITTER | CANAL 

VOCÊ TAMBÉM PODE GOSTAR

13 comentários

  1. Olá!!
    Vou colocar no meu blog. Foi o tutorial mais prático que eu já vi!

    Beijão
    Leitora Cretina

    ResponderExcluir
    Respostas
    1. Você sabe que eu fico muito feliz em saber isso já que sempre que eu procuro algum tutorial para fazer uma mudança no template acabo me perdendo pela forma que as pessoas colocam. Nem sempre é de forma mais simples e pratica. Eu amo o seu template, é clean e funcional, vai ficar mais lindo. Adorei a sua visita.

      Excluir
  2. Que arraso! Estou planejando mudar algumas coisas no ,eu layout, me ajudou muito, super pratico! Obrigadão <3 Sucesso!

    http://sariandoporai.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Tenho toda a certeza que vai ficar mais lindo. Achei seu template bem clean e isso conta muito para um blog. Já coloquei ele nos meus favoritos para acompanhar sempre. Adorei a sua visita e espero te ver aqui mais vezes.

      Excluir
  3. Respostas
    1. Own Esther (amo demais seu nome, é algo bem mistico), eu fico muito feliz que tenha gostado. Caso tenha alguma dúvida ou precisar de algo que eu possa ajudar, pode me enviar um e-mail. Um grande beijo.

      Excluir
  4. Olá Alef, tudo bem?

    Muito boa as suas "Dicas para Blog", principalmente para quem está começando. Eu entrei no mundo da blogosfera tem dois meses e estou nessa fase de adaptações de layout, super normal. Parabéns pelo seu blog que além de bonito visualmente, possui conteúdos que me identifico bastante. Ganhou um fã. Um grande abraço e fica com Deus.

    ResponderExcluir
    Respostas
    1. Danddy, muito obrigado pelo seu carinho. Agradeço do fundo do meu coração. O inicio é assim mesmo, mas depois que você consegue montar seu layout, é só alegria. Qualquer dúvida que você tiver, se precisar de ajuda, pode me mandar um e-mail que eu tento te ajudar. Um grande beijo.

      Excluir
  5. Não deu certo!!
    Na verdade, nenhum código que tenho tentado dá certo. Esse código é automático ou eu tenho que inserir manualmente os links das postagens?

    Bjs,
    Denise

    ResponderExcluir
    Respostas
    1. Denise, o código é pra ser automático, você apenas coloca ele e pode mudas as partes que estão em vermelho, mas eles carregam as postagens automáticas. Qualquer dúvida, me manda um e-mail que eu tento te ajudar. Um grande beijo.

      Excluir
  6. Nossa! MUITO OBRIGADA! Estava tentando colocar isso há tempos no meu blog mas sempre dava erro.
    <3
    http://blogtatitavares.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ai que bom que eu pude te ajudar com isso. Espero que tenha dado certo pra você. Beijos.

      Excluir
  7. Olá tudo bem? Cheguei aqui no blog através de uma pesquisa pra colocar as postagens recentes no blog, e percebi que seu layout é o mesmo que eu uso, além do tutorial acima poderia me dar uma força, notei que no seu layout você retirou aquele slide gigante que vem nele como conseguiu? Já procurei no html mais não encontrei poderia me dar uma ajuda? assim posso colocar igual a do tutorial menor e em quadrados acho mais bonito! :)

    ResponderExcluir

Deixe o seu comentário, não esqueça do seu email e do seu blog!