Oi gente, tudo bem com vocês? Eu espero que sim... Como vocês puderam perceber, tenho focado nos posts de tutorial para blog essa semana, eu acho um assunto bem legal, pois eu não sabia nada sobre isso há a algumas semanas atras, fui aprendendo, e SOZINHA. Pra que 'tá começando agora e não tem muita intimidade com html, vai ser uma mão na roda. Eu espero ajudar bastante, e que vocês gostem! É bem rapidinho e facil :)7
Bom, vamos lá.
Copie esse código:
<br /><br /><center><style type="text/css">
.bsrp-gallery { width: 1200px !important; background: #fff; margin: 0 55px 0; clear:both; margin-top: 20px; float: center !important; text-align: center !important; }
.bsrp-gallery:after { display: table; clear: both; background: #fff; }
.bsrp-gallery .bs-item a { border: 8px solid #fff; position: relative;background: #fff; float:left; margin: 0 0px 10px; margin-right: 20px; text-decoration:none; }
.bsrp-gallery .bs-item .ptitle {
background: rgba(53,50,49,0.7); display: block; transition: ease .7s; clear: left; font-size: 20px; font-family: 'Montserrat'; text-transform:none; line-height:1.3em; font-weight:400; height: 25%; width:91%; position: absolute; bottom:0%; text-align: center; padding:80px 10px 80px 10px;
color:#fff; word-wrap: break-word; overflow:hidden; text-transform: uppercase;
padding-top: 85px; filter:alpha(opacity=0);
-moz-opacity:0; -khtml-opacity:0;
opacity:0;}
.bsrp-gallery .bs-item .ptitle:hover {filter:alpha(opacity=90); -moz-opacity:0.9;-khtml-opacity:0.9; transition: ease .7s; opacity:0.9;}
.bsrp-gallery a img {float: left;}
.bsrp-gallery a:hover img {}
</style>
<script>
//Postrecente
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Código por postrecentes">'];
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/AVvXsEghq1Uv1jjXYzKS8iA_zwdBSuBxk-bwyrLZdLiIO6vJRZVbmDREL9W0FV9hkXm-Mem-1MWTqpTAUVpSS1riD59qQV7HuNoZ_viXnKYH2_06G_FQiHsU0nuzGrnwt97KTcPLh10xuYJpQcCw/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 = 220;
var bsrpg_showTitle = true;
document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>
----------------------
Após copiar vá no painel de controle do seu blog, clique em layout e adicione um widget logo abaixo do cabeçalho e cole o código. Pronto, agora visualize e salve. Ficara assim:
Viu como é fácil e rápido?
Gostou? Se inscreve no blog e deixe seu comentário.
Faça a blogueira que vos escreve feliz ♥
Um beijo ♥
18 comentários
Parabéns pelo tutorial! Muito bem explicado!
ResponderExcluirBeijos!
www.kelltpm.con
Parabéns pelo tutorial! Muito bem explicado!
ResponderExcluirBeijos!
www.kelltpm.con
Obrigada, fico muito feliz ♥
Excluirum beijo :)
Adorei pois é algo simples ne? *-*
ResponderExcluirMuito bom vai ajudar muita gente!
www.chaeamor.com
espero que ajude muuuito ♥
ExcluirEste comentário foi removido pelo autor.
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirSimples mas de muitoooo valor, pelo menos pra mim, estou começando agora e não tenho muita intimidade com algumas coisas ainda, e um exemplo é copiar e colar uma html.
ResponderExcluirA dica valeu muitooooo a penaaaaa!!!
www.eueosquatro.blogspot.com
de nada, espero que ajude muito, eu tb to aprendendo aos poucos, e fico feliz em poder dividir :)
ExcluirMeninaaa, muito obrigada mesmo pelo tutorial! *-----*
ResponderExcluirTudo no seu blog é realmente lindo. O layout, posts, imagens...perfeito, parabéns!
Já estou te seguindo!
Dá uma passada lá no meu blog quando puder, você será sempre muito bem vinda!
Beijão!
http://makedamotociclista.blogspot.com.br
Meu Twitter: @cat_343
Meu Insta: tamiya343
Linnnda, pense como fiquei feliz com seu comentario, muito obrigada ♥
ExcluirVou correndo conhecer seu blog, um beijo :)
Oii Ketty!! Vim parar no seu blog pelo comentário que você deixou lá no meu.. E meu Deus, quando abri eu me apaixonei!! Tudo lindo! Já estou segundo o seu blog, eu li alguns posts e amei e vou usar muito as suas dicas para o blog, já que eu sou meia ruim de mexer sozinha..
ResponderExcluirPode apostar que eu vou sempre dar uma passadinha aqui agora! Beijooos ><
o minha querida, fico muuuuito feliz em saber disso, obrigada pela gentileza ♥
ExcluirEsses tutoriais, ajudam muito, deixar o blog bonito e multifuncional é sempre bom... beijos
ResponderExcluirhttp://modismodeluxo.blogspot.com.br/
E vc acredita que eu estava atras disso para por no meu blog? rs
ResponderExcluirObrigada.
Eu adoro HTML, e aprender as coisas sozinha é muito bom. Podemos fazer do nosso jeito sem pagar há ninguem.
Beijos
http://www.grbla.com.br
Geeente, amei!
ResponderExcluirÓtimas dicas!
http://omundodecarolinda.blogspot.com.br
Ketty, menina, me dá um abraço! Eu tava ONTEM louca atrás de um tuto, e hoje eu encontro esse post lindo, todo explicadinho. Obrigada!!!!!!! Eu adorei, e, o melhor: entendi! Parabéns pelo post e pelo blog, que tá lindo e eu tô adorando! Um beijo <3
ResponderExcluirwww.guiaparagarotas.com.br
Muito bom!!!👏👏👏👏
ResponderExcluir