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 : '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 = 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




9 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

Seja Bem Vindo ao Blog Ah! Bonita.

Gostou do post deixe seu comentário, ficarei muito feliz em ler.

- Você pode dar sugestões de temas para os próximos posts ou simplesmente a sua opinião...

MAIS ATENÇÃO!

- Leia o post antes de comentar!
- Comentários ofensivos serão excluídos.


Obrigada por fazer parte desse cantinho, volte sempre!

© Ah! Bonita - 2016 | Todos os direitos reservados.
Desenvolvimento por: Jaque Design | Tecnologia do Blogger.
imagem-logo