Tutorial: Postagens Recentes em destaque

08:30

Tudo bem moças lindas ? Quem e blogueira sabe que a gente procura varios tutorias facil para deixa o layout cada vez mais bonito para nossas leitoras não é verdade. Por tanto 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 !


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 : '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 < 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.politicamenteincorreta.com/feeds/posts/default?start-index="+numposts+"&max-results=3&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>
Em vermelho está o tamanho das miniaturas.
Em verde está o link do seu blog.
♥ Em azul está o número de miniaturas a serem exibidas.

OBSERVAÇÃO: Para esse tutorial funcionar o seu blog precisa estar em Público e com o Feed ativo.

Dúvidas ? Sugestões ? Deixe seu comentário :)
Beijos e Fiquem com Deus !

Posts sujeridos por ju margarida

9 comentários

  1. Muito legal a dica. Obrigada por compartilhar! Bjs

    www.deboradahl.com

    ResponderExcluir
  2. Adoro estes posts, super ajuda :)
    Segui o blog, beijos
    Aqui fica o meu, www.prettyinpink.pt

    ResponderExcluir
  3. Oi Ju, sua linda, tudo bem?
    Você é demais!!!!! Estou adorando suas dicas, e você ainda é generosa e coloca as imagens do passo a passo. Muito obrigada.
    beijinhos.
    cila.
    Um ótimo fim de semana.
    http://cantinhoparaleitura.blogspot.com.br/

    ResponderExcluir
  4. OOOOOOI

    eu adoro esses tutoriais de coisinhs que nao sei mexer muito! HAHAHAHA
    acho super linda essa organização! fica bem clean

    beijo
    www.beinghellz.com.br

    ResponderExcluir
  5. Amei sua dica, amo quando os blogs tem essas postagens em destaque. Já tentei colocar no meu mas não combina com o layout! ❤

    www.kailagarcia.com

    ResponderExcluir
  6. Ola querida,
    Excelente dica ainda vou usar la no meu blog amei *-*

    Beijinhos com carinho,
    https://oivamossonhar.blogspot.fr

    ResponderExcluir
  7. Amei! Vou até salvar nos favoritos aqui, eu amo esses tutoriais 💙

    Beijos.
    vitoriamartini.blogspot.com.br

    ResponderExcluir

Domínio para um blog responsivo

Loja virtual completa e barata