expr:class='"loading" + data:blog.mobileClass'>

[TUTORIAIS] Miniatura das postagens recentes com efeito fade

Olá queridos(as)! Tudo bem?

Viram essa lindeza que apareceu aí no topo do blog? Essas miniaturas recentes com efeito fade na imagem toda?



Para quem não sabe, o efeito fade é aquela transparência da foto quando passamos o mouse. Junto com essa transparência vem o nome do post.

Estava vendo muitas blogueiras com esse modelo e estava torcendo para alguém fazer um tutorial com ele õ/ hahah

Aí a Elaine Gaspareto veio e trouxe ele bonitinho assim pra gente. Portanto, o crédito do tuto de hoje vai pra ela! ♥

O efeito que teremos será esse da segunda imagem.
Então, estão a fim de aprender?

Tudo o que você tem que fazer é abrir o seu layout, adicionar um gadget e escolher a opção html / java script. Então você copia o código abaixo:

<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:70px;
margin-left: -30px;
width:1120px; ==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 0px 0px 0;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background:#fff; /*--cor de fundo das miniaturas ao passar o mouse --*/

display: block;
clear: left;
font-size: 16px;
font-family: arial;
text-transform: uppercase; /*--coloca o texto em capslock, apague se desejar --*/
line-height:1.3em;
height:320px;
height: 57.4%; /*--define a altura da legenda --*/
width:100%; /*--define a largura da legenda --*/
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 0px 0px;
padding: 119px 0px 0px 0px;
color:#666; /*== COR DA FONTE DO TEXTO==*/
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}
.bsrp-gallery .bs-item .ptitle:hover {
-webkit-transition:All 0.7s ease-in-out; -moz-transition:All 0.7s ease-in-out; -o-transition:All 0.7s ease-in-out;
filter:alpha(opacity=90);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
}
/*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="' + '">' + 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 = 280;

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>



Os lugares alteráveis já estão escritos no próprio código, e eu consegui alterar tranquilamente.

Das primeiras vezes que tentei usar esse código, por algum motivo não funcionou. Tirei, coloquei, e simplesmente não aparecia nada no blog, como se não tivesse gadget nenhum. 

Pra mim, só funcionou quando eu posicionei o gadget no crosscol-overflow, ao invés do crosscol.


Bem aqui.
Então, se tiverem o mesmo problema, tentem isso que deve dar certo. Comigo deu.

E aí, conseguiram? Gostaram? ♥

Beijocas da Thais

19 comentários:

  1. Oi Thais, te mandei mensagem no facebook, tenta vê se foi pra outras pastas. É urgente!!

    ResponderExcluir
  2. Olá Thais! Adorei a dica, mas como faz para colocar outros tipos de imagens?

    ResponderExcluir
    Respostas
    1. A imagem que irá aparecer sempre será a primeira imagem que você colocar no seu post. Vai automaticamente, Dani.

      Excluir
  3. Adoreiii, queria aprender a colocar esses gadgets

    www.byanak.com.br

    ResponderExcluir
    Respostas
    1. É suuuuper facinho, Ana! Tenta colocar, vai! Qualquer coisa te ajudo ♥

      Excluir
  4. Que ótima dica, amo esse tipo de post, sem falar que deixa nosso blog ainda mais fofo néh?

    amei o seu, já favoritei aqui para voltar. Bjitos sua linda!

    http://petalasdelicadas.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Siim, eu geralmente gosto de trazer as novidades que aprendo pra vocês. Deixa nosso blog tão fofo <3

      Excluir
  5. Ameii o Tutorial Thais!Deu Super certo!
    Mas eu tenho uma dúvida: Como faço para diminuir o tamanho (não a largura) do slide?
    Qual foi o tamanho que você utilizou no do seu blog?
    Beijos

    ResponderExcluir
    Respostas
    1. Olá querida! Tudo bem? Então, não sei se entendi sua pergunta.. Você quer alterar o tamanho das imagens?
      Para isso, você precisa mexer tanto no tamanho das imagens como na largura do slide. A altura se ajusta automaticamente.
      Para alterar a largura do slide é só ir lá no comecinho do código onde tem "width:1120px; ==LARGURA DO SLIDE==". Altere como desejar.
      Para alterar o tamanho das imagens, é só alterar aqui "var bsrpg_thumbSize = 280;".
      Vá ajustando o tamanho até ambas entrarem em harmonia (slide + imagens).
      Espero que tenha entendido! Qualquer dúvida é só me falar, tá?

      Ah! No meu eu alterei assim: "width:1000px; ==LARGURA DO SLIDE==" e assim: "var bsrpg_thumbSize = 250;"

      Beijocas da Thais! ♥

      Excluir
  6. Ameii o Tutorial Thais!Deu Super certo!
    Mas eu tenho uma dúvida: Como faço para diminuir o tamanho (não a largura) do slide?
    Qual foi o tamanho que você utilizou no do seu blog?
    Beijos

    ResponderExcluir
  7. Oi querida, bom, o único erro do meu foi que ficou em círculo, como faço pra deixar quadrado? Bjs.
    www.baudagarotacrista.com

    ResponderExcluir
  8. Obrigada, gostei muito do tutorial, só que o meu também ficou um círculo e eu queria um quadrado. como faço?


    http://byluzalves.blogspot.com.br/

    ResponderExcluir
  9. Boa tarde Thais, td bem? Já tentei inumeras vezes mas não consigo de forma alguma acrescentar as postagens. Somente aparece o titulo mas nada des postagens. Ou então fica um espaço mas sem imagens. Por favor me socorre.

    ResponderExcluir
  10. Boa noite, finalmente consegue muito obrigado pela ajuda. Escrevo directamente de Mozambique.

    ResponderExcluir
  11. Veja como fico. LINK: https://musicaki4u.blogspot.com/

    ResponderExcluir
  12. Oioi!!! Obrigada por disponibilizar esse tutorial!!! Passei horas tentando e só o seu deu certo! Valeu demais e vou citar seu post lá no blog! Muito obrigada :)

    Beijinho

    EVENTUAL OBRA DE FICÇÃO

    ResponderExcluir