17 novembro 2016

Post recente no topo do blog (Automático)

post recente

Você sabe como colocar um post recente no seu blog? É isso que vim ensinar para vocês hoje!
Post recente é um gadget super simples e que dá para personalizar o seu layout de várias formas, fazendo ele ficar lindo e dinâmico.

Este tutorial que faz parte do nosso projeto aqui do blog de criar um layout do "zero".
(clicando aqui você pode ver todos os tutoriais disponíveis até o momento).
 

  1. Primeiramente faça o backup do seu blog, caso dê algo errado.
  2. Entre em MODELO, em seguida em Editar HTML e pesquise por:  .tabs-cap-top, .tabs-cap-bottom e apague a linha   border-top: 1px solid $(tabs.border.color);
  3. ESTE PASSO SÓ É NECESSÁRIO SE VOCÊ ESTÁ PERSONALIZANDO O MEU TEMPLATE BASE DISPONIBILIZADO AQUI, CASO SEJA OUTRO LAYOUT, IGNORE O 2º PASSO.





Agora vá em "Layout" e clique em "Adicionar um Gadget", assim que você clicar vai aparecer uma janelinha, clique em "HTML/JAVASCRIPT"


post recente

Escolha o modelo do seu post recente de sua preferência e cole na janela que abriupostagem recente

<style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:70px;
width:1300px; /*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 15px 0;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
display: block;
clear: left;
font-family: 'verdana', cursive; font-weight:800;
text-transform:uppercase; /*TODAS LETRAS MAIÚSCULAS*/
font-size:15px; /*TAMANHO DO TITULO*/
line-height:1.0em;
height:50px;
position: absolute;
bottom:0%;
text-align: center;  /*POSIÇÃO DO TITULO*/
color:#FFF; /*COR DO TITULO*/
width:97%;
padding:6px;
word-wrap: break-word;
overflow:hidden;
background: #000;
}
.bsrp-gallery a img {
background: #fff;
float: left;
width: 363px;
height: 252px;
}
.bsrp-gallery a:hover img {
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;
}
/*FIM CSS FOTOS*/
</style>

<script>
//byjana
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from poderondesign">'];
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 = 2000; 

var bsrpg_showTitle = true;
document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=3&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>

post recente
<style type="text/css">
/*INICIO CSS FOTOS*/

.bsrp-gallery {
margin-top:70px;
width:1300px; /*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 15px 0;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
display: block;
clear: left;
font-family: 'verdana', cursive; font-weight:800;
text-transform:uppercase; /*TODAS LETRAS MAIÚSCULAS*/
font-size:15px; /*TAMANHO DO TITULO*/
line-height:3em;
height:46px;
position: absolute;
bottom:0%;
text-align: center;  /*POSIÇÃO DO TITULO*/
color:#FFF; /*COR DO TITULO*/
width:85%;
padding:6px;
word-wrap: break-word;
overflow:hidden;
background: #000;
margin: 15px 23px;
}
.bsrp-gallery a img {
background: #fff;
float: left;
width: 363px;
height: 252px;
}
.bsrp-gallery a:hover img {
filter:contrast(116%);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;
}

/*FIM CSS FOTOS*/



</style>
<script>
//byjana
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from poderondesign">'];
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 = 2000;

var bsrpg_showTitle = true;
document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=3&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>

slider no blog
<style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:70px;
width:1300px; /*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 15px 0;
text-decoration:none;
}

.bsrp-gallery .bs-item .ptitle {
display: block;
clear: left;
font-family: 'verdana', cursive; font-weight:800;
text-transform:uppercase; /*TODAS LETRAS MAIÚSCULAS*/
font-size:15px; /*TAMANHO DO TITULO*/
line-height:3em;
height:43px;
position: absolute;
bottom:23%;
text-align: center;  /*POSIÇÃO DO TITULO*/
color:#FFF; /*COR DO TITULO*/
width:88%;
padding:3px 9px;
word-wrap: break-word;
overflow:hidden;
background: #000;
margin: -74px 8px;
border: double #FFF 5px;
}
.bsrp-gallery a img {
background: #fff;
float: left;
width: 363px;
height: 252px;
}
.bsrp-gallery a:hover img {
filter:grayscale(100%);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;
}

/*FIM CSS FOTOS*/

</style>

<script>
//byjana
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from poderondesign">'];
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 = 2000; 

var bsrpg_showTitle = true;
document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=3&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>

Entendendo o código do post recente:
AZUL - Link da imagem que aparece quando o post não possui imagem.
VERMELHO - Número da quantidade de miniaturas que aparece.

Espero que voces tenham gostado do tutorial, qualque dúvida pode perguntar nos comentários.
Se vocês quiserem algum outro tutorial específico é so pedir aqui nos comentários 😊

15 comentários:

  1. Oi! Até que enfim encontrei um slide bonitinho para colocar no blog e que deu certo. Amei o tutorial!
    Beijo, Leitora Encantada

    ResponderExcluir
    Respostas
    1. Que bom que gostou! Amei ele no seu blog :)
      Beijos, volte sempre

      Excluir
  2. Oi linda! Vim avisae que irei sim usar o lay rosa ❤ porem apenas em 2017 okay?

    Beijos!

    ResponderExcluir
    Respostas
    1. Use quando preferir, quando estiver usando me fale, vou adorar ver o resultado!

      Excluir
  3. Adorei a dica, vai ser muito útil :)

    Beijos!!!
    E aí, gostou?

    ResponderExcluir
  4. Oi Alexia,
    Que dica legal, vai ajudar muito quem esta querendo personalizar o blog. Amei o post!
    Bjs❤
    Abrir Janela

    ResponderExcluir
    Respostas
    1. Espero que ajude! Fico feliz que gostou, obrigada pela sua visita :)
      Beijos

      Excluir
  5. Oi linda adorei o post, muito útil pra quem está começando o blog do zero como eu. Tem como você ensinar como colocar no fim do post aquele "Compartilhe nas redes", estou querendo muito um tutorial desses com todas as redes, Beijos!!!

    ResponderExcluir
    Respostas
    1. Olá Marta, que bom que gostou do post! Vou preparar este tutorial em breve, obrigada pela sugestão :)

      Excluir
  6. No meu blog não deu certo, eu uso o modelo viagem, não aparece a imagem do post, só a imagem da câmera cortada :( :(

    ResponderExcluir
    Respostas
    1. Esse tutorial eu fiz especialmente para quem usa um layout que disponibilizei aqui, algo no seu código pode está entrando em conflito. Verifique se você seguiu todos os passos certinho, se não encontrar o erro, entre logado para que eu possa entrar em contato.

      Excluir
  7. Amei deu super certo ,muito obrigada *-*

    ResponderExcluir
    Respostas
    1. Fico feliz que gostou! Temos mais tutoriais aqui no blog, dê uma olhadinha 😊 beijos, obrigada pela visita!

      Excluir