17 janeiro 2016

Slide de Posts Recentes Personalizado


Existem 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

Marquei os códigos com as cores de acordo com a explicação, para ser mais fácil localizar os lugares.
Cuidado ao modificar o código, para não apagar nenhuma vírgura, ponto, ou código a mais. Na parte dos números mude apenas os números. 
  • Mude o http://seublog.com/ pelo endereço do seu blog (inclusive o http://) por exemplo: http://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. 

Depois de arrumar é só salvar. Espero que consigam e que tenham gostado. Se não conseguirem, deixem nos comentários, ou mandem mensagem pela Fan Page, assim posso te ajudar mais rápido!

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

Comente com o Facebook:

20 comentários:

  1. Miga que blog AMORRRR <3
    Eu aprendi com a Eliane também hahaha!!
    SERIO SEU BLOG É LINDOO!!! ME ENSINA kkkkkk
    Blog Li Mais Um

    ResponderExcluir
    Respostas
    1. KKKKKKKKKK, muito obrigada linda, de verdade <333

      Excluir
  2. Adoreeeei! Deu super certo! Obrigada por compartilhar.
    Mas será que tem como fazer ele passando? Que nem fica aí no seu blog?
    Beijos

    ResponderExcluir
    Respostas
    1. 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!

      Excluir
  3. Esse slider ficou super lindo no meu blog♥
    Adorei♥
    http://rafaelleventura.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que gostou Rafaelle, fico feliz em ajudar! Beijos <3

      Excluir
  4. Amei o tutorial, estava procurando um tutorial de slide nesse estilo a um tempão e veja só, esse funcionou direitinho hahahahaha :D
    Obrigada por disponibilizar <3

    http://believetempodeacreditar.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obaaa, que bom que funcionou hehe, fico feliz em ajudar. Beijos!

      Excluir
  5. Você sabe para Wordpress.org ?? Queria um posts relacionados onde o titulo aparece quando passa o mouse em cima igual este. Beijos
    www.charme-se.com

    ResponderExcluir
    Respostas
    1. 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/

      Excluir
  6. Consegui colocar no meu blog, obrigada!
    http://isaberenice.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oba, fico feliz que tenha conseguido! Beijos <3

      Excluir
  7. 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!
    www.gisabarone.com.br

    ResponderExcluir
    Respostas
    1. 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

      Excluir
  8. Oi Larissa, adorei o tutorial e tentei num blog de testes, porém não consigo centralizá-las no topo ;/

    ResponderExcluir
    Respostas
    1. Oi Keila, tudo bem? Eu atualizei o tutorial, ta bem no finalzinho dele explicando, da uma olhadinha. Beijos!

      Excluir
  9. como faço pra ajeitar a largura e altura? queria por tipo o seu

    ResponderExcluir
    Respostas
    1. Oi Gleice, eu atualizei o tutorial, ta bem no finalzinho dele explicando, da uma olhadinha. Beijos!

      Excluir
  10. 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

    ResponderExcluir
    Respostas
    1. deixa miga, eu achei, tava mexendo na margem do lugar errado

      Excluir

Butlariz • contatobutlariz@gmail.com Feito com ♥ por Lariz Santana / Moonly Design