Destacando seus artigos – Gadget de Posts Rotativos

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Oferecer o seu conteúdo na barra lateral de seu blog e dar o maior destaque possível aos seus artigos é fundamental para a navegabilidade de sua página. Seus visitantes precisam encontrar seus artigos facilmente, principalmente na sidebar (barra lateral). Descobri esse gadget, simples de usar e muito interessante que mostra seus artigos de forma rotativa com um resumo. Veja como usar.

 

Esse tutorial que vou apresentar abaixo é de um gadget que vi no Vagabundia, originalmente publicado em espanhol como “Gadget de posts rotativos”. Já indiquei várias vezes esse blog aqui e, com toda certeza é um dos melhores metablogs que existem. Mas ele mesmo adaptou do Templates Novo Blogger da Ariane.

No tutorial que vem abaixo fiz algumas modificações no gadget original e na forma de apresentar a implantação do recurso para facilitar o entendimento. Para ver os códigos originais, visite um dos links indicados acima (ou veja a fonte original no final do artigo).

 

Como Adicionar o Gadget de Posts Rotativos.

Esse gadget tem três fazes para ser adicionado no seu blog e é preciso paciência para não saltar nada. O modelo usado aqui é básico com cores simples e fundo branco, mas adaptável para qualquer tipo de layout, mas você verá como fazer as suas modificações. Lembre-se de fazer testes num blog de testes e fazer um backup do seu blog original (tutorial de backup com vídeo explicativo) antes de aplicar as mudanças mostradas aqui.

 

Passo 1.

A primeira coisa a fazer é a única parte chata de todo o processo, mesmo assim é muito simples. É preciso criar um código, uma Chave de Busca do Google do tipo API AJAX. Só o nome que é complicado e, falando a verdade, não sei muito bem para que serve. Basicamente é um código que cataloga o seu blog em pesquisas e agiliza o funcionamento do elemento de página e tudo o que depende de fazer buscas em um conteúdo de página específico. Acesse:

 

Obter Chave da API de Pesquisa AJAX (abre em outra janela)

 

Na janela que abrir, leia a explicação do serviço só para seu conhecimento, role e complete o formulário com o endereço do seu blog (URL principal), marcando que leu os termos e clique no botão “Gerar chave da API”.

 

ajax-painel

 

Você será direcionado para uma outra janela onde lhe será dado um código com letras e números bem grande, o restante da página pode ser ignorado. Guarde essa informação, pois essa sequência será usada no código do gadget e é importante para o funcionamento do elemento que será específico para o seu blog.

 

ajax-codigo

 

Passo 2.

Agora vá ao código-fonte de seu blog. Abra o Painel do Blogger, clique em “Layout” ~> “Editar HTML” e procure pela linha “</b:skin>” e, imediatamente ACIMA dela cole o código de estilo:

 

<style>
#feedGadget { 
  margin: 0 auto; 
  width : 100px;
}
.gfg-root { 
  background-color: #FFFFFF;
  border: 0px solid #FFFFFF;
  font-family: Arial,sans-serif;
  font-size: 12px;
  height: auto;
  overflow: hidden;
  padding: 4px;
  position: relative;
  text-align: center;
}
.gfg-title { /* titulo superior */
  background-color: #FFFFFF;
  color: #0033CC;
  border-bottom:2px solid #2F353F;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4em;
overflow: hidden;
  white-space: nowrap;
}
.gfg-subtitle { /* titulo inferior */
  background-color: #FFFFFF;
border-top:2px solid #2F353F;

  font-size: 12px;
  line-height: 1.4em;
  overflow: hidden;
  white-space: nowrap;
}
.gfg-entry { /* conteudo */
  height: 9.9em;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 100%;
}
.gfg-root .gfg-entry .gf-result { /* conteudo */
  background-color: #FFFFFF;
  height: 100%;
  padding: 0 10px;
  position: relative;
  width: auto;
}
.gfg-root .gfg-entry .gf-result .gf-title { /* titulo dos artigos */
  color: #330000;
  display: block;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.2em;
  margin-top: 5px;
  overflow: hidden;
  white-space: nowrap;
}
.gfg-root .gfg-entry .gf-result .gf-snippet { /* texto do resumo */
  color: #000066;
  font-size: 12px;
  line-height: 1.3em;
  margin-top: 5px;
}
.clearFloat {
  clear : both;
}
.gfg-list { 
  display:none !important;
}
</style>

 

