Tutorial: Galeria com Posts Recentes do Blog

Ola meus amores!!! Hoje trago para vocês mais um tutorial, de como colocar uma galeria com imagens "arredondadas" dos posts recentes. Como vocês podem conferir ai logo a cima no meu blog. Geralmente eu gosto de testar os tutoriais antes... Ele é bem simples de instalar (não precisa mexer no html do seu blog) e funciona normalmente.
Os créditos desse tutorial vai para Elaine Gaspareto.

Então, vamos começar...
Va no painel do blog e clique na aba "Layout", a seguir clique em "Adicionar um gadget", escolha a opçao "HTML/JAVASCRIPT" e na janela que expandir cole o código:

<div class='widget-content'>
<style type="text/css">
/* CSS - Destaque de posts */
.bsrp-gallery {
width:100%;
clear:both;
margin-left:-3px;  /*--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 {
background: #c6ebfa; /*--cor de fundo das miniaturas ao passar o mouse --*/
display: block;
clear: left;
font-size: 13px;
font-family: arial;
text-transform:uppercase; /*--coloca o texto em capslock, apague se desejar --*/
line-height:1.3em;
font-weight:300;
height: 48%; /*--define a altura da legenda --*/
width:79%; /*--define a largura da legenda --*/
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 14px 13px;
padding:60px 10px 20px 10px;
color:#000000; /*--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=90);
-moz-opacity:0.9;
-khtml-opacity:0.9;
opacity:0.9;
border-radius:130px;
-moz-border-radius:130px;
-webkit-border-radius:130px;
}
.bsrp-gallery a img {
background: #fff;
float: left;
border-radius:130px;
-moz-border-radius:130px;
-webkit-border-radius:130px;
}
.bsrp-gallery a:hover img {
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 = 1;  /*--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=\"LINK-DO-SEU-BLOG-AQUI/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>
</div>
<div class='clear'>
</div>
</ textarea></center>

OBS: Quase no final do codigo é necessario que vc substitua essa partre que esta com letras maiusculas "LINK-DO-SEU-BLOG-AQUI" pelo link do seu blog. Modifique alguns itens conforme seu gosto e pronto! Espero que vocês tenham gostado do tutorial de hoje, Deixe seu comentário nos contanto a sua opinião! Ate o próximo post!

15 Comments

Renata Massa

15 comentários

Unknown25 maio
Arrasando como sempre nesses tutoriais né reeh *-*

ameei, pena que o meu não é blogspot ♥

um beeijo e muito sucesso ♥

http://www.eaibonita.com.br
ResponderExcluir
Respostas
Leila Cardoso27 maio
Este comentário foi removido pelo autor.
ResponderExcluir
Respostas
Leila Cardoso27 maio
Este comentário foi removido pelo autor.
ResponderExcluir
Respostas
Juliana de Souza28 maio
Ooi Reeh, a opção "LINK-DO-SEU-BLOG-AQUI" não apareceu aqui no meu, não consegui fazer :(
ResponderExcluir
Respostas
Unknown28 maio
Oie a opção "LINK-DO-SEU-BLOG-AQUI" não aparece no meu tb não
ResponderExcluir
Respostas
Unknown29 maio
Oiieee Reeh, eu também não consegui, pelo mesmo motivo das Gatinhas à cima!
ResponderExcluir
Respostas