Widget "Assine nosso feed" para topo e rodapé de posts

Para quem ainda não sabe, é necessário que qualquer blog tenha um feed e newsletter, para que possa facilitar a leitura de seus artigos, e oferecer mais opções de leitura ao seus leitores. Um objetivo que quase todo blogueiro tem é ter um número maior de assinantes do feed de seu blog. Se você quer ter mais assinantes, isso depende de você. Desenvolvi um widget ótimo para quem deseja ter mais assinantes no feed de seu blog.

Se você não sabe o que é feed ou newsletter, recomendamos que leia O que é feed? e O que é newsletter? Caso você saiba o que significa estes termos, mas ainda não tenha criado um feed para seu blog, recomendamos que leia Google FeedBurner - Inicie serviço de feed em seu blog.

Já havia disponibilizado um widget bastante atraente para que você colocasse em seu blog e conseguisse mais assinantes do feed e da newsletter. Se você quiser dar uma olhada nele antes de utilizar este.

Como mostramos na imagem logo acima, o outro widget era bastante objetivo, onde o leitor podia assinar a newsletter do blog apenas digitando seu e-mail no campo de texto e clicando no botão ao lado. Neste novo widget, demos mais ênfase para o feed em sim, não para a newsletter. Porém, se você entender um pouco de HTML e quiser adicionar a newsletter a ele, fique a vontade. Pode editar o widget a vontade, porém, NÃO RETIRE OS CRÉDITOS, ele foi criado por este blog, e os créditos devem ser dados de maneira correta, como consta já no código do widget.

Como foi feito este widget?

Este widget não deu muito trabalho para fazê-lo. Primeiramente, criamos um formato para ele, arredondando as bordas (algo que ficou bastante legal no widget) e colocamos um fundo branco. Adicionamos uma imagem, ou melhor, um ícone representando um feed, e ao lado, colocamos um texto para atrair as pessoas que visualizarem este widget. Adicionamos um hyperlink na imagem e em uma parte do texto, para que as pessoas possam clicar e ter acesso ao feed do blog. Para finalizar, colocamos os créditos. Depois de toda esta criação, o resultado foi o que você viu no início deste post.

Código do widget

Para utilização do widget, você deverá utilizar o seguinte código, e fazer as devidas alterações logo após:

<div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; background: #fff; border-radius: 20px; border: 1px solid #c0c0c0; margin: 1em 20px; padding: 7px;">
<a href="LINK_DO_SEU_FEED"><img align="left" border="0" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh7bP4xHxghfIf3Uzg3m9tG6N081uf0WATZz0ha5SSuqOPr-46AwdcaVcPf6P14HvJ5-Z88wFtwaR233bUATESUMMJWtTyBVqXWdVSWSiBVc8p9aJYghp4JnOcLL65oj5TjiUIIgsrR96D/s200/Feed-icon.png" style="background-image: none; border-bottom-color: initial; border-bottom-style: initial; border-bottom-width: 0px; border-left-color: initial; border-left-style: initial; border-left-width: 0px; border-right-color: initial; border-right-style: initial; border-right-width: 0px; border-top-color: initial; border-top-style: initial; border-top-width: 0px; display: inline; float: left; padding-left: 0px; padding-right: 0px; padding-top: 0px;" width="60" /></a><span class="Apple-style-span;font:35" style="font-size: large;">Olá, caro leitor! Se você quer acompanhar todos os nossos artigos, sinta-se a vontade</span><span class="Apple-style-span;font:35">&nbsp;</span><span class="Apple-style-span" style="font-size: large;"> para <a href="LINK_SEU_FEED">assinar nosso feed</a>.</span>
<span class="Apple-style-span" style="font-size: large;"></span><span class="Apple-style-span" style="font-size: xx-small;">Widget <b><a href="http://www.desenvolvimentoblogger.com.br/">Desenvolvimento Blogger</a></b></span></div>

Substitua LINK_SEU_FEED pelo link em que encontra-se o feed de seu blog. Ex: http://feeds.feedburner.com/DesenvolvimentoBlogger. Este será o código do widget, já personalizado. Lembre-se: NÃO RETIRE OS CRÉDITOS.

Incluindo o seu widget ao topo ou ao rodapé dos seus posts - Blogger
Este widget foi feito para ser colocado no topo ou no rodapé dos posts de seu blog. Para você, que deseja adicionar este widget ao topo dos posts de seu blog, que é um lugar que sempre será visualizado, adicione-o da seguinte maneira:

Abra o painel do Blogger, e vá em Design -> Editar HTML -> Marque "Expandir modelos de widgets" -> Pressione CTRL + F e procure por:

<div class='post-header-line-1'/>

Se não encontrar este código, substitua "div" por "p", até encontrar o código. Caso ainda não encontre, procure apenas por post-header line até encontrar uma tag semelhante a que está acima. Agora, você deverá adicionar abaixo desta tag, o código do widget da seguinte maneira:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
CÓDIGO_WIDGET
</b:if>

Substitua "CÓDIGO_WIDGET" pelo código do widget após feita as alterações. Salve o seu template e veja como ficou. É importante adicionar a tag como citei acima, pois, assim, ela aparecerá apenas na página do post, não na página inicial. Se quiser que ela apareça em todas as páginas do blog, basta adicionar o código do widget sem o hack acima.

Se você deseja adicionar ao rodapé dos seus posts o widget, siga os mesmos procedimentos acima, porém, ao invés de incluir abaixo de <div class='post-header-line-1'/>, incluia abaixo da seguinte tag:

<p class='post-footer-line post-footer-line-1'>

Caso não encontre, basta procurar como falei anteriormente.

Editando o widget para adequá-lo ao seu blog:
Editando a imagem
Para editar a imagem do seu widget, basta procurar no código dele por https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh7bP4xHxghfIf3Uzg3m9tG6N081uf0WATZz0ha5SSuqOPr-46AwdcaVcPf6P14HvJ5-Z88wFtwaR233bUATESUMMJWtTyBVqXWdVSWSiBVc8p9aJYghp4JnOcLL65oj5TjiUIIgsrR96D/s200/Feed-icon.png, e trocar isso pelo link da imagem que desejar adicionar.

Removendo o arredondamento das bordas
Se quiser retirar as bordas arredondadas do seu widget, basta remover no código dele o trecho -moz-border-radius: 20px; -webkit-border-radius: 20px; e ver o resultado.

Alterando a cor de fundo do widget
Caso a cor de fundo do widget não tenha se adequado ao layout de seu blog, basta trocar o trecho #fff pelo código da cor que você quer. Para adquirir o código de uma cor, acesse Tabela de cores - Web.

Prepare-se para conseguir mais assinantes no feed de seu blog com este widget. Sinta-se a vontade também para assinar o nosso feed. Se você gostou do widget, deixe um comentário neste artigo!