Slide de Postagem Recente (2 Modelos)

02 março 2016

Olá! Tudo bom do lado dai? Comigo está tudo ótimo!
A pedido de uma leitora, hoje vou ensinar a colocar um Slide de Postagem Recente. O legal desse slide é que você não vai precisar edita-lo sempre que criar um post. É bem simples. Postou, o slide capta automaticamente.




Além da praticidade, ela deixa o visual do blog, muito mais lindo (cute cute) hihi.

Então chega de enrolação, e vamos ao Tutu de hoje 0/



Na área administrativa do seu blog, clique em LAYOUT - ADICIONAR GADGET - HTML JAVASCRIPT e coloque o seguinte código:

MODELO 1 (Redondo)

<div class='widget-content'>
<style type="text/css">
/* CSS - Destaque de posts */
.bsrp-gallery {
width:100%;
clear:both;
margin-left:-15px;  /*--posicionamento à esquerda, altere se precisar--*/
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 0 0 15px;
text-decoration:none;
border-radius:130px;  /*--define o grau de arredondamento da imagem, --*/
-moz-border-radius:130px; /*--define o grau de arredondamento da imagem, --*/
-webkit-border-radius:130px; /*--define o grau de arredondamento da imagem, --*/
}
.bsrp-gallery .bs-item .ptitle {
background: #FA5882; /*--cor de fundo das miniaturas ao passar o mouse --*/
display: block;
clear: left;
font-size: 13px;
font-family: arial;
text-transform:uppercase; /*--coloca o texto em capslock, apague se desejar --*/
line-height:1.3em;
font-weight:300;
height: 48%; /*--define a altura da legenda --*/
width:79%; /*--define a largura da legenda --*/
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 14px 13px;
padding:60px 10px 20px 10px;
color:#000000; /*--cor da fonte do texto--*/
word-wrap: break-word;
overflow:hidden;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
border-radius:130px;
-moz-border-radius:130px;
-webkit-border-radius:130px;
}
.bsrp-gallery .bs-item .ptitle:hover {
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity:0.9;
opacity:0.9;
border-radius:130px;
-moz-border-radius:130px;
-webkit-border-radius:130px;
-webkit-transition: 0.6s ease-in;
-moz-transition: 0.6s ease-in;
-o-transition: 0.6s ease-in;
}
.bsrp-gallery a img {
background: #fff;
float: left;
border-radius:130px;
-moz-border-radius:130px;
-webkit-border-radius:130px;
}
.bsrp-gallery a:hover img {
border-radius:130px; /*--define o grau de arredondamento do fundo ao passar o mouse --*/
-moz-border-radius:130px; /*--define o grau de arredondamento do fundo ao passar o mouse --*/
-webkit-border-radius:130px; /*--define o grau de arredondamento do fundo ao passar o mouse --*/
}
/* CSS FIM */
</style>
<script>
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="">'];
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://2.bp.blogspot.com/-OSlo4lj_H4w/VRMrRXuZWyI/AAAAAAABCNA/RQsmcuaWiEE/s1600/sem.gif';
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;  /*--define em qual post começa a exibição --*/
var bsrpg_thumbSize = 200;  /*--define o tamanho das miniaturas --*/
var bsrpg_showTitle = true;
document.write("<script src=\"https://blogmanualdablogueira.blogspot.com/feeds/posts/default?start-index="+numposts+"&max-results=5&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>
</div>
<div class='clear'></div>

MODELO 2 (Quadrado)


<div class='widget-content'>
<style type="text/css">
/* CSS - Destaque de posts */
.bsrp-gallery {
width:100%;
clear:both;
margin-left:-15px;  /*--posicionamento à esquerda, altere se precisar--*/
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 0 0 15px;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background: #FA5882; /*--cor de fundo das miniaturas ao passar o mouse --*/
display: block;
clear: left;
font-size: 13px;
font-family: arial;
text-transform:uppercase; /*--coloca o texto em capslock, apague se desejar --*/
line-height:1.3em;
font-weight:300;
height: 48%; /*--altura da legenda --*/
width:79%; /*--largura da legenda --*/
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 14px 13px;
padding:60px 10px 20px 10px;
color:#000000; /*--cor da fonte do texto--*/
word-wrap: break-word;
overflow:hidden;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}
.bsrp-gallery .bs-item .ptitle:hover {
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity:0.9;
opacity:0.9;
-webkit-transition: 0.6s ease-in;
-moz-transition: 0.6s ease-in;
-o-transition: 0.6s ease-in;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
}
/* CSS FIM */
</style>
<script>
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="">'];
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://2.bp.blogspot.com/-OSlo4lj_H4w/VRMrRXuZWyI/AAAAAAABCNA/RQsmcuaWiEE/s1600/sem.gif';
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;  /*--define em qual post começa a exibição --*/
var bsrpg_thumbSize = 200;
var bsrpg_showTitle = true;
document.write("<script src=\"https://blogmanualdablogueira.blogspot.com/feeds/posts/default?start-index="+numposts+"&max-results=5&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>
</div>
<div class='clear'></div>

Entendendo o código:

AZUL: Tamanho das miniaturas

VERMELHO: Link do seu blog 

ROXO: Número de miniaturas que aparecerão no slide

O que pode ser alterado está sinalizado com uma frase indicando a função do código, basta prestar bastante atenção. Esse slide te permite trocar a fonte do título das miniaturas, a cor de fundo e o posicionamento. Navegue sem medo de errar =)

ATUALIZAÇÃO (24/06/2016): Caso esteja usando o layout base que disponibilizei, encontrá um fundo cinza atrás do slide assim que coloca-lo. Esse fundo vem na base, mas remove-lo é fácil. Basta procurar por: .tabs-outer { e DELETAR as linhas selecionadas, como na demostração abaixo e depois salvar o modelo, veja:



#DicaDaLory

Coloque o slide abaixo do cabeçalho, assim o visual do seu blog vai ficar maravilhoso.

Então é isso moçada, espero que tenham gostado, e não se esqueça de me seguir nas redes sociais e se tiver dúvidas, não exite em perguntar.

Falô 0/


Me segue ai \0/

15 comentários:

  1. Que legal! Vou fazer <3
    P.s: Adorei seu blog e estou seguindo com carinho! <3 :)
    http://vintage-feeling.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Faz sim Daiane, e depois me conta como ficou =)

      Obrigaaadaaa por seguir linda <3 Estou preparando tutoriais ótimos, você vai amar.

      Um super bjo :*

      Excluir
  2. O meu deu errado :( Não apareceu no final de cada postagem, só no final da página.

    ResponderExcluir
    Respostas
    1. Olá Lídia!

      Refaça o tutorial novamente e coloca a caixa de códigos abaixo do cabeçalho assim o slide ficará na Horizontal. Espero ter te ajudado.

      Bjs :*

      Excluir
  3. Lorena muita obrigada! ficou lindo! bjs

    ResponderExcluir
    Respostas
    1. Seu pedido é uma ordem 0/ Fico feliz que tenha gostado =)

      Um super bjo :*

      Excluir
  4. Eu amei, já estava procurando há tempos e não encontrava nenhum que desse certo. Obrigada por disponibilizar. Agora estou com dúvida de qual colocar rs

    http://stenascimento.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Sté sua linda :3 <3 fico feliz que tenha gostado do tutorial e espero de coração que ele te ajude! Um grande beijo :*

      Excluir
  5. Eu estou amando o seu blog, ele foi o achado da vida, se não for pedir muito pode continuar, faça mais posts que eu irei devora-ló tudo, literalmente rsrs♥
    Vou indicar teu blog lá no meu blog, as meninas vão amar, sucesso gatinha, abraço ♥

    http://bloganyduarte.blogspot.com.br/

    Haha já te amo, amo de coração ♥
    Muiér eu vejo meu sucesso em tuas mãos, rsrs !

    ResponderExcluir
    Respostas
    1. Any, não imagina a minha alegria em ler um comentário assim tão cheio de amor <3 Esse reconhecimento é meu combustível para continuar! Te garanto que o blog reserva muitas surpresas. Muito Obrigada <3 Mil bjos :*

      Excluir
  6. Amei o tutorial, aliás, amei seu blog por completo. Queria saber como deixo meu slide igual ao seu, com a barrinha preta na parte inferior e o título do post em cima da barrinha. Desde já, agradeço. <3

    ResponderExcluir
    Respostas
    1. Olá Bianca! Fico feliz que tenha gostado do tutorial e do blog. E sobre o slide, em breve eu disponibilizo esse modelo aqui pra vocês. Fica ligadinha no blog, pra não perder as novidades. Bjão linda :*

      Excluir
  7. Já estou a seguiro o teu blogue, gostei imenso! Ah e este código deu-me imenso jeito.
    Como é que faço para o centralizar em qualquer ecrã, será que me podes ajudar?

    Marli, do My Own Anatomy ♥

    ResponderExcluir
    Respostas
    1. Obrigada Marli, por seguir o Manual <3 Pra centraliza-lo, será preciso que teste o margin-left. Lembrando que valores negativos leva para esquerda, e os positivos para a direita. Espero ter ajudado. Bjão :*

      Excluir
  8. Adorei <3 Inclusive já coloquei no meu <3

    ResponderExcluir