Slide de Posts Recentes Personalizado
TutoriaisExistem vários motivos para querer colocar slides de posts recentes no blogger. Por ser bonito, dar um charme no layout do seu blog, e principalmente por ser muito útil ao mostrar seus últimos posts, levando as pessoas a clicarem nas imagens e passarem mais tempo no seu blog.
Os slides que ensinarei por, são do blog Elaine Gaspareto, o código original é dela. Eu apenas editei um pouco a aparência pra ficar mais moderno e bonitinho.
Vamos ao tutorial o/
Vá em layout, e depois em adicionar gadgets (onde desejar que os slides apareçam). Selecione a opção HTML/Javascript e cole o seguinte código:
<div class='widget-content'>
<style type="text/css">
/* CSS - Destaque de posts */
.bsrp-gallery {
overflow:hidden;
width: 1500px;
clear: both;
position: relative;
margin: auto;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 0 0 0px;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
transition-duration: .4s;
background: ; /*--cor de fundo das miniaturas ao passar o mouse --*/
display: block;
clear: left;
font-size: 13px;
font-family: arial;
text-transform:uppercase; /*--coloca o texto em capslock, apague se desejar --*/
line-height:1.3em;
font-weight:bold;
height: 100px; /*--define a altura da legenda --*/
width: 140px; /*--define a largura da legenda --*/
position: absolute;
bottom:-100%;
text-align: center;
padding:100px 30px 30px 30px;
color:#000000; /*--cor da fonte do texto--*/
word-wrap: break-word;
overflow:hidden;
}
.bsrp-gallery .bs-item:hover .ptitle {
bottom: 0%
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
opacity: 0.3;
}
/* CSS FIM */
</style>
<script>
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="by elainegaspareto.com, adaptado por butlariz.com">'];
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 + '">' + 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 = 200; /*--define o tamanho das miniaturas --*/
var bsrpg_showTitle = true;
document.write("<script src="http://seublog.com/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery"></script>");</script>
</div>
<div class='clear'></div>
Alterando o código
- Mude o http://seublog.com/ pelo endereço do seu blog (inclusive o http://) por exemplo: https://butlariz.com/
- 200 é o tamanho de cada imagem, (altura e largura) se ficar pequeno, aumente o número, se ficar grande, diminua. Tentativa e erro até conseguir.
- Se você mexeu no tamanho, pode ser que a legenda da imagem (o texto que aparece quando passa o mouse) desconfigure. Para consertar, procure no código por width: 140px para mudar a largura, height: 100px para mudar a altura.
- Para modificar a quantidade de slides: results=4 o número 4 indica a quantidade, troque pelo número desejado.
Upddate 01/09: Para quem não estava conseguindo centralizar os slides, é só mudar o width: 100% para width: 1500px onde eu marquei ali em cima nos códigos dessa mesma cor. Teste para ver como ficou. Se ainda não estiver centralizado diminua o valor 1500px (1400, 1300, 1200) até ficar centralizado. Se um dos quadradinhos descer, quer dizer que o valor é muito pequeno, e você deve tentar maior (por exemplo: 1450px, 1475px, etc).

Talvez você goste:
Miga que blog AMORRRR <3
Eu aprendi com a Eliane também hahaha!!
SERIO SEU BLOG É LINDOO!!! ME ENSINA kkkkkk
Blog Li Mais Um
KKKKKKKKKK, muito obrigada linda, de verdade <333
Adoreeeei! Deu super certo! Obrigada por compartilhar.
Mas será que tem como fazer ele passando? Que nem fica aí no seu blog?
Beijos
Esse slider ficou super lindo no meu blog♥
Adorei♥
http://rafaelleventura.blogspot.com.br/
Amei o tutorial, estava procurando um tutorial de slide nesse estilo a um tempão e veja só, esse funcionou direitinho hahahahaha 😀
Obrigada por disponibilizar <3
http://believetempodeacreditar.blogspot.com.br/
Você sabe para WordPress.org ?? Queria um posts relacionados onde o titulo aparece quando passa o mouse em cima igual este. Beijos
http://www.charme-se.com
Consegui colocar no meu blog, obrigada!
http://isaberenice.blogspot.com.br/
Oi, Larissa, eu consegui colocar, mas gostaria de escolher as postagens. Tem como eu escolher as postagens? Porque eu quero colocar as postagens que mais tem visualizações! Beijinhos!
http://www.gisabarone.com.br
Então Giselle, pra colocar as postagens mais visualizadas teria que ser um slide de posts populares, e não recentes. Esse é automático, ele aparece só as recentes. Vou fazer em breve um tutorial de postagens populares e um pra você escolher as postagens! Beijos <3
Oi Larissa, adorei o tutorial e tentei num blog de testes, porém não consigo centralizá-las no topo ;/
como faço pra ajeitar a largura e altura? queria por tipo o seu
Oi Gleice, eu atualizei o tutorial, ta bem no finalzinho dele explicando, da uma olhadinha. Beijos!
Oi Keila, tudo bem? Eu atualizei o tutorial, ta bem no finalzinho dele explicando, da uma olhadinha. Beijos!
Oba, fico feliz que tenha conseguido! Beijos <3
Oii, esse tutorial me ajudou muito a fazer tanto os posts recentes quanto os relacionados no wordpress, se você entender um pouco de PHP da pra fazer com esse tutorial: http://www.coisasdeblogueiras.com/tutoriais/como-fazer-posts-em-destaque-responsivos-no-wordpress/
Obaaa, que bom que funcionou hehe, fico feliz em ajudar. Beijos!
Que bom que gostou Rafaelle, fico feliz em ajudar! Beijos <3
Oi Carla, o slide passando é outro script, não fiz tutorial dele ainda, talvez eu faço em breve, mas não sei ainda. Beijos!
miga, me dá um help pf, como eu faço pra colocar margem e centralizar? a dica que você deu não altera em nada no meu e as fotos estão todas uma ao lado da outra sem espaçamento
deixa miga, eu achei, tava mexendo na margem do lugar errado
No meu até que deu meio certo, porque nas imagem que eu hospedei no blog aparece no slide e as que eu peguei de url não aparecem, até os de teste isso tá acontecendo, você sabe porquê?
Oie, eu não consegui instalar. Não aparece absolutamente nada 🙁
eu queria dar um pequeno espaçamento entre cada imagem, como faço?
Pior que aconteceu comigo, o mesmo !
Oi lari eu queria saber se é possivel colocar uma linha em torno das miniaturas
oi lari, eu não sei o porque não está dando certo !Eu fiz tudo certinho,refiz até criei um blog teste mas não dá ceto!
Lary qual o tamanho das miniaturas do seu slide?
Amei a dica vou testar!
Oi, me dá um help? O slide funcionou direitinho, porém o espaço entre ele e o cabeçalho ficou muito espaçado, queria saber se tem como me ajudar nisso. Agraço muito, muito, muito se puder !
Conseguiiiii, amore muito obrigada pela dica sério me ajudou tanto s2. Sucesso !!
https://fashionmarigoes.blogspot.com.br/
Canal
Recomendo
Fan page
Populares
Mood
butlariz
🌺 Escrevo códigos e textos
💻 Tecnologia, carreira, cotidiano
⚠️ GUIA DE ESTUDOS PROGRAMAÇÃO:
👇🏽 Aula 1 disponível
Error: API requests are being delayed for this account. New posts will not be retrieved.
There may be an issue with the Instagram access token that you are using. Your server might also be unable to connect to Instagram at this time.