Galeria de posts em destaque

Views:
<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=\"http://www.elainegaspareto.com/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>
</div>
<div class='clear'></div>





Dicas extras:
Onde marquei em pink é a quantidade de posts exibidos.
Onde marquei em azul você deve trocar pelo endereço completo de seu blog.
As demais alterações possíveis no estilo estão marcadas no código.




Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage