Tutorial: Postagens Recentes em destaque

Hey Gente ! Tudo bem ? Pra quem não sabe eu trabalho com design a quase dois anos e tem muitas coisas legais que aprendi nesse tempo de experiência, então decidi compartilhar com vocês vários tutoriais de design pra ajudar quem faz seu próprio layout e não entendi muito de design. O tutorial de hoje é de como colocar miniaturas de postagens recentes em destaques, O código original peguei no blog da Janaína Poderon, modifiquei algumas coisas e trouxe pra vocês, espero que gostem !

O Resultado é esse:

Gostou ? Quer aprender como faz ? Então vem comigo !

1- Vá em Layout >> Adicionar um Gadget >> HTML/JavaScript:

2- Cole o seguinte código dentro da caixa:

<center><style type="text/css">

/*INICIO CSS FOTOS*/

.bsrp-gallery {

margin-left: 40px;

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

text-decoration:none;

border-radius:200px;

-moz-border-radius:200px;

-webkit-border-radius:200px;

}

.bsrp-gallery .bs-item .ptitle {

background:#; /*==COR DA ÁREA DE TITULO==*/

display: block;

clear: left;

font-family: 'Open Sans Condensed', cursive; ==FONTE DO SLIDE==

font-weight:200;

text-transform:uppercase; /*== LETRAS MAIÚSCULAS==*/

font-size:16px; /*==TAMANHO DO TITULO==*/

line-height:1.3em;

height:50px;

position: absolute;

bottom:-25%;

text-align: center; /*==POSIÇÃO DO TITULO==*/

color:#000; /*== COR DO TITULO==*/

width:95%;

padding:6px;

word-wrap: break-word;

overflow:hidden;

border-radius:200px;

-moz-border-radius:200px;

-webkit-border-radius:200px;

}

.bsrp-gallery a img {

background: #;

float: left;

border-radius:200px;

-moz-border-radius:200px;

-webkit-border-radius:200px;

}

.bsrp-gallery a:hover img {

filter:alpha(opacity=70);

-moz-opacity:0.7;

-khtml-opacity:0.7;

opacity:0.7;

border-radius:200px;

-moz-border-radius:200px;

-webkit-border-radius:200px;}

/*FIM CSS FOTOS*/

</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/AVvXsEipT_R1AQRRetq7MORSIzJykjGHmIHqHbHkXpUAv0B4MpywZ5BvXBM-R92zks9coEEguvkLHBgYuLp9FB6be8i6yGrFtxoO3-9ncoGsr91mu_6ZFLuX89tiHkDwnG8DBIw62OktiKHMTyV5/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 = 250;

var bsrpg_showTitle = true;

document.write("<script src=\"http://www.omelhordemim.com/feeds/posts/default?start-index="+numposts+"&max-results=3&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>