19 outubro 2016
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!
Você arrasando sempre com seus tutoriais! Adorei, parabéns pelo ótimo trabalho. Achei muito lindo, irei usar no meu próximo layout :)
ResponderExcluirBjuss
Obrigada Carol <3 você sempre aqui, prestigiando meu trabalho \0/
ExcluirUm enorme beijo minha linda :*
Oi Lorena, amei o post, me ajudou muito.
ResponderExcluirEu queria saber se tem como tirar essa margem que fica entre os posts, beijos!
Oi Aline, que bom que gostou <3
ExcluirTem sim, vá em *-- Borda branca ao passar o mouse, apague se desejar --*/
e coloque 0 em px, que a borda desaparece. Um enorme beijo linda :*
Oi, eu adorei o tutorial! Só gostaria de saber, como que eu deixo as imagens do slide quadradas e não redondas. obrigada <3
ResponderExcluirOi Tai,
Excluiré bem simples, basta adicionar
border-radius: 50px abaixo de
.bsrp-gallery .bs-item .ptitle {
mas vá mudando o tamanho (50px) até chegar ao que vc deseja!
Espero ter ajudado, grande bjo :*
O meu ficou um embaixo do outro :c
ResponderExcluirProvavelmente a largura do total do seu blog é menor que 1350px.
Excluiroii ! adorei o tutorial ! Gostaria de saber se tem como deixar que apareçam apenas os posts de uma determinada tag :/
ResponderExcluirOi Giovanna,
ExcluirInfelizmente não jeito!
Oi, eu mudei a largura e altura da imagem pra 500 px, aí a margem desconfigurou, não ficou centralizado. Como eu faço pra mudar o tamanho da imagem e continuar centralizado?
ResponderExcluirOi,
ExcluirManda o link do seu blog pra que eu possa
ver onde está o erro.
Eu coloquei no título do Gadget 'Postagens recentes' mas não apareceu. Tem como inserir algum código pra que apareça o título em cima das miniaturas?
ResponderExcluir