Participe da nossa comunidade de Mulheres Empreendedoras!

Cadastre-se para receber as novidades do blog direto no seu e-mail!

 

19 outubro 2016

SLIDE DE POSTAGENS RECENTES ESTILO PRETO E BRANCO

slide de postagens recentes

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!


13 comentários:

  1. Você arrasando sempre com seus tutoriais! Adorei, parabéns pelo ótimo trabalho. Achei muito lindo, irei usar no meu próximo layout :)
    Bjuss

    ResponderExcluir
    Respostas
    1. Obrigada Carol <3 você sempre aqui, prestigiando meu trabalho \0/
      Um enorme beijo minha linda :*

      Excluir
  2. Oi Lorena, amei o post, me ajudou muito.
    Eu queria saber se tem como tirar essa margem que fica entre os posts, beijos!

    ResponderExcluir
    Respostas
    1. Oi Aline, que bom que gostou <3

      Tem 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 :*

      Excluir
  3. Oi, eu adorei o tutorial! Só gostaria de saber, como que eu deixo as imagens do slide quadradas e não redondas. obrigada <3

    ResponderExcluir
    Respostas
    1. Oi Tai,

      é 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 :*

      Excluir
  4. Respostas
    1. Provavelmente a largura do total do seu blog é menor que 1350px.

      Excluir
  5. oii ! adorei o tutorial ! Gostaria de saber se tem como deixar que apareçam apenas os posts de uma determinada tag :/

    ResponderExcluir
  6. 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?

    ResponderExcluir
    Respostas
    1. Oi,

      Manda o link do seu blog pra que eu possa
      ver onde está o erro.

      Excluir
  7. 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

Manual Da Blogueira. Todos os direitos reservados © Desenvolvido por Lory Design Studio
Usamos cookies próprios e de terceiros que entre outras coisas recolhem dados sobre seus hábitos de navegação para mostrar publicidades personalizadas e realizar análises de uso de nosso site.
Se continares navegando consideramos que aceita seu uso. Entendi Mais informações