Slide de posts recentes para blogs, automático fácil de instalar e personalizar

em 23/02/2022

Tempo de leitura:

 

Slide de posts recentes para blogs, automático fácil de instalar e personalizar



  • Eu já publiquei aqui no blog algumas personalizações e funcionalidades úteis para a navegação dos usuários, hoje eu trouxe um SLIDE para postagens recentes, logo abaixo do cabeçalho para ser mais um atrativo aos olhos dos leitores.

  • Esse slide é fácil de instalar e você pode personalizar, fonte, cores, aumentar ou diminuir o número de postagens exibidas e a partir de qual posts ele deve seguir.

  • O slide é automático.


    Confira como fica o slide no blog



  • Siga-me!


  • Abra o painel do blog e vá em layout, adicionar Gadget HTML\Javascript e cole o código abaixo:


/*SLIDE POSTS RECENTES*/
<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:70px;
width:1340px; /*Largura*/
float:center; /*Posição, não mexa*/ 
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:#0c6881 ; /*Cor da área do título*/
display: block;
clear: left;
font-family: 'monserrat'; /*Fonte*/
font-weight:200; /*peso da fonte*/
text-transform:uppercase; /*LETRA MAIÚSCULA*/
font-size:12px; /*Tamanho da fonte*/
line-height:1.3em;
height:50px;
position: absolute;
bottom:5%;
text-align: center;  /*Posição do título*/ não mexa
color:#fff; /*Cor do título*/
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>
//universoblogueira
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 /* a partir de qual postagem deve aparecer*/
var bsrpg_thumbSize = 250;  /*tamanho das imagens*/

var bsrpg_showTitle = true;

document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=5&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>



  • Ajustando o Slide:


  • margin-top:70px; aumentar para deixar mais próximo ao cabeçalho ou diminuir para mais longe;
  • width:1340px; /*Largura*/  ajuste conforme a largura do seu blog ou do seu cabeçalho;
  • background:#0c6881; /*Cor do título*/  consulte a tabela de cores se necessário
  • font-family: 'monserrat'; /*fonte*/
  • font-weight:200; /*peso da fonte*/ para mais escura aumente a porcentagem
    text-transform:uppercase; /*LETRA MAIÚSCULA*/ ou Capitalize somente inicial maiúscula
    font-size:12px; /*Tamanho da fonte*/
  • color:#fff; /*Cor do título*/


  • numposts =1 /* a partir de qual postagem deve aparecer*/ aqui se você desejar que as postagens que apareçam sejam do número 4 ao 10 altere.

  • var bsrpg_thumbSize = 250;  /*tamanho das imagens*/ se colocar menos que 5 dependendo do seu tema poderá aumentar até 280 ou diminuir até 180.

  • O pequeno trecho da última parte do código, max-results=5&orderby, esse é o, número que indica quantas postagens irão aparecer, 3, 4, 5 a sua escolha.


  • Não tem segredo é só seguir direitinho o tutorial, lembrando que para funcionar seu blog dever ser público e ter o feed configurado.

  • Gostou! Não esqueça de curtir, compartilhar e deixar seu comentário.

Nenhum comentário , comente também!

Postar um comentário

Você leu um artigo escrito com grande dedicação. Gostou? !
Deixe seu comentário, crítica e sugestão, eles são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Aproveite para inscrever-se e receber as novidades.