Galeria de últimos looks/resenhas no blogger
Autor: Raquel Duarte | Publicado: 2017-02-07T15:18:00-02:00






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 &gt; Adicionar Gadget &gt; Escolha a opção "HTML/Javascript" e cole o código abaixo no espaço em branco.&nbsp;



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



&lt;center&gt;

&lt;img src='LINK-DA-IMAGEM'/&gt;

&lt;div class='widget-content'&gt;

&lt;style type="text/css"&gt;

/* CSS - Galeria de posts recentes separados por categoria */

.bsrp-gallery {

width:950px;

clear:both;

margin-left:1px; &nbsp;/*--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; &nbsp;/*--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 */

&lt;/style&gt;

&lt;script&gt;

function bsrpGallery(root) {

var entries = root.feed.entry || [];

var html = ['&lt;div class="bsrp-gallery nopin" title=""&gt;'];

for (var i = 0; i &lt; 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 &lt; links.length; ++j) {

if (links[j].rel == 'alternate') break;

}

var postUrl = links[j].href;

var imgTag = '&lt;img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/&gt;';

var pTitle = bsrpg_showTitle ? '&lt;span class="ptitle"&gt;' + postTitle + '&lt;/span&gt;' : '';

var item = '&lt;a href="' + postUrl + '" title="' + postTitle + '"&gt;' + imgTag + pTitle + '&lt;/a&gt;';

html.push('&lt;div class="bs-item"&gt;', item, '&lt;/div&gt;');

}

html.push('&lt;/div&gt;');

document.write(html.join(""));

}

hoje = new Date()

numposts = 1; &nbsp;/*--define em qual post começa a exibição --*/

var bsrpg_thumbSize = 230; &nbsp;/*--define o tamanho das miniaturas --*/

var bsrpg_showTitle = true;

document.write("&lt;script src=\"http://ENDEREÇO-DO-BLOG/feeds/posts/default/-/CATEGORIA?start-index="+numposts+"&amp;max-results=4&amp;orderby=published&amp;alt=json-in-script&amp;callback=bsrpGallery\"&gt;&lt;\/script&gt;");&lt;/script&gt;

&lt;/div&gt;



&lt;div class='clear'&gt;&lt;/div&gt;&lt;/center&gt;























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!!&nbsp;Blog Twice&nbsp;♥