❤ Para Blogs : Slides automáticos de postagens recentes !! ( atualizado )

.................................................................................................
Olá lindoonas !! 
  Tudo bem ?

No post trago um tutorial suuper fácil de como colocar slides de postagens recentes no blog, E o legal desse slides que vou ensinar aqui hoje, é que você não precisa  ficar editando fotos, links e HTML toda vez que for fazer uma nova postagem pois ele é automático e faz tudo sozinho <3 Então ? Bora conferir ?! ;) 
Bom galera, essa é uma repostagem de um post que já tinha feito a um tempo atrás, mas os códigos estavam dando erro e vocês me avisaram, no inicio achei que era alguma coisa com a forma de espaçamento entre os códigos,mas depois de alguns testes.... gente! o erro era um número apenas, da para acreditar ? hahaha. Mas infelizmente só consegui identificar o erro  dos slides quadrados, então os redondos ficam para um outro post ok ?  Obrigado por me avisarem! e desculpe a demora para correção! Testem de novo e me contem se conseguiram ok ?  Então vamos ao tutorial que agora vai !! hahaha. 

Slides Quadrados| 

 Passo 1:   Vá em Layout > adicionar um Gadget > HTML/ Java Script e cole o código abaixo dentro dele ( lembre-se de deixar o gadget sem título ) :
_________________________________________________________________________

<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:70px;
width:1300px; ==LARGURA DO SLIDE==
float:center; ==POSIÇÃO DO SLIDE==
clear:both;
}

.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 10px 15px 0;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background:#000; /*==COR AREA DE TITULO==*/

display: block;
clear: left;
font-family: 'georgia', cursive; ==FONTE DO SLIDE==
font-weight:200;
text-transform:uppercase; /*==TDS LETRAS MAIÚSCULAS==*/
font-size:13px; /*==TAMANHO DO TITULO==*/
line-height:1.3em;
height:50px;
position: absolute;
bottom:5%;
text-align: center;  /*==POSIÇÃO DO TITULO==*/
color:#fff; /*== COR DO TITULO==*/
width:95%;
padding:6px;
word-wrap: break-word;
overflow:hidden;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img { 
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8; 
}
/*FIM CSS FOTOS*/
</style>
<script>
//byjana
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from poderondesign">'];
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://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/s72-c/default+image.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 =1
var bsrpg_thumbSize = 255;  

var bsrpg_showTitle = true;

document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>

_________________________________________________________________________

❤ O que estiver escrito em letra caixa alta é o que se pode ser alterado como: Cor do título,posição do slide, e etc... Só altere  partes com as especificações em letras maiúsculas ao lado ok ?  Depois disso salve as alterações e visualize o blog para ver como ficou. Os slides ficaram como os daqui do blog.

*Quero lembrar que não sou a criadora desses slides, apenas testei o slides aqui no blog e amei <3 por isso resolvi compartilhar com vocês!

Espero que tenham gostado e que dessa vez de certo! comentem aí! Siga o blog para ficar sabendo em primeira mão os próximos posts!! 

Beijos e fiquem com Deus !! 
  Até a próxima !! 


                                                                           
                                                       

                                                                 






