Dicas, truques, tutoriais, reviews, promoções e informação

quinta-feira, 25 de novembro de 2010

Como colocar botões de Feed RSS nas categorias

Ter um botão visível de Feed RSS em seu blog, é essencial para permitir que seus leitores acompanhem as novidades automaticamente. Assinando o feed, o leitor recebe o conteúdo atualizado em tempo real, sem ter que necessariamente ir até a página para ver se o blog foi atualizado.

Porém, um detalhe importante que muitos blogueiros esquecem, é de ter um botão de feed para cada categoria (marcador) do blog. Isso atrai mais a atenção dos visitantes, pois eles não precisarão assinar o feed completo, se não quiserem. Eles poderão escolher sobre qual categoria do blog eles vão querer receber o conteúdo atualizado do feed automaticamente.

Para ter uma melhor idéia do que estamos falando, observe a imagem abaixo:

botões feed categorias blogger

Seu painel de categorias ficará deste modo, com um pequeno botão para assinar o feed ao lado de cada marcador.

Como Fazer Isso


1. Em seu blog, vá em Design > Editar HTML. Primeiramente, faça um backup de seu template clicando em Baixar modelo completo.

rss blogger labels

2. Marque a opção "Expandir modelos de widgets". Pressione as teclas Ctrl + F e procure pela seguinte linha abaixo:

<b:loop values='data:labels' var='label'> <li>

3. Abaixo de <li> insira o código a seguir:

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>

See the Pen ixDKJ by Seu Tutorial (@marcelost) on CodePen



Ficará assim:

<b:loop values='data:labels' var='label'>
<li>

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>

<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>

Com este código, o botão de feed ficará ao lado esquerdo das categorias.

feed nos marcadores blogger rss

Botão ao Lado Direito


Mas se você prefere que os botões fiquem ao lado direito das categorias, faça o seguinte.

insira o código da linha 12 abaixo como mostrado no campo:

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>

</li>
</b:loop>

See the Pen eiucD by Seu Tutorial (@marcelost) on CodePen



Os botões ficarão ao lado direito das categorias.

assinar feed marcadores separados blogger

5 comments:

  1. Muito bem explicado, não acerta quem não quiser.
    Abraços forte

    ResponderExcluir
  2. Olá Principe Encantado,

    Seja bem-vindo ao blog!

    Muito obrigado pelo seu comentário!

    Ótima tarde e um grande abraço amigo.

    ResponderExcluir
  3. achei muito interessante a idéia, principalmente para blogueiros que escrevem sobre uma grande variedade de assuntos, assim cada pessoa poderá acompanhar somente aquilo que gostar.

    ResponderExcluir
  4. Olá fabiano,

    Exatamente como você disse.

    Deste jeito, facilita o acompanhamento de categorias específicas pelo leitor. Geralmente tem aquele leitor que gosta mais de uma categoria do que da outra, assim ele confere só aquilo que gosta.

    Um grande abraço e obrigado pelo comentário!

    ResponderExcluir
  5. Muito bem explicado, simples, coloquei no meu sem problema nenhum e achei muito prático, valeu pela dica!

    ResponderExcluir