As parte marcadas de vermelho alteram as cores, seja do texto, do título ou do fundo e bordas. Se você observar o código nos outros tutoriais, poderá ver como modificar essas cores para personalizar seu gadget. Como sempre, recomendamos que faça tudo antes em um blog de testes para aprender a usar esse elemento e adaptar da melhor forma possível.

 

Passo 3.

Agora é só adicionar o gadget. Vá em “Layout” ~> “Elementos da página” como você já faz normalmente para adicionar gadgets em seu blog, e adicione um do tipo “HTML/Javascript”. Na janela do gadget cole o seguinte código fazendo as modificações
indicadas em vermelho:

 

<script src="http://www.google.com/jsapi/?key=Cole-aqui-o-codigo-AJAX" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
  function showGadget() {
    var feeds = [{title:’Nome-do-Blog‘, url:’http://URL-do-Blog.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999′},];
    new GFdynamicFeedControl(feeds, ‘feedGadget’, {numResults : 1000, stacked : true, title: "Título do Gadget"});
  }
    google.load("feeds", "1");
    google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Carregando …</div>

 

Salve, arraste para onde for mais adequado para seu blog e veja o resultado.

 

Este é o resultado esperado que você pode ver funcionando na barra lateral do template Ferramentas Básico.

 

Artigo Relacionado com mais opções de Gadget:

 

Observação Importante: este gadget não funcionará no Internet Explorer se em seu blog estiver rodando o gadget de Seguidores. O elemento de seguidores está em conflito com o IE8 e o Blogger ainda não corrigiu o erro.

Fonte original: (em Inglês) Ajax Blog List Gadget with Post Preview.

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

11 Comentários

  1. Marcos este é um ótimo gadget para alavancar o tempo de visitação dos blogs. Prático, funcional e rápido de se instalar. Tinha visto alguns parecidos noutros blogs mas dava preguiça de inserir devido a enorme quantidade de passos e códigos a serem implementados.

    Parabéns
    @Robhym

    Responder

  2. Parbéns, muito util…

    Mais eu já usufrui de tantas dicas e atualmente estou usando o GADGET das 5 post mais recente,
    e talvez isso não seja necessário agora…

    Apesar de dar um ar de Blog mais profissional.

    Boa Marcos continue assim,

    Adm:

    W-E-Amigos!

    Responder

  3. exelente gadget …ainda ñ tinha usado nenhum elemento com aplicação da chave Api de Ajax …
    valeu mesmo!¨¨O¨¨¨¨O¨¨

    Responder

  4. Cara muito bom seu blog e suas dicas.
    Apliquei o gadget no meu blog é ficou legal.
    Mas a cor de fundo do meu blog é preto, então a caixa na cor branca ñ ficou muito legal. Como ñ saco muito de html, gostaria de saber se vc poderia me dar uma toque de como modificar as cores para ficar mais de acordo com o fundo preto do blog.

    Um abraço e parabéns pelo blog!

    Responder

  5. @Pássaro de Minerva:

    Dê uma olhado no Passo 2.
    Lá estão indicadas as partes do código para modificar as cores. Leia com mais atenção, q nem seria preciso ter perguntado.

    Responder

  6. Primeiramente obrigado pela resposta. Assim como vc sugeriu, eu já havia observado a indicação do local onde modifcar as cores, indicadas no passo 2. Se vc tivesse tb lido com atenção meu comentário, teria entendido que eu não saco de html; e é aí que tá o problema, pois não sei que código por para substituir aquele e modificra a cor.
    Se puder me ajudar, fico muito agradecido!
    Um abraço!

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.