Postagens Recentes / Últimos Posts

Oi pessoal, hoje trago um tutorial que muitos de vocês ainda não sabem onde encontrar, ou tem dificuldades para instalar no Blog, que é o Postagens Recentes! Aquele redondinho que da um charme no Blog.

Para ter um em seu Blog, é super fácil e rápido. Primeiro vá no painel do seu Blog, clique na aba LAYOUT, depois clique em ADICIONAR UM GADGET, escolha a opção: HTML/JAVASCRIPT e na janelinha que abrir cole o seguinte código:

<div class='widget-content'>

<style type="text/css">

/* CSS - Destaque de posts */

.bsrp-gallery {

width:100%;

clear:both;

margin-left:-3px;  /*--define o posicionamento à esquerda, altere se precisar--*/

padding-left:100px;

}

.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: #c6ebfa; /*--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;

}

.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>

<script>

function bsrpGallery(root) {

var entries = root.feed.entry || [];

var html = ['<div class="bsrp-gallery nopin" title="by blogbeautydesign.blogspot.com.br">'];

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/AVvXsEh0ABBiWT2KQrYRw1eNee4DMzPR1BrqkpPUDPWD9j8MG9Y55ZoBCnQEZUm1YBNk9xf_n2XtqZsya7M-IvUCpTXtuvm48DiIdnDe61_tqO9yIIOebGDRSAAaWPY_HnKsHxKLZGJ34DXAvV4/s300-no/';

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 = 5;  /*--define em qual post começa a exibição --*/

var bsrpg_thumbSize = 213;  /*--define o tamanho das miniaturas --*/

var bsrpg_showTitle = true;

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

</div>

<div class='clear'></div>

Depois que colar o código vem as alterações, onde está de vermelho é onde você irá colocar o link do seu blog, onde está de azul é a quantidade de post que vai aparecer e onde está de rosa você vai definir quais serão os post que vai aparecer, se são os primeiro posts "1" ou os últimos "5". Eu recomendo deixar sempre os últimos post, já que os primeiros vão estar na primeira página.
DICAS EXTRAS: Para mudar a cor da bolinha quando passar o cursor, só alterar onde está na cor verde.( tabela de cores. ) Caso queira mudar a imagem de fundo, quando o post estiver sem imagem, só alterar o link que está na cor laranja.
Super fácil não é mesmo?! Não esqueça de deixar o seu comentário. E se quiser ver algum tutorial aqui deixe nos comentários.