7 de fev de 2017

Galeria de últimos looks/resenhas no blogger


Oi gente, como vão? Hoje vou explicar como faz aquelas galerias que geralmente ficam no rodapé do blog com os últimos looks, resenhas e etc. Na verdade nessa galeria você pode ser da categoria que você quiser, mas como muita gente procura por essas duas em geral eu decidi focar mais nelas.

COMO ADICIONAR NO SEU BLOG:
Vá em Layout > Adicionar Gadget > Escolha a opção "HTML/Javascript" e cole o código abaixo no espaço em branco. 

Agora vamos ás alterações:
Selecione uma das imagens disponíveis nesse post pra usar como título, clique sobre a imagem escolhida com o botão direito do mouse e depois em "Copiar endereço da imagem", depois cole no local indicado em vermelho no código.

Em "ENDEREÇO-DO-BLOG" coloque a URL do seu blog e em "CATEGORIA" coloque o nome da categoria que você quer que apareça ali.

<center>
<img src='LINK-DA-IMAGEM'/>
<div class='widget-content'>
<style type="text/css">
/* CSS - Galeria de posts recentes separados por categoria */
.bsrp-gallery {
width:950px;
clear:both;
margin-left:1px;  /*--define o posicionamento à esquerda, altere se precisar--*/
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 0 0 4px;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background: url(http://i.imgur.com/L5iWz2X.png); /*--cor de fundo das miniaturas ao passar o mouse --*/
display: block;
clear: left;
font-size: 16px;  /*--tamanho da fonte --*/
font-family: arial; /*--tipo da fonte --*/
text-transform:uppercase; /*--coloca o texto em capslock, apague se desejar --*/
line-height:1.3em;
font-weight:300; /*--espessura da fonte --*/
height: 48%; /*--define a altura da legenda --*/
width:79%; /*--define a largura da legenda --*/
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 14px 13px;
padding:60px 10px 20px 10px;
color:#000000; /*--cor da fonte do texto--*/
word-wrap: break-word;
overflow:hidden;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}

.bsrp-gallery .bs-item .ptitle:hover {
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity:0.9;
opacity:0.9;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
}
/* CSS FIM */
</style>
<script>
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="">'];
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 = 230;  /*--define o tamanho das miniaturas --*/
var bsrpg_showTitle = true;
document.write("<script src=\"http://ENDEREÇO-DO-BLOG/feeds/posts/default/-/CATEGORIA?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>
</div>
<div class='clear'></div></center>









LEMBRANDO QUE:
• Você pode usar com qualquer marcador, não precisa ser somente de look e de resenhas

Se você gostou desse tutorial deixe um comentário e curta a fanpage pra colaborar com a amiga! Beijinhos

Código lindo do blog Elaine Gaspareto

CONHEÇA MEU OUTRO BLOG! Moda evangélica, cachos, inspirações, resenhas e muito mais!! Blog Twice ♥


6 comentários :

  1. Amei o post,podeia me ajudar rock? gostaria muito de personalizar "postagens mais antigas e voltar" no blog faz tempo que venho tentando personalizar.... Bjs

    ResponderExcluir
    Respostas
    1. Logo logo posto o tutorial para personalizar, tem duas maneiras, vou fazer um post de cada

      Excluir
  2. To ansiosa haha faz tempo que venho tentando fazer no meu blog

    ResponderExcluir
  3. Adorei a dica! Obrigada :)

    somehowme.blogspot.com.br

    ResponderExcluir
  4. coloquei tudo certinho mas n apareceu as imagens

    ResponderExcluir
    Respostas
    1. Caso você tenha pego as imagens da web e colado elas no seu post, elas não irão aparecer. Você precisa carregar as imagens diretamente do seu computador

      Excluir