Slide de Postagens Recentes com Efeito Hover

13:12

Você vai aprender adicionar um slide de postagens recentes em miniaturas automático, estilo minimalista, de um modo super fácil.

Esse slide com postagens recentes está sendo muito usado pelo mundo das blogueiras e é recomendado para todos que querem mudar o visual do blog, deixando ele mais alegre, clean, e com um charme, você pode fazer alterações na cor do fundo (EM AZUL NA IMAGEM), para a cor que combina melhor com seu blog/estilo ok? Vamos ao tutorial?

Esse modelo traz um estilo minimalista, clean e é bem fácil de aplicar no blog. Ao passar o mouse aparece uma borda na cor escolhida, o título do post, e a imagem fica no fundo. Os posts aparecem automaticamente. A demonstração é um blog que disponibilizo aqui no Moda e Poesias, e você pode adquiri-lo gratuitamente aqui.



Para adicionar em seu blog, é muito simples. Basta procurar por:  

  •  Layout, 
  • Adicionar um Gadget 
  • Em seguida clique em HTML/JavaScripit. Uma janela será aberta. Dentro dela, cole o código abaixo:

<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
width:1000px;
margin:0px auto 36px;
clear:both;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item {
margin: 0 12.5px 10px 0;
display: inline-block;
}
.bsrp-gallery .bs-item a {
position: relative;
background: #fff;
float:left;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background: #41A6D2;
display: block;
clear: left;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
line-height: 1.3em;
width: 89.5%;
height: 13%;
position: absolute;
bottom: 0%;
text-align: center;
padding: 60px 10px 85px 10px;
color: #FFF;
word-wrap: break-word;
overflow: hidden;
padding-top: 80px;
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
outline-offset: -5px;
outline: 1px solid #fff;
-webkit-transition: All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}
.bsrp-gallery .bs-item .ptitle:hover {
filter:alpha(opacity=76);
-moz-opacity:0.76;
-khtml-opacity:0.76;
opacity:0.76;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.bs-item:last-child {
margin-right:0px;
}
.bsrp-gallery a img {
float: left;
}
.bsrp-gallery a:hover img {
}
</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 = 190;  /*--define o tamanho das miniaturas --*/
var bsrpg_showTitle = true;
document.write("<script src=\"SEU-BLOG-AQUI/feeds/posts/default?start-index="+numposts+"&max-results=5&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>
<div class='clear'></div>
</div>
<div class='clear'></div></center>

  •  Onde está em vermelho, você altera com o endereço do seu blog. 
  • Agora é muito importante, esse widget que você acabou de criar você precisa colocar embaixo do cabeçalho do seu blog. (ENTRE COLUNAS). É ali, entre colunas, que as miniaturas vão ficar.
  • Último passo:
  • Em MODELO
  • EDITAR HTML
  • Procure por <head>, EMBAIXO cole o seguinte código:

<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->

Em seguida, salve. Tudo que pode ser alterado no estilo foi sinalizado no próprio código. O número destacado de vermelho se refere a cor do fundo do slide. 

Gostou do tutorial? Então você já sabe o que fazer, compartilhe com os amigos. 
Um grande beijo e até a próxima! 

You Might Also Like

4 comentários

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. Elizabety, que lindo que ficou <3
    Obrigada por disponibilizar!

    ResponderExcluir
  3. Amei!Parabéns pelo blog, agradeço por disponibilizar ♥

    ResponderExcluir
  4. Olá estou adorando seu blog
    porem fui colocar o slide de postagens recentes e não ficou centralizado ele fixou mais pro lado direito.
    Como posso arrumar?

    Desde ja obrigada

    ResponderExcluir