Destacando seus artigos – Gadget de Posts Rotativos

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”.

 

 

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.

 

 

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:

• 15 Gadgets para Blog e Elementos de Página

 

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.