Oi pessoal, como estão?
Esse é um dos tutoriais mais pedidos por vocês, inclusive lá no grupo do Facebook (se você ainda não participa, vem correndo! :D), então, antes tarde do que nunca, cá estou eu com o tutorial.
- 1 – Em MODELO > Editar HTML pesquise por ]]></b:skin> e acima dele cole:
/* Miniaturas dos últimos posts
-----------------------------------------------*/
.bsrp-gallery {
width:100%;
clear:both;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 0 0 0;
text-decoration:none;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
}
.bsrp-gallery .bs-item .ptitle {
background: #b8d8dd;
display: block;
clear: left;
font-size: 16px;
text-transform:uppercase;
line-height:1.3em;
font-weight:300;
height: 48%;
width:79%;
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 14px 13px;
padding:60px 10px 20px 10px;
color:#555;
word-wrap: break-word;
overflow:hidden;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
}
.bsrp-gallery .bs-item .ptitle:hover {
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity:0.9;
opacity:0.9;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
}
.bsrp-gallery a img {
background: #fff;
float: left;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
}
.bsrp-gallery a:hover img {
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
}
– Em vermelho está a cor do fundo que aparece quando o mouse está em cima da miniatura. Modifique se desejar.
- 2 – Em LAYOUT, adicione um widget HTML/Java Script e dentro dele cole o seguinte código (deixe o título em branco):
<script>
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" >'];
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://lh5.googleusercontent.com/-iaKQ-tiz6KE/VPyO2GnMRXI/AAAAAAAADrc/si7De0SoFO0/s300/semimagem1.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 = 3;
var bsrpg_thumbSize = 220;
var bsrpg_showTitle = true;
document.write("<script src=\"http://www.ENDEREÇO-DO-SEU-BLOG.com.br/feeds/posts/default?start-index="+numposts+"&max-results= 3&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>
– Em vermelho está a URL da imagem padrão, que aparece quando o post em questão não tem imagens. (veja modelos gratuitos abaixo)
– Em azul {duas vezes} está o número de miniaturas a serem exibidas.
– Em verde está o tamanho da miniatura em pixels.
IMAGEM PADRÃO
Para a imagem padrão fiz 8 modelinhos que podem ser baixados gratuitamente. Basta hospedar no Picasa Web de vocês, clicar com o botão direito e copiar a URL, depois substituir pelo código informado no passo 2.
DOWNLOAD
OBSERVAÇÃO IMPORTANTE:
– Para esse tutorial funcionar, seu blog precisa estar público e com o Feed ativo.
Espero que ajude, qualquer dúvida comente!
95 Comments
Danniela Miller
8 março 2015 at 19:17Tooooop!!! <3 Por isso que eu te amo!!!
Danni
8 março 2015 at 16:23Tooop!!! Por isso que eu te amo K!!!
Nathalia F. Guimarães
8 março 2015 at 19:26E como faz para o Feed ficar ativo?
Karoline
3 abril 2015 at 17:38Em Configurações > Outros.
Leila
8 março 2015 at 16:31Como eu faço para ativar o feed?
Karoline
8 março 2015 at 16:44Em Configurações > Outros
Karina Leal
8 março 2015 at 17:07Que legal, já salvei nos favoritos para usar no meu próximo layout!!
Bjs ♥
Papos da Kah
Karina Leal
8 março 2015 at 17:11Adorei o tutorial, vou usar no meu novo layout!
Bjs ♥
Marina
8 março 2015 at 17:23Sempre uso esse tuto, acho ele muito útil, mas, sabe, creditar o site da onde tu tirou a base seria legal :v
Karoline
8 março 2015 at 20:31Oi Marina, tenho isso salvo há anos e não sei de onde é, mas se você souber quem criou o código inicial pode me informar por gentileza o link que eu coloco no post, como já fiz em outros tutoriais.
Também se possível me envia o link do seu blog, adoraria saber quem você é.
Bjs
ballerina
8 março 2015 at 19:25Adoro o blogue, tem dicas super uteis!
Gostava de fazer uma pergunta, como mete a data nos posts da maneira que tem? Tenho tentado mudar a minha e não consigo.
Leila
8 março 2015 at 20:47Não funcionou :(
Jazmin
9 março 2015 at 4:50não apareceu no meu blog :( o que eu faço??
Jazmin
9 março 2015 at 5:55Karol, eu consegui fazer com que aparecesse mais ele esta aparecendo depois dos comentários, oque eu faço? Eu uso o seu template petit formal… Tem como arrumar?
Jhéssyk Thielly
9 março 2015 at 9:26Ai que ótimo tutorial, amando ♥
LUZIA
10 março 2015 at 7:49OIIII, AMEI O TUTORIAL!!!!
MAS, O MEU APARECE NO SIDEBAR, TENTEI ARRUMAR, MAS NÃO CONSEGUI.
EU QUERIA SABER, SE A POSTAGEM NÃO TIVER IMAGEM, TEM COMO PERSONALIZAR UM POR UM, OU NAO ???
QUERIA MUITO ESSE TUTO!!!
E VOCÊ FEZ, AIIIII QUE FOFA!!!
E TAMBÉM, JÁ PEÇO DESCULPAS POR INCOMODAR, MAS QUERIA SABER, COMO VOCÊ FEZ ESSE FORMULÁRIO DE COMENTÁRIO???
MUITO OBRIGADA MESMO!!!!
VOCÊ É MUITO TALENTOSA, CONTINUE ASSIM.
Karoline
10 março 2015 at 16:12Oi Luzia, obrigada! Usei um plugin pra fazer o formulário, só disponível para WordPress. No Blogger já existe o formulário padrão que é em formato de widget, mas é possível colocar ele em uma página, dá uma pesquisada que já existem tutoriais ensinando a fazer isso.
Não é possível personalizar a imagem padrão para cada post. Para isso seria melhor você adicionar a imagem no post, então ela aparecerá nas miniaturas.
Se o widget está salvo na sidebar, ele vai aparecer na sidebar mesmo. Você precisa (em LAYOUT) arrastá-lo para onde deseja que ele fique e salvar.
Um beijo!
Beatriz Rodrigues
12 março 2015 at 13:14Cara, seu blog é o melhor, sem mais. Peguei vários tutoriais e eles estão com os créditos no meu blog. Sou muito grata por você. ♥
Karoline
12 março 2015 at 20:51Oi Beatriz, nem precisava colocar os créditos, mas muito obrigada!! :)
Bjs
Beatriz Rodrigues
13 março 2015 at 13:44Magina! ^^
Beatriz
12 março 2015 at 21:30Oi karol ! gostaria de saber como eu faço para definir os posts que eu quero que apareça na miniatura !
Karoline
12 março 2015 at 23:32Oi Beatriz, não há como definir, as miniaturas exibem os últimos posts publicados.
Bjs
Mel Vilaça
13 março 2015 at 2:02Meu Deeeeeeeeus a vida inteira eu procurei por esse tutorial <3 <3 <3 te adooooro hahaha
Leonor Correa
14 março 2015 at 19:01oi, mas não tem como ficar as ultimas postagens ao invez de postagens aleatórias, no meu ficaram postagens aleatórias
Whenia
9 abril 2015 at 20:01No meu também :(
leonor
14 março 2015 at 16:30olá, no meu não ficam as ultimas postagens e sim as postagens em aleatório. queria que ficassem as fotos das ultimas postagens, tem como?
Gabriela Barros R. Cirino
16 março 2015 at 23:25Oiee Karol, suas dicas me ajudam muito! GENTE! Que tal dar uma passadinha no meu blog anjos? http://sweet-sugar-kawaii.blogspot.com.br/ Eu agradeceria muito <3 2Bejos
Giovana Teotonio
19 março 2015 at 15:23Tutorial perfeito! mas o único probleminha é que eu não consigo dar espaço entre a postagem e as miniaturas :( veja!
http://quetal-blog.blogspot.com.br/
Nathalia
21 março 2015 at 11:07Oi, eu consegui alterar os espaços entre os ícones. Dá uma olhada lá no meu blog, se for assim que você deseja te passo como faz.
http://biquinibolinhas.blogspot.com.br/
Att.
Giovana Teotonio
21 março 2015 at 16:04Obrigada Nathalia, mas já consegui haha!
Julia
20 março 2015 at 15:14Oi Karol, tudo bem?
Então, eu consegui fazer tudo direitinho, mas ao invés de aparecer embaixo das postagens, ela aparece no final do blog.
É o único problema que apareceu rs obrigada por esse tutorial, eu precisava de um assim! *-*
Beijos e bom final de semana! ♥
Karoline
22 março 2015 at 23:38Oi Julia, você entendeu errado, pois esse tutorial não é pra aparecer no fim de cada post, é pra aparecer onde você instala o widget.
Bjs
Daniele Feitosa
20 março 2015 at 15:53Oi linda, tudo bem?
Assim como o da leitora do comentário acima, o meu só aparece no final do blog… dá uma olhadinha no meu blog pra vc ver como ficou…
Como coloco em baixo das postagens , assim como está no seu blog?
Beijos
http://www.garotacalculista.com/
Daniele Feitosa
20 março 2015 at 16:30Ah, tem outra coisa também…
Quando eu clico em cima, a bolinha não fica centralizada.
E qual item do código eu altero isso?
Mudei o ‘height: 48%;’ para ‘height: 35%;’ pois não estava uma bolinha, e sim uma coisa oval… mas com essa alteração deu certo…
Mas mesmo assim não consigo centralizar.
Karoline
22 março 2015 at 23:38Oi Daniela, você entendeu errado, pois esse tutorial não é pra aparecer no fim de cada post, é pra aparecer onde você instala o widget.
Bjs
Nathalia
21 março 2015 at 10:51Oi tudo bem?
Gostaria de tirar uma dúvida, como faço para aumentar o espaço entre os ícones (as bolinhas)?
Att.
Mari Nemon
23 março 2015 at 12:01Nathalia eu consegui colocar espaço no meu da seguinte forma, abaixo de:
.bsrp-gallery .bs-item a {
Adicionei:
padding-left: 15px;
Mas ai tem que mudar a
margin: 0 0 14px 13px;
que esta na parte de
.bsrp-gallery .bs-item .ptitle {
e ir ajeitando ate o houver se ajustar como coloquei padding-left: 15px. meu margin ficou 0 0 14px 5px; – Não sei se isso ajuda.
Karoline eu não consigo centralizar, como posso fazer ?
Nana Sá
5 janeiro 2016 at 14:22Nossa ajudou muito. tava com esse problema também. VAleu
Mari Nemon
23 março 2015 at 12:04Esqueci de agradecer pelo tutorial ele é otimo *u*. Obrigada K
Luana Santos
25 março 2015 at 17:39Olá, estou fazendo um layout para a minha amiga e quero por essas miniaturas mas não estão redondas e ta uma em cima da outra, poderia me ajudar a resolver esse problema? O layout que está em construção é esse: http://lucoelholayout.blogspot.com.br/ Pode me ajudar????
Beijos.
Marie
2 abril 2015 at 7:37No meu layout as miniaturas também ficam uma em cima da outra e não ficam redondas D:
Daniella Alessandra
5 abril 2015 at 19:50Hey sempre que vou preucurar ]]> aparece que não tem ? Por que isso acontece?
Karoline
5 abril 2015 at 23:32No seu blog tem sim, fica abaixo disso aqui:
#layout .region-inner {
min-width: 0;
width: auto;
}
Lícia Tácyla
16 abril 2015 at 19:41Olá !! O meu não deu certo e faço no modelo travel.. poderia me explicar o porque ??
Bjos :*
Karoline
16 abril 2015 at 23:54Oi Lícia, impossível eu te dizer porque você não conseguiu, principalmente sem saber o erro, podem ser mil motivos, você pode ter cometido algum errinho em algum dos passos.. Se não houver um erro específico fica complicado :/
Bjs
Mari Pereira
19 abril 2015 at 21:02Karol, eu faço tudo, mas não aparece, oque eu faço?
Karoline
20 abril 2015 at 14:11Se você fez tudo corretamente e seu blog está público com feed ativo mas mesmo assim não funcionou, não tenho como te ajudar :/
Beatryz Gouveia
28 abril 2015 at 15:38Oi Karol! Tem um limite de postagens para começar a aparecer no blog?
Karoline
29 abril 2015 at 0:21Beatryz, tem sim, o número de posts existentes não pode ser menor do que o número de posts configurado no código (no passo 2 desse tutorial), caso contrário as miniaturas não vão aparecer.
Bjs
Beatryz Gouveia
29 abril 2015 at 18:18Karol, desculpa está pertubando novamente! Mas é porque essa miniatura dos ultimos posts não fica logo a baixo das minhas postagens, elas ficam jogadas fora da área dos posts. O que eu faço?
Karoline
29 abril 2015 at 23:43Oi Beatryz, esse tutorial não é pra ficar abaixo de cada post.
eduarda
29 abril 2015 at 20:34Oi , no meu blog a imagem ficou uma por baixo da outra e não de lado. O que eu faço?
Laila
23 maio 2015 at 12:12Olá karol muito bom esse tutorial, no meu blog eu já uso o slide automático que vc disponibilizou aqui, agora queria mudar para postagens recentes na horizontal e esse tutorial serviu direitinho rsrs :) mas gostaria de alterar a exibição das imagens para quadradas ao invés de redondas como faço? Poderia me ajudar nessa questão?
Karoline
28 maio 2015 at 20:44Oi Laila, é só você remover esses três códigos (que aparecem várias vezes) do passo 1:
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
Bjs
Bruna Gabrielle
27 maio 2015 at 17:28Não consegui colocar embaixo de cada postagem,só no fina de tudo.Como faço para mudar isso??
Karoline
28 maio 2015 at 20:43Bruna, esse tutorial não é pra ficar abaixo de cada postagem, isso se chama “posts relacionados”. Esse tutorial é outra coisa :)
Bjs
Francine Porfirio
9 junho 2015 at 17:14Oi, flor!
Obrigada pelo tutorial! Ficou show. Eu consegui incluir em meu blog, mas não ficou centralizado (deixei no rodapé). Como posso fazer para centralizá-lo, por favor?
Obrigada!
Kalita Cássia
7 julho 2015 at 15:54Amo seus tutoriais, já testei varios, mas dessa vez não funcionou. Não ficou redondo. Pode me ajudar?
Karina Marques
10 julho 2015 at 21:16Fiz todos os passos certinhos, mas não funcionou… Repeti três vezes e nada. Analisei tudo para ver se tinha errado algo, mas não :/
Raquel Pereira
24 julho 2015 at 3:52Oi, eu comecei a ler o blog a pouco tempo e já estou tipo mega apaixonada, porém tive um problema, as postagens ficaram uma abaixo da outra (ao invés de uma ao lado da outra), poderia me ajudar por favor? Obrigada!
Júlia Maurício
2 agosto 2015 at 17:42Oii, amei seu tutorial, alias amo tudo aqui, comecei com um blogger apouco tempo, tentei colocar as miniaturas, mas não conseguir, coloquei do jeito certo, mas elas não apareceram, http://jujudoblogger.blogspot.com.br/ , agradeço desde já.
Karoline
3 agosto 2015 at 17:22Oi Júlia, todas as possíveis soluções que conheço estão no post. Tentou todas?
Bjs
sophia matos
8 agosto 2015 at 1:18Oi Karol!! Tudo bom?? Então eu tentei fazer isso no meu blog só que ele não fica redondo ele fica quadrado e não consigo arrumar!! Voê poderia me ajudar por favor?! Obrigada desde já amo seu blog!
Giselly Dutra
10 agosto 2015 at 9:04Olá,
Amo seu blog e os tutoriais, eu coloquei tudo certinho apareceu, ficou redondo , mas elas não saem da área do post, elas ficam em cima da área dos posts já tentei centralizar mas não consegui o que eu faço? queria 4 miniaturas em baixo no nome do meu blog, só que centralizado, e não só 3 em cima da área dos posts eu coloquei o gadget na área crosscol-overflow mas continua em cima dos posts poderia me ajudar?
Karoline
10 agosto 2015 at 19:55Giselly, nesse caso o problema é referente ao seu template e a disposição dos widgets dele, não tem nada a ver com o meu tutorial, por isso não posso te ajudar, infelizmente.
Bjs
Giselly Dutra
10 agosto 2015 at 20:02Obrigado pela atenção mas eu já consegui arrumar
Beijos
http://diariodeumaadolescente-oficial.blogspot.com.br/
Graça Ferreira
3 setembro 2015 at 19:44Coloquei no meu blog,deu certinho.
Lindo fim de semana para você!!!
Obrigada.
Dafhyne
17 setembro 2015 at 11:59Fiz tudo que você falou mas não apareceu nada no meu blog.
Karoline
17 setembro 2015 at 20:06Então provavelmente você fez algum passo errado, infelizmente não tem outra explicação, pois esse código funciona em qualquer template sem restrições.
Bjs
Brenda Joplin
4 outubro 2015 at 22:38K. Eu fiz seu exatamente como você ensinou, consegui colocar a miniatura do blog, mas acontece que não está aparecendo as últimas postagens, acho que está aparecendo as postagens mais visualizadas, eu até tentei editar as últimas postagens para ver se conseguiria mudar alguma coisa, mas nada mudou, você pode me dizer como mudar isso? Eu estou usando o seu template Sweet Dreams.
Desde já agradeço.
OBS: Eu estou apaixonada pelo seu blog.
Beijinhos violetas ^^
Karoline
8 outubro 2015 at 20:17Oi Brenda,
O código está configurado pra mostrar as últimas postagens, nessa parte aqui oh “orderby=published” que seria “ordenar pela data de publicação”. Não sei porque pra algumas pessoas não mostra as últimas postagens :(
Kellen Roberta
15 novembro 2015 at 23:30No meu não está dando certo. Ele não aparece e outra é pra adicionar o html do layout na sidebar ou footer
Karoline
16 novembro 2015 at 22:15Kellen, você deve salvar onde quiser que ele apareça.
Stephanie Almeida
24 novembro 2015 at 16:36Karol, tem como você postar um tutorial de Postagens relacionadas com esse feito do título só aparecer quando o mouse estiver na foto? POR FAVOR!
Beijos, adorei o tutorial.
http://www.doceconceito.com
Gabriela Lima
1 dezembro 2015 at 14:22oi, queria saber como deixar nesse mesmo estilo, mas quadrado.
Karoline
6 dezembro 2015 at 14:27Olá, apague todas essas linhas do Passo 1:
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
Gabriela Lima
7 dezembro 2015 at 21:23Obrigada Karol, gosto muito do seu blog, e a maioria dos seus tutoriais eu uso no meu blog, eles me ajudam muito. Obrigada mesmo. Beijos! ♥
Regiane Gama
14 dezembro 2015 at 23:19Olá Karol tudo bom?
Primeiro quero falar que seu blog é maravilhoso, e super útil, estou modificando todo o layout do meu blog, e assim que terminar irei fazer um post, e irei deixar seu blog lá, porque foi o que mais me ajudou a modificar tudo haha’
Fiquei apenas com uma dúvida em relação esse tutorial, teria como eu colocar uma distancia maior entre as miniaturas? Para deixar mais centralizadas? Qualquer coisa entra no meu blog e ve se é possível!
Um super beijo, e mais uma vez, parabéens, e sucesso ♥
Luísa
16 dezembro 2015 at 17:23Como faço para ativar o feed? Vou em Configurações> Outro, mas depois disso não sei o que fazer. Pode me explicar? Ficarei muito grata!
Beatriz
5 janeiro 2016 at 12:34Oi! Já tentei colocar essas miniaturas e outras coisas que você ensinou, mas sempre que procuro por ” ]]> ” não aparece nada. Eu uso o template que você disponibilizou, o aquarela (estou apaixonada por ele inclusive hahah).
Jessica
1 março 2016 at 22:57Olá consegui colocar e ficou lindo , mas como faço para deixar um espaço maior entre eles ?
E como faço pra eles ficarem retos sem interferir na minha foto ou minha foto ficar abaixo ? Obrigada , amo todos os seus posts ♥
Chapa
2 março 2016 at 0:39Oi Karoline, acompanho teu blog e sempre venho aqui para pegar dicas. Tu saberias me dizer como faço um widget de postagens recentes como o desse site aqui? http://megaclassicos.blogspot.com.br/
Thaís
6 março 2016 at 23:07Oi, moça!
Me ajudou muiitooo, coloquei e modifiquei conforme suas orientações a outros comentários para miniaturas quadradas.
Obrigada <333
Beijos!
janeladesorrisos.com
ludmila
17 março 2016 at 10:15não estou conseguindo colocar faço tudo certinho e meu é publico eu uso o templte em duas cores que vc disponibilizou me ajude por favor #help
ludmila
8 abril 2016 at 13:03oi aqui estou eu de novo desta vez consegui colocar !! mais ficou um em baixo do outro e agr ?
Marcela Alessandra
18 abril 2016 at 18:57Amore, ameeeei esse tutorial.. Mas queria saber como faço pra fazer isso abaixo das postagens! Como deixo as postagens antigas redondinhas abaixo das postagens do blog.. Muito obrigada!
Michelle
25 abril 2016 at 21:43Como eu faço isso no wordpress? É exatamente assim que eu quero
Luiz Henrique Noriller
24 junho 2016 at 18:24Não consegui encontrar esses caracteres ]]> no meu html,pesquiso mas dá zero resultados.
Karoline
22 julho 2016 at 15:20Oi Luiz, todo template do Blogger tem esse trecho: ]]>
Sem exceção, todos tem. Bjs
Vanessa
1 agosto 2016 at 19:49Oi tudo bem? eu não tenho face e nem twitter como faço para baixar as imagens mesmo assim? :/
Aryane Vitória
22 dezembro 2016 at 7:22Ainda funciona pra esse final de ano de 2016? O seu foi o mais recente que eu achei e estou com medo de bugar :/
Karoline
27 dezembro 2016 at 21:44Funciona, sim! :)
Muryel
11 janeiro 2017 at 0:16Olá, usei o tutorial, deu certo, só fiz algumas alterações! Beijos!
Lilian
7 dezembro 2017 at 16:25Fiz do jeitinho que você mandou, mas não apareceu nada. :/
Samuel Chagas
14 março 2019 at 11:56legal
https://dicashot.blogspot.com/