Tutorial: Postagens recentes em destaque no Blogger!

by - sábado, abril 02, 2016

office, work, workspace, business, desk, table, gadgets, macbook, computer, laptop, silver, potted, plants, poster, magazines, frames, mesh, still, bokeh
Foto: Fonte

Olá amores! Tudo bem com vocês? Eu espero muito que sim, pois estou ótima! Hoje eu trouxe um tutorial que eu vi no blog O Melhor de mim, é um tutorial para blogueiras da plataforma blogger de como colocar postagens recentes em destaque no blogger. Espero que gostem, eu já tinha visto várias outras formas mais não tão simples assim!
O Resultado é esse:
Foto: Fonte


Vamos aprender como faz? É muito simples, vamos lá:

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



2- Cole o código abaixo dentro da caixa de Html/JavaScript:

<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/AVvXsEhT79qdmAskd4L2NreRxECAXofjXpONgN4cUjh9W0kDRVahK9Q3aGrO0XaSb-Se3ZuJ8sfGI5Rme2RSdN423QPsFX2JT3KPVfE2xTAI5JJWz4beXNqwEAfEIRA6NERFuPePTS0WBR_wsIHL/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.
Os créditos ao tutorial vai ao blog O melhor de mim e as imagens do tutorial também.
Espero que tenham gostado, e logo teremos muito mais tutoriais de personalização de layouts pois estou fazendo um curso de Web Designer, mas em um próximo post conto mais para vocês! Beijos, e até mais!


You May Also Like

14 comentários

  1. Amei o post Kah! Eu sempre fui louca pra colocar esse slide redondinho mas nunca achei um tutorial bem explicadinho, amei mesmo!
    Beijão <3

    http://rafaellapaixao.blogspot.com.br/
    https://www.youtube.com/user/RafsPaixao

    ResponderExcluir
  2. Olá linda!
    Obrigada Rafaella! Fico muito feliz por ter gostado, e que bom que tenha tô ajudado ♡
    Beijos!

    ResponderExcluir
  3. Que dicas úteis Kah; você entende de WP também? Se sim, passa pra mim suas dicas quando postar <3

    ResponderExcluir
  4. Ótima dica! Fica uma graça <3

    Peixinhos, Gabbe!
    http://talodemaca.blogspot.com.br/

    ResponderExcluir
  5. Adorei o post, está bem explicado, parabéns. Vou por em prática. Bjs!

    ResponderExcluir
  6. Adorei a dica!! Ficou ótimo ^^

    Beijos,
    www.notavelleitura.blogspot.com

    ResponderExcluir
  7. Amei o post, adoro tutus para blog. :D

    ResponderExcluir
  8. Eu gosto muito de ver posts que possam ajudar outros blogs. Parabéns, está bem explicado!
    Beijão

    http://1momentoqualquer.blogspot.com.br/

    ResponderExcluir
  9. Oi! O que seria de mim sem os tutoriais? São suuuuper úteis! Achei bem legal esse, vai ajudar muita gente!

    Blog Ei Carol!

    ResponderExcluir
  10. Gostei bastante do seu post. Simples, porém muito objetivo. Tenho certeza de que ajudou bastante!!
    Beijos *-*

    ResponderExcluir
  11. Adoeeeeeei, faz tempo que estou querendo colocar, mas estava deixando pra depois, vou tentar! 💚

    www.somenteonecessario.com

    ResponderExcluir
  12. Adoro tutoriais, parabéns pela iniciativa de espalhar coisas boas pela blogosfera ♥

    ResponderExcluir
  13. Eu já tentei fazer esse tuto várias vezes, mas meu blog não tem o espacinho que ai tem, ai ou toma meu menu ou fica colado nos posts :/ ai desisti :s
    Vou tentar de novo!

    ResponderExcluir
  14. Seu blog é muito lindo e parabéns por tentar ajudar os outros. Continua assim e sucesso!

    ResponderExcluir