Casinhas \o/

10.7.15

Slide de Postagem Recente

Hello Victorius!
Tudo Bem com Vocês?
Eu queria avisar a vocês do meu novo projeto, o Rapidinhas!
A pedido da S. (obrigada) hoje eu vim trazer um tutorial de como colocar um slide não automático em forma de quadrado de postagem recente, que eu usei no layout free diamonds.
Eu aprendi esse tutorial no MelanCria HTML da Hina,então créditos a ela.
Preview:

Lerigou the post?
Vá em Layout>>Adicionar Gadget>>E cole isso:
<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: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>//byjanafunction 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/AVvXsEjfcyzlJ9vmJV3GBID7ueFrMprMdQhhLzzRXKBnI84QZFbbTcU58rnTa8sjAf8zBALB-uyrjzgNWDX4BYHGXyulVcab3tl-Dmx3e2OclBz5am5bZDEXzDm6oDoHDwKAPKXGLTkKdQ3-KgCG/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 =1var 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>

Onde tem as partes indicadas em vermelho é onde você pode alterar ! 
A parte destacada "numposts =1 "  está indicado que mostrará as postagens recentes e a

 quantidade de miniaturas . quando não mudar por ele, tente no 4&orderby que vai, troque o 4 por o numero que de miniaturas que quiser!
Onde tem : var bsrpg_thumbSize = 255;  É  o tamanho das fotos .

E esse foi o tutorial de hoje !
Espero que vocês tenham gostado!
Obrigada a S. Por pedir um tutorial! Peçam tutoriais também!
Beijos Vii

22 comentários:

  1. Obrigada por fazer o tutorial Vii,eu amei ^^
    Bjs

    ResponderExcluir
  2. Eu acho legal isso no blog, mas não gosto muito dele, se me entende. O que eu queria (Túlio sendo chato de novo) é de como deixar o primeiro gadget sem fundo sabe? E a propósito, vi que o tutorial do rodapé não estava mais aqui, você pode postá-lo novamente (isso se não foi um engano meu ><)?
    Beijos! ❤

    ResponderExcluir
    Respostas
    1. Rsrs, eu sei sim, te entendo. Chato? Que nada! Adoro fazer tutoriais pedidos! Tá okay, vai demorar um pouquinho porque de tantos tutoriais pedidos o blog ficou com um ar só de tutos e goodies, entende? Sim, sem querer eu exclui a postagem, eu posto novamente!
      Beijos

      Excluir
  3. Oi Vii!Esse tuto com TODA certeza estara no novo layout do SC!
    Fica tão profissional,eu amo!
    Beijos <3

    ResponderExcluir
  4. Oe :3
    Achei o modelinho do slide da postagem recente super fofinho, pena que já trocamos o layout do blog e não da para adicionar mais coisas, quem sabe no próximo ?
    Mesmo assim gostei bastante. :3
    Beijos!
    Com carinho Breh do blog Crazy Cake

    ResponderExcluir
    Respostas
    1. Oii Que bom, mas que pena, mas o layout do CC ficou muito lindo, eu adorei <3
      Beijos

      Excluir
  5. Oi Vii!
    Qual projeto?
    Eu acho esse slide muito bonito ♥ o tutorial é bem fácil né? >_<
    Adorei a postagem, beiijooss ♥

    http://designer-lovers.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi Koutari!
      O projeto é o meu novo blog com a minha amiga! Mas eu esqueci de atualizar a postagem avisando!
      È bem fácil memso! >-<
      Obrigada
      Beijos

      Excluir
  6. Que tutorial fofo, eu sempre achava esse de posts recentes, mas n com a faixa de legenda assim em baixo, muito fofo!
    Que projeto? ^^
    Adorei seu blog, seguindo!
    meuladoana.blogspot.com

    ResponderExcluir
    Respostas
    1. È bem fofo mesmo! >-<
      O projeto do meu novo blog com a minha amiga, mas eu esqueci de atualizar a postagem!
      Obrigada! Fico grata :)
      Beijos

      Excluir
  7. Achei o tutorial bem legal! Gosto desses tipos de slide :D
    Lindo o blog! Seguindo ;)

    ~September Rains

    ResponderExcluir
  8. Adorei o tutorial acabei de postar um também no meu blog a pedido de algumas leitoras rsrs já seguindo o seu novo projeto!
    Beijinhos!
    Visita? http://meninafashion-oficial.blogspot.com.br/

    ResponderExcluir
  9. Olá vitória <33
    Eu sempre sonhei em colocar um slide no blog, colocarei quando combinar com meu layout, sempre que tentei saia errado. Vou tentar esse tuto quando der, espero que funcione!

    Xoxo~Cake-sugar

    ResponderExcluir
    Respostas
    1. Oi Myu! <33
      Eu também! Toda vez que eu tentava não aparecia, neste layout foi! E no free também. Funcionará sim, garanto!
      Beijos

      Excluir
  10. Olá, Vii!

    Que legal esse tutorial, vou testar ele lá no meu blog de testes o// Você explicou muito bem.

    Com carinho, Clara

    // n-found.blogspot.com

    ResponderExcluir
  11. Ah que legal. Eu queria saber era daqueles que você coloca uma imagem linkada no blog tipo isso aí, mas quando clica em cima o nome do post aparece. Será que eu expliquei bem?! kkkkkkk mas esse é bem legal também. E nem parece ser tão difícil.

    Inquietudes Secretas

    ResponderExcluir
    Respostas
    1. Obrigada.
      Hum...acho que sei qual está falando, eu vou ver se consigo fazer no blog de teste e trazer aqui okay?
      Não é tão difícil!
      Beijos

      Excluir

✗Não fale palavrões, deixe sua opinião mas com educação
✗Aceito Tags
✗Deixe o link do seu blog, irei visitá-lo
✗Troco comentários
✗ Antes de pedir algo, fale sobre o post.
✗Aceito: ¨Segue de volta" e caso parar se seguir o VV também paro de seguir seu blog.
✗Enfeite seu comentário:웃 ღ ♡ ❤ ❥ ❦ ∴ △ ∞ ☆ ★ ✖  。◕‿◕。 ® ™ ☏ ℡゚✤ ❝ ❞ ✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✱ ✲ ✳ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✻ ✺ ✹ ✸ ✷ ₪ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❖ ▲ ▼ △ ▽ ⊿ ◤ ◥ ◣ ◥ ● ❣ ✐ ✎ ✏ ✍ ✆ ☎ ✄ † ✞ ✝ ⌚۩  ๑ ۩ ۞ ๑  & ☗ ☖ ☑ ☒ ☓☟ ☠ ☡ ☢ ☣ ☤ ☥ ☦ ☧ ☨ ☩ ☪ ☫ ☬ ☭ ☮ ☯ ➹◎ ☁ ☀ ☃ ☂ ♣ ♥ ☼ ✗ ✘ ✚ ✪ ✣ ✤ ✥ ☠ ♢ ♤ ♡ ♧ ☽ ☾ ◯ ☚ ☛ ☜ ☝ ☞ ☟ ✌ ☼ ☀ ❂ ☁ ☂ ☃ ☄ ☾ ☽ ❄ ☇ ☈ ⊙ ☉ ℃ ℉ ° ❅ ✺ ϟ ⓘ ⓛ ⓞ ⓥ ⓔ ⓨ ⓞ ⓤ ∞ ♪ ♫ ♩ ♭ ♯ ♬ ♔ ♕ ♖ ♗ ♘ ♙ ♚ ♛ ♜ ♝ ♞