[Tutorial] Postagens recentes no topo do blog


Olá geeks, tudo bem com vocês?

Hoje eu vim trazer um tutorial sobre postagens recentes no topo do blog igual ao meu. Eu peguei ele do site da Elaine Gaspareto, mas editei. Então, se você quiser igual ao dela você pode vir aqui (www).

Já se quiser igual ao meu continue lendo.


Lembrando que todos os créditos vão para a Elaine, eu apenas editei para que ficasse do jeito que eu queria. 

Resolvi trazer este tutorial à pedido da Rebecca Castro pediu para mim. Se você quiser algum tutorial é só pedir, viu? 

Prestem bem a atenção no código à seguir:

<div class='widget-content'>
<style type="text/css">
/* CSS - Destaque de posts */
.bsrp-gallery {
width:100%;
clear:both;
margin-left:-100px;  /*--define o posicionamento à esquerda, altere se precisar--*/
padding-left:100px;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 0 0 15px;
text-decoration:none;
border-radius:130px;  /*--define o grau de arredondamento da imagem, --*/
-moz-border-radius:130px; /*--define o grau de arredondamento da imagem, --*/
-webkit-border-radius:130px; /*--define o grau de arredondamento da imagem, --*/
}
.bsrp-gallery .bs-item .ptitle {
display: block;
clear: left;
font-size: 18px; /*--tamanho da fonte--*/
font-family: Impact; /*--tipo da fonte--*/
text-shadow:#000 2px -2px 3px, #000 -2px 2px 3px, #000 2px 2px 3px, #000 -2px -2px 3px;
border: #FFFFFF dashed; /*--cor da borda pontilhada--*/
text-transform:uppercase; /*--coloca o texto em capslock, apague se desejar --*/
line-height:1.3em;
font-weight:300;
height: 50%; /*--define a altura da legenda --*/
width:81%; /*--define a largura da legenda --*/
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 14px 13px;
padding:60px 5px 20px 5px;
color: #FFFFFF; /*--cor da fonte do texto--*/
word-wrap: break-word;
overflow:hidden;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
border-radius:130px;
-moz-border-radius:130px;
-webkit-border-radius:130px;
}
.bsrp-gallery .bs-item .ptitle:hover {
filter:alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity:1.0;
opacity:1.0;
border-radius:130px;
-moz-border-radius:130px;
-webkit-border-radius:130px;
}
.bsrp-gallery a img {
background: #FFFFFF;
float: left;
border-radius:130px;
-moz-border-radius:130px;
-webkit-border-radius:130px;
-webkit-transition-duration: .90s;
-webkit-filter: grayscale(100%);
}
.bsrp-gallery a:hover img {
-webkit-transition-duration: .90s;
-webkit-filter: grayscale(0%);
border-radius:130px; /*--define o grau de arredondamento do fundo ao passar o mouse --*/
-moz-border-radius:130px; /*--define o grau de arredondamento do fundo ao passar o mouse --*/
-webkit-border-radius:130px; /*--define o grau de arredondamento do fundo ao passar o mouse --*/
}
/* CSS FIM */
</style>
<script>
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="by elainegaspareto.com">'];
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://2.bp.blogspot.com/-OSlo4lj_H4w/VRMrRXuZWyI/AAAAAAABCNA/RQsmcuaWiEE/s1600/sem.gif';
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 = 7;  /*--define em qual post começa a exibição --*/
var bsrpg_thumbSize = 213;  /*--define o tamanho das miniaturas --*/
var bsrpg_showTitle = true;
document.write("<script src=\"http://www.cantinhogeek.com/feeds/posts/default?start-index="+numposts+"&max-results=3&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>
</div>
<div class='clear'></div>

Onde eu coloquei em negrito é onde vocês irão colocar o link de seu blog, lembrando que deverá ter o http antes.  O código é auto explicativo e onde dá para editar vocês podem ver que está escrito na frente o que muda no código.

Onde está o 3 em negrito é onde vocês deverão escolher quantos post irão mostrar, lá está três ou seja, irá parecer só três postagens recentes, entendeu?

Agora é só aplicar.

Vá no seu blog em Layout>Adicionar Gadget>HTML/JavaScript cole o código e salve! Vê se ficou tudo certinho e pronto!

Espero que gostem!

Até o próximo post!


Compartilhe este post:

Comentários
4 Comentários

4 comentários :

  1. Olá, eu também configurei o meu blog com os tutorias da Elaine Gasparetto sempre quis colocar as postagens recentes no topo, mais não consegui acabei colocando na lateral. Vou tentar o seu. :)

    www.mundofantasticodoslivros.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Oi Camila!
      Espero que funcione, qualquer coisa me chama.
      Beijinhos.

      Excluir
  2. Olá Géssica,para colocar no fim do post é a mesma coisa?.Beijinhos!

    ResponderExcluir
    Respostas
    1. Esse é apenas para o topo, não sei se funciona no fim.

      Excluir

Não esqueça de deixar o seu comentário! Pode não parecer, mas um blogueiro vive de comentários e sugestões, faça a sua parte e deixe esta blogueira feliz!

Dicas:
- Deixe o link do seu blog/site, eu sempre dou uma olhada!

Regrinhas básicas:
- Por favor não usem palavras de baixo calão.
- Comentários desrespeitosos serão excluídos.

 
Copyright © Cantinho Geek. Designed by OddThemes