[Tutorial] Postagens recentes no topo do blog

sábado, fevereiro 20, 2016 4 Comentários A+ a-


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!


Tenho 21 anos, sagitariana e apaixonada por livros. Atualmente estou cursando Design Gráfico na UFG. Meus Hobbies são escrever, ler, ver Doramas, animes, filmes e séries. Gosto muito de filmes e séries de terror, mas em questão de livros e mangás eu prefiro os de romances. Em 2016 publiquei meu conto "Lilith - A Princesa das Trevas" na antologia Demontale e fechei contrato com a Young Editorial para publicar o meu livro "Porcelana: Rubrum Luna"

O animal que me representa é o lobo.




4 comentários

Escreva um comentários
Camila Martins
EQUIPE GEEK
20 fevereiro, 2016 Deletar

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

Responder
avatar
Géssica Marques
EQUIPE GEEK
20 fevereiro, 2016 Deletar

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

Responder
avatar
Rebecca Castro
EQUIPE GEEK
22 fevereiro, 2016 Deletar

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

Responder
avatar
Géssica Marques
EQUIPE GEEK
22 fevereiro, 2016 Deletar

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

Responder
avatar

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.