SLIDE DE POSTAGENS RECENTES ESTILO PRETO E BRANCO

Você vai aprender adicionar um slide de postagens recentes em miniaturas automático, estilo minimalista, de um modo super fácil.

Em março deste ano foi publicado aqui no manual um tutorial ensinando adicionar um slide de postagens recentes com dois estilos: Quadrado e redondo. Sua função simplesmente é divulgar os últimos posts publicados no blog, atraindo o visitante a leitura. Geralmente é colocado abaixo do cabeçalho (é o recomendado) mas á quem prefere deixa-lo no rodapé, que também é uma ótima opção.

Esse modelo traz um estilo minimalista, clean e que como o outro, é bem fácil de aplicar no blog. Ao passar o mouse aparece uma borda na cor branca, o título do post, e a imagem fica preto e branco. Os posts aparecem automaticamente.

Para adicionar em seu blog, é muito simples. Basta procurar por:  Layout, Adicionar um Gadget em seguida clique em HTML/JavaScripit. Uma janela será aberta. Dentro dela, cole o código abaixo:



<div class='widget-content'>
<style type="text/css">
/* CSS - Destaque de posts */
.bsrp-gallery {
width:100%; /*-- Tamanho total do slide. Mexa somente se souber o que está fazendo --*/
clear:both;
margin-top: 30px; /*-- Desce ou sobe o slide --*/
margin-left: 30px; /*-- Leva o slide pra esquerda ou direita --*/
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 0 0 15px;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background: transparent; /*--Cor de fundo das miniaturas ao passar o mouse --*/
display: block;
clear: left;
font-size: 18px; /*-- Tamanho da fonte do título --*/
font-family: 'Arial', sans-serif; /*-- Nome da fonte do titulo do post --*/
text-transform:uppercase; /*--Coloca o título do post em capslock, apague se desejar --*/
line-height:1.3em;
font-weight:300;
height: 48%; /*--Define a altura da legenda --*/
width:85%; /*--Define a largura da legenda --*/
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 14px 13px;
padding: 60px 10px 20px 10px;
color:#FFFFFF; /*-- Cor da fonte do título do post --*/
word-wrap: break-word;
overflow:hidden;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
border: 2px solid #FFFFFF; /*-- Borda branca ao passar o mouse, apague se desejar --*/
}
.bsrp-gallery .bs-item .ptitle:hover {
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity:0.9;
opacity:0.9;
-webkit-transition: 0.6s ease-in;
-moz-transition: 0.6s ease-in;
-o-transition: 0.6s ease-in;
}
.bsrp-gallery a img {
background: #fff;
float: left;
width: 330px; /*-- Largura das imagens --*/
height: 210px; /*-- Altura das imagens --*/
-webkit-transition-duration: .90s;
}
.bsrp-gallery a:hover img {
-webkit-transition-duration: .90s;
-webkit-filter: grayscale(100%); /*-- Deixa a imagem preto e branco ao passar o mouse, apague se quiser --*/
}
/* 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=\"/feeds/posts/default?start-index="+numposts+"&max-results=3&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>
</div>

<div class='clear'></div>

Em seguida, salve. Tudo que pode ser alterado no estilo foi sinalizado no próprio código. O número destacado de vermelho se refere a quantidade de imagens que aparecerá no slide. Nesse caso são 3, mas se quiser pode aumentar ou diminuir a quantidade.

Gostou do tutorial? Então você já sabe o que fazer, compartilhe com os amigos, siga o Manual em "Faça parte" que fica na lateral do blog e curta da nossa página no facebook para nunca perder as novidades. Um grande beijo e até a próxima!