07/05/2016

| |

Novo formato de Postagens Recentes no Blog.

Venha aprender a colocar no seu blog esse novo formato de Postagens Recentes, que ajudará o seu leitor a escolher o melhor conteúdo para ler.


Postagens recentes


Olá, meus amigos mais que queridos!!!

Chegando com um tutorial que é de grande importância para os blogueiros!!

Venha aprender a colocar  POSTAGENS RECENTES NO BLOG em formato circular.



Faz um tempinho, que eu ensinei a colocar o outro formato de POSTAGENS RECENTES, em forma de quadrado e agora vou ensinar esse novo jeito.Já vi dessa forma em diversos blogs e procurei pelo código e achei para trazer a vocês.

Os créditos do código, vai para o blog O MELHOR DE MIM.

Aprendendo a colocar o código.

 Copie o código abaixo e vá para LAYOUT+ADICIONAR UM GADGET+HTML/JAVASCRIPT no seu painel do blog e cole na caixinha. O código só vai funcionar no seu blog se ele estiver em PÚBLICO e o FEED estiver ativo.


<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.omelhordemim.com/feeds/posts/default?start-index="+numposts+"&max-results=3&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>

Preste atenção:

Na parte vermelha é o tamanho de cada imagem.Altere quando quiser.Eu alterei para 200.

Na parte em verde, você colocará dentro das aspas o link do seu blog. 

Na parte em azul, destina-se a quantidade de imagens que você quer.No código está com o número 3.Eu modifiquei para o 4.

 Veja como ficou no meu blog de testes: Códigos Fáceis.

 E ai amigos?? Gostaram??
Esse tipo de postagem recente é muito útil em nossos blogs e deixa o leitor mais informado com os conteúdos do seu blog.
Compartilhem em suas Redes Sociais e no Whatsapp.Tem link de compartilhamento depois da descrição do autor.Bjss!!


 

Sobre o Autor:
Magda moreira Meu nome é Magda Moreira, sou professora e atualmente estou fazendo o curso de Pedagogia.Sou blogueira de coração e uma curiosa da internet.Meu blog Agenda dos Blogs tem como objetivos:Divulgação de blogs gratuitamente e elaboração de projetos e tutoriais voltados aos blogueiros.

4 comentários:

  1. Bah, sempre quis saber como fazia.. Vou até guardar nos favoritos pra tentar..

    Sucesso, linda!
    Te convido a conhecer meu blog e se gostar, seguir..
    Bjoo
    https://diariamentedicas.blogspot.com.br/?m=1

    ResponderExcluir
  2. BOA NOITE MAGDA!JÁ FUI CONHECER OS BLOGS,E´JÁ ESTOU SEGUINDO TODOS,TODOS LINDOS,QUE DEUS TE ABENÇOE,E FELIZ DIA DAS MÃES BEIJOS

    ResponderExcluir
  3. Oi, tentei colocar no meu blog, só que ficou muito próximo das postagens, não ficou legal, mas mesmo assim obrigada pela dica!
    http://isaberenice.blogspot.com.br/

    ResponderExcluir
  4. obrigada mais uma vez

    www.batomdasvaidosas.blogspot.com.br

    ResponderExcluir

Deixe um comentário, que ficarei muito feliz!!!!!
Abraços á todos!!!!