13 de out de 2016

Posts recentes Blogger (quadrado)


Bom gente, aqui estou eu com mais um tutorial para embelezar o blog de vocês, e dessa vez é um super útil e prático! 

Vamos colocar posts recentes quadradinhos no blog e a legenda pode ser da cor que você quiser, além do mais é super fácil de colocar, indicado para quem não manja muito de HTML e tem medo de se aventurar pelos códigos do blog.


Esse modelo é super fácil de aplicar no blog, olha só:

Vá em layout > na área abaixo do cabeçalho (pode se chamar cross-column ou cross-column-2) você vai em adicionar gadget > selecione HTML/JavaScript > copie o código abaixo, cole no gadget e salve.

Quer mudar a cor? Eu destaquei no código em vermelho o trechinho onde você pode alterar a cor. 
<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:-15px;
width:1200px; ==LARGURA DO SLIDE==
float:center; ==POSIÇÃO DO SLIDE==
clear:both;
}

.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 10px 15px 0;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background: #FF55AA; /*==COR AREA DE TITULO==*/

display: block;
clear: left;
font-family: 'Josefin Sans', cursive; ==FONTE DO SLIDE==
font-weight:200;
text-transform:uppercase; /*==TDS LETRAS MAIÚSCULAS==*/
font-size:15px; /*==TAMANHO DO TITULO==*/
line-height:1.3em;
height:40px;
position: absolute;
bottom:0%;
text-align: center;  /*==POSIÇÃO DO TITULO==*/
color:#fff; /*== COR DO TITULO==*/
width:96%;
padding:6px;
word-wrap: break-word;
overflow:hidden;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img { 
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8; 
}
/*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 : 'http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/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 = 260;  

var bsrpg_showTitle = true;
document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>

E por hoje foi isso, espero de verdade que vocês tenham gostado, deixem nos comentários pedidos para os próximos tutoriais, pode ser qualquer coisa, ok?

Beijos e até logo. 

8 comentários :

  1. Amei! Me ajudou bastante, amando o seu blog.
    Chero!
    http://temcalmalarissa.blogspot.com.br/

    ResponderExcluir
  2. Rocky, e como eu coloco as imagens do slide?

    ResponderExcluir
    Respostas
    1. Oie, o slide carrega automaticamente a imagem do post

      Excluir
  3. Deu quase certo no meu blog, só que as imagens de url não ficam no slide só aparece as que eu carrego no blog, fica mostrando sem imagem, vc sabe pq?

    ResponderExcluir
    Respostas
    1. Ele só lê as imagens que foram carregadas diretamente no Blogger

      Excluir
  4. Oi Rocky, tem como mudar a quantidade de posts recentes que vão aparecer? Obg pela dica :D <3

    kethellynb.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Tem sim, ali na última linha do código tem um número 4, você pode trocar pelo número de sua preferência.

      Excluir