04/03/2016

Slide com Postagens recentes com título dos post



Olá Amores!

Algumas de vocês me pediram um tutorial sobre slide. Ultimamente algumas blogueiras estão usando este modelo que uso no blog,  é o que vou ensinar pra vocês que usam o blogger.


Para instalar basta clicar em layout, depois adicionar gadget e em seguida clicar em adicionar HTML/JavaScript, cole este código abaixo dentro da caixa.



<center><style type="text/css">
/*INICIO CSS FOTOS slide www.ahbonita.blogspot.com*/
.bsrp-gallery {
margin-top:70px;
width:1000px; ==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: #8B1A1A ; /*==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:12px; /*==TAMANHO DO TITULO==*/
line-height:1.3em;
height:50px;
position: absolute;
bottom:0%;
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 : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkV0yr0eAyMp7LzrChb8v3BpO_qrYeQUQJXjx9QJ0DZHW_J-hHQ-VZ-6w52xZlFctM7_2i2ZmBQG4Pqldzsq6ialTPCv3KNXP4u5KTIja5oQlNKxPAkRgqx1HGWoucSmuTtBVqhL3fqI0R/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 = 200; 

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>


 
Se quiser pode fazer alterações como cores, tamanho do slide e quantos posts vai querer exibir, depois de tudo feito salve e arrastar para o lugar onde quer que apareça...

Obs.: Amores eu só peço que não retire os créditos, qualquer dúvida me falem!  Se gostar, ou for usar não deixe de comentar ok amores!

Beijos



11 comentários:

  1. Vou tentar fazer aqui no meu blog. Fica SUPER lindo, e é bem facil <3
    Beijinhos

    bloglorraynesouza.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Que bom que gostou Lorrayne, é super fácil de instalar...
      Obrigada pelo carinho e por comentar!

      Beijos

      Excluir
  2. Amei os slides.. não sou mt fã para o meu blog, porque ele tem uma pegada um pouco diferente.. mas quando entro em blogs que combinam e que tem eu acho o máximo! bjs http://www.ellascomele.com.br

    ResponderExcluir
    Respostas
    1. Verdade, não é todo blog que combina...
      Obrigada pelo carinho e por comentar!

      Beijos

      Excluir
  3. Muito bacana!
    Estava procurando isso mas, nunca achava. Ajudou muito.
    Vou fazer um teste ;)
    Muito obrigada.
    Bjs e muito sucesso!
    http://www.thegirlofredlipstick.com/

    ResponderExcluir
    Respostas
    1. Fico feliz em saber que gostou Rayane...
      Obrigada pelo carinho e por comentar!

      Beijos

      Excluir
  4. Nossa amei o post flor ,e uma ótima dica para blogueiras iniciantes e experientes também ,irei fazer aqui no meu blog da uma passadinha lá depois para ver o resultado bjs <3
    http://espacomulherao.blogspot.com/

    ResponderExcluir
    Respostas
    1. Este comentário foi removido pelo autor.

      Excluir
    2. Oi Eduarda, se você gostou use ele é bem prático, e ainda você pode trocar as cores onde fica o titulo de acordo com o seu blog...
      Obrigada pelo carinho e por comentar!

      Beijos

      Excluir
  5. flor como faço para deixar apenas tres quadrados ?

    ResponderExcluir
  6. Olá, tudo bem amore?
    Então é só você substituir o 4 por 3 no final do código.
    Ex: numposts+"&max-results=4&
    Abraços 😙

    ResponderExcluir

Seja Bem Vindo ao Blog Ah! Bonita.

- Chegou até aqui, não custa comentar, ficarei muito feliz em ler.


MAIS ATENÇÃO!

- Leia o post antes de comentar!
- Comentários ofensivos serão excluídos.
- Se tiver alguma dica, crítica ou o que for, pode deixá-la aqui, mas faça com jeitinho, sou sensível.
- Se deixar o seu link clicável, eu vou retribuir seu comentário, pode ter certeza, da mesma forma que não deixar o link pode resultar em falta de retribuição;

Obrigada por fazer parte desse cantinho, volte sempre!

Abraços...

Desenvolvimento por: Mariely Abreu | Todos os direitos reservados ©. voltar ao topo