Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Tutorial: Postagens Recentes em destaque

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 !

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

2- Cole o seguinte código dentro da caixa:
/*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*/
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['
for (var i = 0; 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
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '';
var pTitle = bsrpg_showTitle ? '' + postTitle + '' : '';
var item = '' + imgTag + pTitle + '';
html.push('
', item, '
');
} html.push('
');
document.write(html.join(""));
} hoje = new Date()
numposts =1
var bsrpg_thumbSize = 250;
var bsrpg_showTitle = true;
document.write("
Modificações:
♥ 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 !



This post first appeared on Politicamente Incorreta, please read the originial post: here

Share the post

Tutorial: Postagens Recentes em destaque

×

Subscribe to Politicamente Incorreta

Get updates delivered right to your inbox!

Thank you for your subscription

×