» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Posts Recentes com Miniaturas e Resumo do Post

Em 2007 postei um dos primeiros tutoriais aqui no TPV que ensinava como Colocar um Gadget de Posts Recentes. Neste tutorial os Posts Recentes ficavam dispostos em uma lista de links apenas.

Hoje vou ensinar como colocar um gadget com posts recentes também, mas com a miniatura da imagem do post à sua esquerda e seu resumo. E o próximo post será o mesmo tipo de gadget, porém somente com as imagens dos posts.
Vamos lá!

1º- Crie um Gadget HTML onde desejar em seu blog:

Vá em Layout → Clique em Adicionar um Gadget → Escolha o Gadget HTML/JavaScript
  
Copie e cole este código na Gadget HTML:
<style type='text/css'>
img.recent_thumb { padding: 1px; width: 60px; height: 60px; float: left; margin: 5px; border: 1px solid #ccc; border-right-width: 2px; border-bottom-width: 2px; }
.recent_posts_with_thumbs { float: left; width: 100%; min-height: 70px; margin: 5px 0px 5px 0px; padding: 0; font-size: 12px; }
ul.recent_posts_with_thumbs li { padding: 5px 0px; min-height: 65px; text-decoration: none; list-style: none; }
.recent_posts_with_thumbs a { text-decoration: none; font-size: 14px; }
.recent_posts_with_thumbs strong { font-size: 10px }
</style>
<script style='text/javascript' src='http://recent-post-techkgp.googlecode.com/files/recent%20post_www.techkgp.com.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
<script src='http://URL_DO_SEU_BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

2º- Entendendo e Configurando o Código de Posts Recentes

Fiz algumas adaptações ao código original para ficar como está na imagem acima. Como colocar bordas nas imagens, aumentar a fonte do título/link do post, etc...

»[ font-size: 14px; ] →Tamanho da fonte do título dos Posts Recentes;
»[ var numposts = 5;] → Quantidade de posts recentes a ser exibido no gadget;
»[ var showpostthumbnails = true;] → True para mostrar as miniaturas das imagens dos posts recentes, false para não mostrar;
»[ var displaymore = false;] → Se quiser que apareça o link More-> no final do resumo dos posts recentes coloque true;
»[ var displayseparator = true;] → True para mostrar a linha separando os posts. Se não quiser esta linha coloque false.
Você pode também colocar uma linha pontilhada, mantendo o false e colocando uma borda:[ border-bottom:1px dotted #ccc ] no estilo CSS do gadget na linha:[ ul.recent_posts_with_thumbs li ]
Ficando assim:  ul.recent_posts_with_thumbs li {padding:5px 0px; min-height:65px; text-decoration: none; list-style: none; border-bottom:1px dotted #ccc}
»[ var showcommentnum = false;] → True para mostrar o número de comentários dos posts recentes;
»[ var showpostdate = false;] → True para mostrar a data dos posts;
»[ var showpostsummary = true;] → True para mostrar o resumo dos posts recentes, false se não quiser mostrar o resumo;
»[ var numchars = 100;] → Quantidade de caracteres (Ex:letras) do resumo dos posts recentes
»[ http://URL_DO_SEU_BLOG ]→ Substitua pelo link do Seu Blog.
Ex: http://templatesparavoce.com/

Observação Importante:

Veja o script desta gadget:
<script style='text/javascript' src='http://recent-post-techkgp.googlecode.com/files/recent%20post_www.techkgp.com.js'></script>
»O link em vermelho é o código JavaScript deste Gadget.
Você pode hospedar este arquivo em um site de sua preferência colocando o LINK fornecido por sua hospedagem no lugar do script original;


»Desta forma não haverá o risco de seus posts recentes não funcionarem, a não ser que muitas pessoas usem o mesmo endereço do java e sua taxa de transmissão de banda ultrapassar o limite do site de hospedagem.


Fonte: ♦ Tradução e Adaptação do Artigo: http://www.techkgp.com/2013/04/recent-posts-widget-with-thumbnails-for.html



Posts Recentes com Miniaturas e Resumo do Post Posts Recentes com Miniaturas e Resumo do Post Reviewed by Aurea R C on 7/14/2013 Rating: 5

6 comentários:

  1. Olá Áurea como posso inserir mais ou menos dessa maneira os post recente na mesma coluna onde lemos as postagens.
    Se você puder me ajudar ficarei grato.
    Leandro Mendes.

    ResponderExcluir
    Respostas
    1. Olá Leandro,

      Vá em Layout → Clique em Adicionar um Gadget → Escolha o Gadget HTML/JavaScript → Proceda da forma que o tutorial ensina e depois arraste o gadget para a coluna dos posts acima ou abaixo dos posts.

      Excluir
  2. Passando aqui para agradecer pelo artigo, foi extremamente útil. Obrigado por ajudar a nós! :D

    ResponderExcluir
  3. Olá, há a hipótese de pôr a abrir os links noutra janela ?

    ResponderExcluir
    Respostas
    1. Neste caso não sei como fazer isso Sr. Faz Tudo.
      Porque os links são resultado do código javascript que para dar certo deveria ser alterado e não sei como fazer.
      Você pode é orientar o leitor do blog a apertar a tecla Ctrl junto com o link para que este abra em nova aba.

      Excluir
  4. Obrigado pela partilha dessa dica, funcionou direitinho :)))

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.