Gadget de postagens recentes automático (Blogger)
Autor: Alan Felipe | Publicado: 2016-11-30T19:08:00-02:00



Olá, como vocês estão? Segunda postagem no blog em um mesmo mês, incrível. Atendendo a pedidos, trouxe um gadget be útil para todos vocêS. Ele pega suas últimas postagens e coloca elas automáticamente no gadget.





Vamos ao tutorial?

1. Primeiramente (fora Temer), você vai em Modelo &gt; Editar HTML &gt; Clica na caixa de códigos &gt; Ctrl&nbsp;+ F ou F3 e procura por ]]&gt;&lt;/b:skin&gt; , acima cole:

.bsrp-gallery {
width:&nbsp;1000px; /* largura da caixa em que os quadrados com fotos e as postagens estarão */
clear:both;
}
.bsrp-gallery a {
background: #000; /* cor do fundo de cada postagem, coloque uma cor de sua preferência ou deixe como está */
}
.bsrp-gallery .bs-item a {
position: relative;
clear: right;
width: 333px; /* largura de cada postagem-foto */
height: 200px; /* altura de cada postagem-foto */
overflow: hidden;
float:left;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));
display: block;
height:45px;
text-shadow: 0 0 5px black;
width: 333px;
text-indent: 20px;
font-size: 20px;
position: absolute;
bottom:0;
text-align: left;
color:#fff;
word-wrap: break-word;
overflow:hidden;
}
.bsrp-gallery a img {
float: left;
-webkit-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
-moz-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
-ms-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
-o-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
}
.bsrp-gallery a:hover img {
opacity: 0.6;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
}

2. Aplique alterações apenas nas partes com legenda e salve.

3. Vá em Layout, adicione um Gadget HTML/JavaScript e cole o seguinte código:

&lt;script&gt;
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['&lt;div class="bsrp-gallery nopin" title="Get this from poderondesign"&gt;'];
for (var i = 0; i &lt; 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 &lt; links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '&lt;img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/&gt;';
var pTitle = bsrpg_showTitle ? '&lt;span class="ptitle"&gt;' + postTitle + '&lt;/span&gt;' : '';
var item = '&lt;a href="' + postUrl + '" title="' + postTitle + '"&gt;' + imgTag + pTitle + '&lt;/a&gt;';
html.push('&lt;div class="bs-item"&gt;', item, '&lt;/div&gt;');
}
html.push('&lt;/div&gt;');
document.write(html.join(""));
}
hoje = new Date()
numposts =1
var bsrpg_thumbSize = 333; 
var bsrpg_showTitle = true;
document.write("&lt;script src=\"/feeds/posts/default?start-index="+numposts+"&amp;max-results=6&amp;orderby=published&amp;alt=json-in-script&amp;callback=bsrpGallery\"&gt;&lt;\/script&gt;");&lt;/script&gt;

3.1. O link destacado mostra uma imagem quando a postagem não possui nenhuma.
3.2. O número destacado deve ser o mesmo da largura de cada postagem-foto.

O tutorial é isso, ele é bem simples. Qualquer dúvida comente.

Não lembro onde peguei este tutorial, faz muito tempo que uso ele em outro blog, se soube, por favor me informe.