Como colocar slide de postagens recentes no blogger

Oi amores, tudo bem?
Se tem uma coisa que amo no meu blog, e acho que dá uma cara totalmente diferente, é o slide na parte superior do blog (header/menu). Mas não são todos que dão certo. Pelo menos no meu blog não. Ele é bem chatinho para colocar slide. No blog da Renata, que foi onde eu peguei esse Layout, vi um post com um layout e um código a parte do slide. Resolvi testar e não é que deu certo? No meu blog, é raro um código que dá certo. Pois bem. Entrando no blog da

Por isso vim compartilhar com vocês, já que criei uma nova categoria aqui no blog, que é "dicas para blogger". Vamos ao passo a passo.

Vai na página inicial do seu blog > Layout > Adicionar um Gadget > HTML/JavaScript e cole este código abaixo.

Observação: Na parte do código onde deixei em negrito, você coloca a URL do seu blog ANTES da onde está em negrito para o código funcionar. Salve e pronto.

/*INICIO CSS FOTOS*/

.bsrp-gallery {

margin-top:70px;

margin-left: -30px;

width:1120px; ==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 0px 0px 0;

text-decoration:none;

}

.bsrp-gallery .bs-item .ptitle {

background:#FFF; /*--cor de fundo das miniaturas ao passar o mouse --*/

display: block;

clear: left;

font-size: 16px;

font-family: arial;

text-transform: uppercase; /*--coloca o texto em capslock, apague se desejar --*/

line-height:1.3em;

height:320px;

height: 57.4%; /*--define a altura da legenda --*/

width:100%; /*--define a largura da legenda --*/

position: absolute;

bottom:0%;

text-align: center;

margin:0 0 0px 0px;

padding: 119px 0px 0px 0px;

color:#999; /*== COR DA FONTE DO TEXTO==*/

-moz-opacity:0;

-khtml-opacity:0;

opacity:0;

}

.bsrp-gallery .bs-item .ptitle:hover {

-webkit-transition:All 0.7s ease-in-out; -moz-transition:All 0.7s ease-in-out; -o-transition:All 0.7s ease-in-out;

filter:alpha(opacity=90);

-moz-opacity:0.7;

-khtml-opacity:0.7;

opacity:0.7;

}

.bsrp-gallery a img {

background: #fff;

float: left;

}

.bsrp-gallery a:hover img {

}

/*FIM CSS FOTOS*/

</style>

//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/AVvXsEiCLdTLsLaynj4VDdcC9U_Qos2GBQ-TFC45EeJOeImuM2WMwvZYCUymrYO5B2bo5yb1nWxE1vnFwfFHsYj3y6yyXo-1-jbjaZZcck6V2_h9wQcwy-2ls8FDUJU9DfDYIXheKMBX2LCKyu4K/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="' + '">' + 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 = 280;

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>

É bem fácil, e no meu blog deu certo. Espero que no blog de vocês também dê certo! Lembrando que a dona do código é a Renata Massa. Beijos ♥