17 de dezembro de 2011

4

Widget de Assinar Feed Personalizado

Olá Pessoal, hoje estou aqui para mostrar um Widget de Assinar Feed personalizado. No Widget temos as redes sociais mais usadas pelos blogueiros, o Twitter e Facebook. Essa ferramenta é muito bom para você usar em seu blog, pois o espaço onde digitamos o nosso E-mail, é bem simples e pequeno, pois não ocupa muito espaço na lateral do seu blog. Já os ícones, tem um aspecto mais elegante tendo um 'tom' de cor bem diferenciado, e isso deixa o seu blog mais atrativo para o seu leitor

Vamos ao Tutorial:
1º - Acesse o Painel de Controle de seu blog e clique na Guia Modelo.
2º - E logo em seguida, clique no Botão Editar HTML.
3º - Agora pressione as teclas CTRL+F e procure por:
]]></b:skin>
4º - E ACIMA dele cole o seguinte código:
 /* -----   Widget Assinar Feed   ----- */.input.text,input.newsletter-text {background-color:#E1E8ED;background-image:0 to(#ffffff));border-top:1px solid #525252;border-right:none;border-bottom:1px solid #333;border-left:1px solid #525252;border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;-webkit-border-radius:3px 0 0 3px;display:block;float:left;width:160px;height:20px;margin:10px 0 0 5px;}.newsletter-button {color: white;font-family: Arial, Helvetica, sans-serif;background-color:#333;background-image:0 to(#333333));border:none;cursor: pointer;border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;-webkit-border-radius:0 3px 3px 0;display:block;float:left;width:74px;height:24px;margin:10px 0 0;}.text,.newsletter-text {width:70px;}.textwidget {padding-bottom:10px;}
6º - Clique em Salvar Modelo.
7º - E na coluna da esquerda clique em Layout ( ou se você usa a interface antiga do blogger, clique na sub-aba Elementos de Página).
8º - Clique em Adicionar um Gadget e selecione a opção "HTML/JavaScript".
9º - Dê um nome ao Widget e cole o seguinte código:
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open(\" http:="" feedburner.google.com="" fb="" a="" mailverify?uri="ID DO SEU FEED\'," \'popupwindow\',="" \'scrollbars="yes,width=550,height=600\');return" true'="" target="popupwindow">
    <input class="newsletter-text text" name="email" value="Digite aqui seu E-mail..." size="25" maxlength="100" onfocus="this.value = &#39;&#39;;" />
    <input class="text" name="uri" type="hidden" value="ID DO SEU FEED" />
    <input name="loc" type="hidden" value="pt_BR" />
    <input class="newsletter-button" type="submit" value="Confirmar" />
    </form>
<div id="anuncio"> <center><p align="center"><a href="URL-DO-TWITTER" target="_blank"><img src="http://dl.dropbox.com/u/49685791/twitter_02.png" /></a> <a href="URL-PÁGINA-DO-FACEBOOK" target="_blank"><img src="http://dl.dropbox.com/u/49685791/facebook_02.png" /></a> <a href="http://feeds.feedburner.com/NOME-DO-FEED" target="_blank"><img src="http://dl.dropbox.com/u/49685791/RSS_02.png" /></a></p></center> </div>
Lembre-se de Modificar: 
→ ID DO SEU FEED: Substitua o ID de seu Feed. Ex: O nome do nosso feed é UtilizandoBlogger.
URL-DO-TWITTER: Substitua pelo link de seu Twitter. Ex: No nosso caso é assim: http://www.twitter.com/ub_oficial (troque o nome "ub_oficial" pelo username do seu twitter).
→ URL-PÁGINA-DO-FACEBOOK: Substitua pelo link de sua fã página no Facebook. Ex: Nossa página tem a seguinte url: http://facebook.com/pages/Utilizando-Blogger/257933060924987. Vá na sua página e copie o link dela.
→ NOME-DO-FEED: Coloque o nome do seu feed, no nosso caso é UtilizandoBlogger.

10º - Após ter feita as alterações, clique em Salvar.

4 Comentários:

Mauricio Fabijam disse... [Responder Comentário]

É um widget simples mais muito elegante, o resultado visual é ótimo e acredito que em termos de conversão também.
Parabéns um ótimo tutorial.
Ah, mais um detalhe, ficaria ainda melhor com o Google Plus One também.

Bruna T. Marques disse... [Responder Comentário]

@Mauricio Fabijam, obrigada pelo comentário. O widget é simples mas com um aspecto muito elegante. Em breve colocaremos um widget com o Google Plus.

Arrison disse... [Responder Comentário]

gostei do widget , assim ocupa menos espaço

Kelleany disse... [Responder Comentário]

posso colocar no meu blog

Postar um comentário

Parcerias são feitos em suas respectivas páginas.
- Se deseja falar com nossos autores, criticar ou sugerir, solicite nosso
Formulário de Contato
- Evite divulgar o seu blog nos comentários para que ele não seja excluído por nosso autor.
- Não utilize linguagem vulgar e tente falar sobre algo que esteja ligado ao artigo.

Licença Creative Commons
Free Page Rank Tool