Post recente no topo do blog (Automático)

Você sabe como colocar um post recente no seu blog? É isso que vim ensinar para vocês hoje!
Post recente é um gadget super simples e que dá para personalizar o seu layout de várias formas, fazendo ele ficar lindo e dinâmico.

Este tutorial que faz parte do nosso projeto aqui do blog de criar um layout do "zero".
(clicando aqui você pode ver todos os tutoriais disponíveis até o momento).

 

1. Primeiramente faça o backup do seu blog, caso dê algo errado.
2. Entre em MODELO, em seguida em Editar HTML e pesquise por:  .tabs-cap-top, .tabs-cap-bottom e apague a linha   border-top: 1px solid $(tabs.border.color);
ESTE PASSO SÓ É NECESSÁRIO SE VOCÊ ESTÁ PERSONALIZANDO O MEU TEMPLATE BASE DISPONIBILIZADO AQUI, CASO SEJA OUTRO LAYOUT, IGNORE O 2º PASSO.

Agora vá em "Layout" e clique em "Adicionar um Gadget", assim que você clicar vai aparecer uma janelinha, clique em "HTML/JAVASCRIPT"

Escolha o modelo do seu post recente de sua preferência e cole na janela que abriu

<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 {
display: block;
clear: left;
font-family: 'verdana', cursive; font-weight:800;
text-transform:uppercase; /*TODAS LETRAS MAIÚSCULAS*/
font-size:15px; /*TAMANHO DO TITULO*/
line-height:1.0em;
height:50px;
position: absolute;
bottom:0%;
text-align: center;  /*POSIÇÃO DO TITULO*/
color:#FFF; /*COR DO TITULO*/
width:97%;
padding:6px;
word-wrap: break-word;
overflow:hidden;
background: #000;
}
.bsrp-gallery a img {
background: #fff;
float: left;
width: 363px;
height: 252px;
}
.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>
//byjana
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 : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqS1wRUez72eXeSEF5xs7ssf9C3GJoTeZmXK3sa8jySqIrw-R0FDNwQgmGlsp9rhAGD1ktKb0q2_D1Zy9Enx-N8rHSpErKTdhg4Iw2aAvqnsxG5C3JNh5EJ-R-vJL1jx9LUEn0ASDBm-ng/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
var bsrpg_thumbSize = 2000; 

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

<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 {
display: block;
clear: left;
font-family: 'verdana', cursive; font-weight:800;
text-transform:uppercase; /*TODAS LETRAS MAIÚSCULAS*/
font-size:15px; /*TAMANHO DO TITULO*/
line-height:3em;
height:46px;
position: absolute;
bottom:0%;
text-align: center;  /*POSIÇÃO DO TITULO*/
color:#FFF; /*COR DO TITULO*/
width:85%;
padding:6px;
word-wrap: break-word;
overflow:hidden;
background: #000;
margin: 15px 23px;
}
.bsrp-gallery a img {
background: #fff;
float: left;
width: 363px;
height: 252px;
}
.bsrp-gallery a:hover img {
filter:contrast(116%);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;
}

/*FIM CSS FOTOS*/



</style>
<script>
//byjana
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 : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqS1wRUez72eXeSEF5xs7ssf9C3GJoTeZmXK3sa8jySqIrw-R0FDNwQgmGlsp9rhAGD1ktKb0q2_D1Zy9Enx-N8rHSpErKTdhg4Iw2aAvqnsxG5C3JNh5EJ-R-vJL1jx9LUEn0ASDBm-ng/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
var bsrpg_thumbSize = 2000;

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

<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 {
display: block;
clear: left;
font-family: 'verdana', cursive; font-weight:800;
text-transform:uppercase; /*TODAS LETRAS MAIÚSCULAS*/
font-size:15px; /*TAMANHO DO TITULO*/
line-height:3em;
height:43px;
position: absolute;
bottom:23%;
text-align: center;  /*POSIÇÃO DO TITULO*/
color:#FFF; /*COR DO TITULO*/
width:88%;
padding:3px 9px;
word-wrap: break-word;
overflow:hidden;
background: #000;
margin: -74px 8px;
border: double #FFF 5px;
}
.bsrp-gallery a img {
background: #fff;
float: left;
width: 363px;
height: 252px;
}
.bsrp-gallery a:hover img {
filter:grayscale(100%);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;
}

/*FIM CSS FOTOS*/

</style>

<script>
//byjana
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 : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqS1wRUez72eXeSEF5xs7ssf9C3GJoTeZmXK3sa8jySqIrw-R0FDNwQgmGlsp9rhAGD1ktKb0q2_D1Zy9Enx-N8rHSpErKTdhg4Iw2aAvqnsxG5C3JNh5EJ-R-vJL1jx9LUEn0ASDBm-ng/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
var bsrpg_thumbSize = 2000; 

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

Entendendo o código do post recente:
AZUL - Link da imagem que aparece quando o post não possui imagem.
VERMELHO - Número da quantidade de miniaturas que aparece.

Espero que voces tenham gostado do tutorial, qualque dúvida pode perguntar nos comentários.
Se vocês quiserem algum outro tutorial específico é so pedir aqui nos comentários 😊