Tutorial: Postagens Recentes abaixo do Cabeçalho!

Olá pessoal. Como eu disse no post passado, eu iria fazer uma pequena programação só de Dicas para blogs! E é isso que vou fazer. Começou dia 07 | 01 | 16, e vai até Sexata-feira dia 15 | 02 | 16...
Para começar, o post de hoje eu vou fazer um tutorial de postagens recentes abaixo do cabeçalho. Eu adoro esse tutorial e vim trazer para todas vocês... Vamos lá, o resultado do tutorial é esse:


Primeiramente, faça uma cópia completa do modelo do seu template. Assim evita que algum erro do tutorial, prejudique seu template ;).

  1. Vá em Layout >> Adicionar um Gadget >> HTML/JavaScript >> Dentro do Quadrado Coloque este código >>

<br /><br /><center><style type="text/css">
.bsrp-gallery { width: 1200px !important; background: #fff; margin: 0 55px 0; clear:both; margin-top: 20px; float: center !important; text-align: center !important; }
.bsrp-gallery:after { display: table; clear: both; background: #fff; }
.bsrp-gallery .bs-item a { border: 0px solid #fff; position: relative;background: #fff; float:left; margin: 0 0px 10px; margin-right: 0px; text-decoration:none; }
.bsrp-gallery .bs-item .ptitle {
background: rgba(225, 175, 201, 0.8); display: block;  transition: ease .7s; clear: left;  font-size: 20px; font-family: 'Georgia'; text-transform:Bold; line-height:1.3em;  font-weight:400; height: 25%; width:91%; position: absolute; bottom:0%; text-align: center; padding:80px 10px 80px 10px;
color:#fff; word-wrap: break-word; overflow:hidden; text-transform: uppercase;
padding-top: 85px; 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; transition: ease .7s; opacity:0.9;}
.bsrp-gallery a img {float: left;}
.bsrp-gallery a:hover img {}
</style>
<script>
//Postrecente
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Código por postrecentes">'];
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://www.aie.pt/imagens/semfoto.jpg';
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;
var bsrpg_thumbSize = 220;
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>

Nenhum comentário:

Postar um comentário

Todos os comentários com críticas e opiniões construtivas, serão aceitos.

- Deixe o link do seu blog no final de seu comentário. Se possível, eu sempre vou visitar!

• Não serão aceitos comentários que contenham palavras de baixo calão ou desrespeitosos. Os mesmos serão excluídos!

Comente e deixe uma blogueira feliz!

Sigam-me os bons @DEPOISDEJULIETABLOG
© 2015 / 2017 Todos os direitos reservados | Fairy Dream