Slide de postagens recentes, vamos aprender a colocar no blog?

| | Comentários: 9

Slide de postagens recentes para blogs

É meus amigos!!
Mais um super tutorial para vocês!!
Aprenda a colocar um slide de postagens recentes no seu blog.
Para dar certo, vai depender de suas configurações do seu layout.
Postagem que ensina a colocar o slide de postagens recentes no blog, assim facilitando o leitor na hora de ler as postagens.


Como nós iremos mexer somente no na página LAYOUT, ficará mais fácil excluir, caso dê algo de errado.


O slide automático de postagens recentes, será na forma retangular.

Então vamos aprender!!! Deixem seus comentários!!! Bjss!!

Observação: Para esse tutorial dar certo no seu blog, na parte layout, precisa ter aquela parte de adicionar um gadget perto do cabeçalho,para ele ficar no alto e certinho!!




1º passo: Vá em  LAYOUT+ADICIONAR UM GADGET+HTML/JAVASCRIPT ( cole todo o código abaixo ).

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



Tudo que estiver em letra de forma maiúscula é o que pode ser alterado.Eu não alterei nada, pois o gadget ficou certinho no meu blog Mundo Colorido da Criança.Veja clicando aqui


Se tudo estiver certinho para você é só SALVAR!!!

No meu blog Mundo Colorido da Criança, o slide automático de postagens recentes, ficou super perfeito.Cada postagem que eu faço, ele é alterado automaticamente.


 Leia também: Coloque botão de voltar ao topo.
                                     Colocando efeitos em fotos.



Slide de postagens recentes para blogs







                       
                                                   
                                                                           

9 comentários:

  1. Amiga, indiquei a Agenda dos Blogs para Blog de Ouro lá na Ilha da Lindalva!
    Boa sorte! Visite o link e veja como será a Eleição!
    http://festa-na-ilha2.blogspot.com.br/p/2016-brincadeiras-pag-principal.html
    Beijos!

    ResponderExcluir
    Respostas
    1. Magda, querida! Eu tb lhe indiquei, és merecedora do prêmio pelo ótimo trabalho que realizas na blogosfera. Maiores informações no comentário da Sol, risos! Bjs

      Excluir
  2. Uauuuuuuuuuu obrigado amadam! mais uma vez você me ajudando!obrigado por compartilhar vou tentar fazer! beijinhosssssss
    Rúbia

    ResponderExcluir
  3. Magda muito obrigada por dedicar seu tempo tentando nos ajudar botei e ficou lindo obrigada de verdade

    http://etudovaidadeh.blogspot.com.br/

    ResponderExcluir
  4. Muito legal essa dica.
    Www.katiamagal.com

    ResponderExcluir
  5. Uaaaaaau adorei o post!! Muito obrigada !!

    http://enfermageandoporamoreorgulho.blogspot.com.br/

    ResponderExcluir
  6. Oii! Queria saber como controlar a quantidade de postagens que aparece? pq aparece 4 e eu preciso de 6... obrigada!

    ResponderExcluir
    Respostas
    1. Na ultima linha do código
      Aonde está o número 4, vc apaga e coloca a quantidade que vc quiser,ok.Bjss

      Excluir
  7. Amei seu post... testei vários tutoriais mas o se foi o único que funcionou... até consegui alterar as cores e tamanhos... muito obrigada pela ajuda...
    se quiser ver como ficou meu blog é o www.itsbrunaqueiroz.com
    Bjuss

    ResponderExcluir

Eu agradeço a todos por comentarem no meu blog e assim que for possível, estarei respondendo aos comentários de todos.Bjsss!!