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>
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 !
Bom nós blogueiros sempre precisamos de fotos para os nossos posts e nem sempre sabemos onde procurar não é mesmo ? alem disso tem pessoas assim como eu que gostam de se inspirar em fotos pra fotografar, pensando nisso fiz a seleção de alguns sites que tem imagens gratuitas para você baixar. A licença é gratuita para usar, editar, distribuir mas só não pode vende-las ok ? dentre esses sites existem alguns que exigem atribuição de algum de algum tipo mas é só verificar as permissões das imagens antes de usar certo ? 
Baixe: 
