Slide de Postagens Recentes - Dois Modelos

A pedidos , vim mostrar aqui pra vocês como colocar o Slide de postagens recentes, que virou febre na net, no mundo blogosférico.

Vou mostrar o código de dois modelos. O Redondo e o Quadrado:

Na área administrativa do seu blog, clique em LAYOUT - ADICIONAR GADGET - HTML JAVASCRIPT e coloque o seguinte código:

/* CSS - Destaque de posts */

.bsrp-gallery {

width:100%;

clear:both;

margin-left:-15px; /*--posicionamento à esquerda, altere se precisar--*/

}

.bsrp-gallery:after {

display: table;

clear: both;

}

.bsrp-gallery .bs-item a {

position: relative;

float:left;

margin: 0 0 0 15px;

text-decoration:none;

border-radius:130px; /*--define o grau de arredondamento da imagem, --*/

-moz-border-radius:130px; /*--define o grau de arredondamento da imagem, --*/

-webkit-border-radius:130px; /*--define o grau de arredondamento da imagem, --*/

}

.bsrp-gallery .bs-item .ptitle {

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

display: block;

clear: left;

font-size: 13px;

font-family: arial;

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

line-height:1.3em;

font-weight:300;

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

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

position: absolute;

bottom:0%;

text-align: center;

margin:0 0 14px 13px;

padding:60px 10px 20px 10px;

color:#000000; /*--cor da fonte do texto--*/

word-wrap: break-word;

overflow:hidden;

filter:alpha(opacity=0);

-moz-opacity:0;

-khtml-opacity:0;

opacity:0;

border-radius:130px;

-moz-border-radius:130px;

-webkit-border-radius:130px;

}

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

filter:alpha(opacity=90);

-moz-opacity:0.9;

-khtml-opacity:0.9;

opacity:0.9;

border-radius:130px;

-moz-border-radius:130px;

-webkit-border-radius:130px;

-webkit-transition: 0.6s ease-in;

-moz-transition: 0.6s ease-in;

-o-transition: 0.6s ease-in;

}

.bsrp-gallery a img {

background: #fff;

float: left;

border-radius:130px;

-moz-border-radius:130px;

-webkit-border-radius:130px;

}

.bsrp-gallery a:hover img {

border-radius:130px; /*--define o grau de arredondamento do fundo ao passar o mouse --*/

-moz-border-radius:130px; /*--define o grau de arredondamento do fundo ao passar o mouse --*/

-webkit-border-radius:130px; /*--define o grau de arredondamento do fundo ao passar o mouse --*/

}

/* CSS FIM */

</style>

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 : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFOpnVQqDCnH-ULHIzBZpJDo0WciACnjkrVOko4fvAbEsT3TyevcyZ3-wMSOmJTxtUu-imGeMfQB4awlVKsEIm6FZPRco8z0JGuGp_eOPIvwtQaMV38yCZElMYTEC1q-kUKb5-oAwTCRi1/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 = 200; /*--define o tamanho das miniaturas --*/
var bsrpg_showTitle = true;
document.write("<script src=\"https://sccblogueiros.blogspot.com.br/feeds/posts/default?start-index="+numposts+"&max-results=5&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>

</div>

<div class='widget-content'>
<style type="text/css">
/* CSS - Destaque de posts */
.bsrp-gallery {
width:100%;
clear:both;
margin-left:-15px; /*--posicionamento à esquerda, altere se precisar--*/
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 0 0 15px;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background: #FA5882; /*--cor de fundo das miniaturas ao passar o mouse --*/
display: block;
clear: left;
font-size: 13px;
font-family: arial;
text-transform:uppercase; /*--coloca o texto em capslock, apague se desejar --*/
line-height:1.3em;
font-weight:300;
height: 48%; /*--altura da legenda --*/
width:79%; /*--largura da legenda --*/
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 14px 13px;
padding:60px 10px 20px 10px;
color:#000000; /*--cor da fonte do texto--*/
word-wrap: break-word;
overflow:hidden;
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;
opacity:0.9;
-webkit-transition: 0.6s ease-in;
-moz-transition: 0.6s ease-in;
-o-transition: 0.6s ease-in;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
}
/* CSS FIM */
</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 : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFOpnVQqDCnH-ULHIzBZpJDo0WciACnjkrVOko4fvAbEsT3TyevcyZ3-wMSOmJTxtUu-imGeMfQB4awlVKsEIm6FZPRco8z0JGuGp_eOPIvwtQaMV38yCZElMYTEC1q-kUKb5-oAwTCRi1/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 = 200;
var bsrpg_showTitle = true;
document.write("<script src=\"https://sccblogueiros.blogspot.com.br/feeds/posts/default?start-index="+numposts+"&max-results=5&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>
</div>
<div class='clear'></div>

Agora vamos entender o código:

AZUL: Tamanho das miniaturas

VERMELHO: Troque pelo Link do seu blog;

ROXO: Número de miniaturas que aparecerão no slide [aqui representado pelo numeral 5}

O que pode ser alterado está sinalizado com uma frase indicando a função do código, basta prestar bastante atenção. Esse slide te permite trocar a fonte do título das miniaturas, a cor de fundo e o posicionamento. Salve seu Slide e posicione no local que quer que apareça no blog. Eu sugiro que Coloque o slide abaixo do cabeçalho, assim o visual do seu blog vai ficar maravilhoso.

Atenção: * Se o Slide não aparecer:

* Adicione o gadget seguir por e-mail;

* Verifique se colocou o endereço do seu blog corretamente;

* Verifique se o Feeds do seu blog está correto, pois para que ele apareça depende que o feeds esteja COMPLETO;

* Verifique se colocou o código fornecido corretamente.