18 comentários:

  1. Adoreei, obrigada por compartilhar seu conhecimento, da uma olhada como ficou, só falta eu organizar <3
    www.blogdanannes.blogspot.com

    ResponderExcluir
    Respostas
    1. Oii Alane ^-^
      Fico muito feliz que tenha gostado lindona ! ficou lindo no seu blog, agora só falta colocar os slides acima da área do post certo ? achei seu blog lindo =D
      Obrigada por comentar !
      Beijos e fique com Deus !!

      Excluir
  2. Oii, eu consigo colocar isso logo em baixo da capa? algo assim, ao invés de tão lá em baixo.

    ResponderExcluir
    Respostas
    1. Oii Paula ^-^
      Você quer colocar os slides logo abaixo do cabeçalho/nome do seu blog ? se for isso, basta ir em LAYOUT e arrastar seu gadget de slides para de baixo dos gadgets de CABEÇALHO ou PÁGINAS
      Espero ter ajudado, e se essa não for a dúvida ou se tiver outra pode deixar aqui nos comentários ou e mandar por e-mail ok ?
      Beijos e fique com Deus !!

      Excluir
  3. Stefany ,boa noite meu slide ta dando erro ta aparecendo uma barra cinza atras do slide me ajuda por favor

    ResponderExcluir
    Respostas
    1. Olá ^-^
      Essa faixa que aparece no slide provavelmente é do menu que geralmente fica debaixo do cabeçalho do blog ( aquele padrão do blogger sabe ? ) para resolver esse problema basta ir no HTML do seu template e retirar a parte do código referente a esse menu. Para fazer isso acesse a caixa de código do seu blog e procure por: /* Tabs logo abaixo você vai encontrar algo parecido com isso :
      /* Tabs
      ----------------------------------------------- */
      .tabs-inner {
      margin: 1em 0 0;
      padding: 0;
      }
      .tabs-inner .section {
      margin: 0;
      }
      .tabs-inner .widget ul {
      padding: 0;
      background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
      }
      .tabs-inner .widget li {
      border: none;
      }
      .tabs-inner .widget li a {
      display: inline-block;
      padding: 1em 1.5em;
      color: $(tabs.text.color);
      font: $(tabs.font);
      }
      .tabs-inner .widget li.selected a,
      .tabs-inner .widget li a:hover {
      position: relative;
      z-index: 1;
      background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center;
      color: $(tabs.selected.text.color);
      }
      ( isso se você nunca tiver modificado seu menu, caso sim e o menu não for acima do cabeçalho, tire o código já editado e coloque um meno como o daqui do blog ) depois que achar esse código apague tudo que estiver em baixo de /* Tabs até essa última chave acima,salve e faça o processo do slides novamente. Para que não fique essa faixa atrás dos slides é recomendado que seu menu fique em cima da página como aqui no blog.
      Espero ter ajudado, desculpe a demora para responder seu comentário !
      Beijos e fique com Deus !!

      Excluir
  4. amei a dica, mas onde muda o numero de posts eu ponho 3 mas só ficam 4 :(
    o que eu faço?

    ResponderExcluir
    Respostas
    1. Olá Anni ^-^
      Fico feliz que tenha gostado! sobre o número de posts, talvez seja necessário um número minimo de quadrados mas você também pode apagar os códigos ( que vc já adicionou dos slides ) e tentar fazer tudo de novo, as vezes pequenos errinhos que não percebemos fazem o HTML dar errado rsrs...
      Obrigada por comentar !
      Beijos e fique com Deus !!

      Excluir
  5. Lindo blog, me ajudou muito.
    Mas o meu fica muito à direita. Pode me ajudar?

    ResponderExcluir
    Respostas
    1. Olá Jessica ^-^
      Muito obrigada, fico feliz que o post tenha te ajudado! Sobre os slides ficarem muito a direita, certifique que onde está escrito POSIÇÃO DO SLIDE esteja especificado como center, assim :
      float:center; ==POSIÇÃO DO SLIDE==
      Se isso não funcionar tente refazer todo o processo, afinal com HTML é preciso ter muita paciência hahhahaha.
      Beijos e fique com Deus !

      Excluir
  6. Respostas
    1. Oii Bia ^-^
      Que pena ! mas tenta de novo, as vezes algum coisa no HTML ficou afastada da outra ou algo do tipo. Com HTML é preciso ter muita paciencia ( eu que o diga ! hahaha ) as vezes são pequenos errinhos que nós nem percebemos ! tente fazer todo o processo novamente.
      Beijos e fique com Deus !

      Excluir
  7. Oi flor ♥ Amei o tutorial, mas as postagens estão antigas e não as mais atuais :(

    ResponderExcluir
    Respostas
    1. Oii Fernanda ^-^
      Fico feliz que tenha gostado do tutorial. Os códigos estão dando problema neh ? Vou refazer os testes e ver o que tem de errado o mais rápido possível ok ? ( vou ver se consigo ainda essa semana rs.. ) Então fique ligadinha aqui no blog que por essa semana vejo se consigo achar o erro.
      Beijos e fique com Deus !!

      Excluir
  8. olá adorei a dica, fiz tudo certinho, mas no meu blog nao esta centralizando, mesmo alterando .

    ex:


    .bsrp-gallery {
    margin-top:480px;
    width:1290px; ==LARGURA DO SLIDE==
    float:center; ==POSIÇÃO DO SLIDE==
    clear:both;
    }

    mesmo assim nao está centralizando, ja fiz e refiz varias vezes.

    ResponderExcluir
    Respostas
    1. Olá Carol ^-^
      Tente mexer na largura do seu blog, em Modelos. Talvez os slides estejam grandes ou pequenos demais para a largura do seu blog. Fico feliz que tenha gostado da dica ! Espero que consiga colocar tudo direitinho ai ;)
      Beijos e fique com Deus !!

      Excluir
  9. Olá!!Assim como os outros,esse foi perfeito!!!Você comentou lá no blog,então eu tive uns probleminhas,(de estetica mesmo)e não consegui consertar então o meu novo blog é esse:
    http://ossegredosdamaria.blogspot.com.br/
    Até mais!!Um beijo maria

    ResponderExcluir
    Respostas
    1. Oii Maria ^-^
      Que bom que gostou desse post ! Vsitei seu novo blog e ele também está com um cabeçalho bem bonito !! :)
      Beijos e fique com Deus !!

      Excluir

Related Posts Plugin for WordPress, Blogger...