Oi benhê! Quer receber muito amor na sua caixa de entrada?
  • A boat with beautiful sunset.
  • Tree in field with blue sky.
  • Amaizing sunrise moment

Postagens recentes em miniatura

11 de jul. de 2016


Hélou benhês.

Nesse tutorial vou ensinar vocês a colocarem um slider automático de postagens recentes em miniatura no blog. Acho super bacana, pois além de mostrar os últimos posts, ele facilita a identificação do estilo do seu blog aos novos leitores.



Logo acima tem um exemplo, ou você pode ver o slider funcionando clicando aqui.

Pois então, vamos ao tutorial. Apenax siga os passos abaixo.

Passo 1: No painel do blog vá em Layout e adicione um gadget de HTML/JavaScript.

Passo 2: Após, copie o código abaixo e cole dentro desse gadget.
<center><style type="text/css">
.bsrp-gallery {
margin-top:70px; /*==MARGEM TOPO, ALTERE SE QUISER==*/
width:1000px; /*==LARGURA DO SLIDE==*/
float:center; 
clear:both;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a { /*==NÃO ALTERE NADA==*/
position: relative;
float:left;
margin: 0 10px 15px 0;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background:#7FFFD4; /*==COR DE FUNDO DA LEGENDA==*/
text-transform: uppercase; /*==TODAS AS LETRAS MAIÚSCULAS (APAGUE SE QUISER)==*/
display: block;
clear: left;
font-family: 'Open Sans', sans-serif; /*==FONTE DO SLIDE==*/
font-size:18px; /*==TAMANHO DA FONTE==*/
line-height:1.3em;
position: absolute;
left: 0%; /*==MARGEM ESQUERDA==*/
bottom: -40%; /*==ALTURA DA LEGENDA, ALTERE SE QUISER==*/
text-align: center;  /*==POSIÇÃO DO TEXTO (LEFT/CENTER/RIGHT)==*/
color:#fff; /*== COR DA FONTE==*/
width:80%; /*==LARGURA DA LEGENDA==*/
height:45%; /*==ALTURA DA LEGENDA==*/
padding-top: 45%;
padding-bottom: 10%;
padding-left: 10%;
padding-right: 10%;
border-radius: 100%;
word-wrap: break-word;
letter-spacing: 2px; /*==ESPAÇAMENTO DAS LETRAS==*/
overflow:hidden;
opacity: 0;
transition-duration: 0.45s;
-moz-transition-duration: 0.45s;
-webkit-transition-duration: 0.45s;
}
.bsrp-gallery .bs-item:hover .ptitle {
filter:alpha(opacity=80); /*==OPACIDADE DA LEGENDA (ALTERE PARA 1 SE QUISER==*/
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8; 
bottom: 0%;
}
.bsrp-gallery a img {
background: #fff;
float: left;
border-radius: 100%;
transition-duration: 0.55s;
-moz-transition-duration: 0.55s;
-webkit-transition-duration: 0.55s;
}
.bsrp-gallery a:hover img { 
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity:0.9;
opacity:0.9; 
}
/*FIM CSS FOTOS*/
</style>
<script>
//byjana
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from poderondesign">'];
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 : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVotpKJqKVBZcKduqrEzqktBwpbiJmah2GR2Q4Qelj-WSWFP_Z0dEy6ooD2J5Ny21bTLQP1UryzBkOAd6s7FpvCBbOoinQLFNYXXDoudwSMsQZw7QbV1RLrwB4lrj8jhXTCTFrzLKaSLgH/s72-c/default+image.png';
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
var bsrpg_thumbSize = 255;  

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></center>
 Obs 1: A única coisa que você vai alterar no código é o número 3, ele é a quantidade de miniaturas que vão ser mostradas no slider.

Mas se você quiser alterar as cores, fonte e tamanhos também fique à vontade, eu deixei tudo explicadinho no código.

Obs 2: Para usar a mesma fonte do exemplo, no painel do blog vá em Modelo Editar HTML > Copie o código abaixo e cole após <head>.
<link href='https://fonts.googleapis.com/css?family=Open+Sans:800' rel='stylesheet'/>
Encontre outras cores clicando aqui.
Encontre outras fontes clicando aqui.

Após fazer as alterações necessárias salve e pronto! Peço que não disponibilizem esse código sob nenhuma hipótese.

Comentários são sempre bem vindos. Beijos de luz!




CATEGORIA:

Nenhum comentário

Postar um comentário