Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Widget Autor Convidado

Widget caixa assinar feed e redes sociais simples

Olá pessoal, meu nome é Denis Gomez e sou o novo autor do Mundo Blogger, por aqui falarei bastante sobre Blogger e redes sociais!
Como primeiro artigo fiz um widget para blogs no Blogger com uma caixa para assinar o Feed do blog e abaixo icones de redes sociais. Espero que gostem dele e do meu trabalho por aqui.
Bem, vamos ao tutorial:

Primeiro vamos adicionar o CSS ao template, abra o editor HTML e procure por ]]></b:skin> .

Acima dele cole o seguinte código:

#CaixaBuscar {
margin:10px;}
#campo {
float: left;width: 170px;padding-left: 8px;height: 29px;line-height: 18px;font-family: arial, sans-serif;
font-size: 14px;color: #333;background: white;border: solid 1px #D9D9D9;border-top: solid 1px silver;
border-right: none;outline: none;
}
#campo-apagar {
float:left;width:16px;height:29px;
line-height:27px;margin-right:15px;padding:0 10px 0 10px;font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;font-size:22px;
background: #fff;border:solid 1px #d9d9d9;border-top:solid 1px #c0c0c0;border-left:none;
}
#campo-apagar #x {
color:#A1B9ED;cursor:pointer;display:none;
}
#campo-apagar #x:hover {
color:#36c;
}
#buscar:active {
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
#buscar {
cursor:pointer;width:70px;height: 31px;line-height:0;font-size:0;text-indent:-999px;color: transparent;background: url(http://4.bp.blogspot.com/-GX7E4j3jwR0/ThMXKjuQ9VI/AAAAAAAAEsE/rJE5Ip1qDEg/s1600/ico-search.png) no-repeat #4d90fe center;border: 1px solid #3079ED;-moz-border-radius: 2px;-webkit-border-radius: 2px;
}
#buscar:hover {
background-color: #4088FD;border: 1px solid #2F5BB7;
}
.fclear {clear:both}
#campo-de-texto {
width: 162px;padding: 8px;-webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;-moz-box-shadow: rgb(204, 204, 204) 0px 0px 8px 0px inset;border: 1px solid #CCC;font-size: 12px;height: 11px;border-image: initial;float: left;margin-right: 6px;
}
#input-rss:focus {
border: 1px solid gray;outline: none;
}
#enviar {
cursor: pointer;margin-top: -3px;height: 29px;color: white !important;border: 1px solid #000000;color: white;-webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;padding: -1px;cursor: pointer;float: left;line-height: 2px;text-shadow: 1px 1px 1px #000000;
filter: dropshadow(color=#117aab, offx=1, offy=1);border-image: initial;background: #494949; /* Old browsers */background: -moz-linear-gradient(top, #494949 1%, #333333 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#494949), color-stop(100%,#333333)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #494949 1%,#333333 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #494949 1%,#333333 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #494949 1%,#333333 100%); /* IE10+ */
background: linear-gradient(top, #494949 1%,#333333 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
}
#enviar:hover {background: #494949;}

Feito isso, vá a aba Layout do seu painel e clique em Adicionar um gadget.
Escolha a opção “HTML/JavaScript” e cole o código abaixo:

<center>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=nome-do-seu-feed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow"><input style="display: initial;" id="campo-de-texto" class="campo-de-texto" name="email" type="text" /><input value="NOME-DO-SEU-FEED" name="uri" type="hidden" /><input name="loc" value="pt_BR" type="hidden" /><input id="enviar" class="mais" style="width: 90px;margin-top: 1px;font-size: 15px;" value="ASSINE" type="submit" /></form>
<br />

<a href="URL-FACEBOOK" target="_blank"><img src="http://1.bp.blogspot.com/-e9MZzuwVltU/TwSczsoU5JI/AAAAAAAABpc/m504oDTO-j8/s1600/Facebook.png" border="0" /></a>
<a href="URL-TWITTER" target="_blank"><img src="http://2.bp.blogspot.com/-Tv0TvquX2rM/TwScyyBc5mI/AAAAAAAABpU/cwY45l8pAQ4/s1600/Twitter.png" border="0" /></a>
<a href="URL-GOOGLE-PLUS" target="_blank"><img src="https://lh5.googleusercontent.com/-Y5Ivl2DFt0Q/AAAAAAAAAAI/AAAAAAAAABY/1ryPr7OSL0o/s48-c-k/photo.jpg" border="0" /></a>
<a href="URL-YOUTUBE" target="_blank"><img src="http://2.bp.blogspot.com/-11mruhOIp-0/Tx8Zq0RDbBI/AAAAAAAABtg/60QvnzPYptM/s1600/YouTube.png" border="0" /></a>
<a href="URL-CONTATO" target="_blank"><img src="http://i39.tinypic.com/4dpnk.png" border="0" /></a></center>

Demo

Bom, seu widget já esta no blog. Agora você precisa alterar os trechos abaixo pelos seus links, desta forma:

  • Troque nome-do-seu-feed por apenas o nome dele! (duas vezes)
  • Troque URL-FACEBOOK pelo link da página no Facebook do seu blog.
  • Troque URL-TWITTER pelo link do perfil de seu blog no Twitter.
  • Troque URL-GOOGLE-PLUS pelo link da página de seu blog no Google Plus.
  • Troque URL-YOUTUBE pelo link do canal de seu blog no You Tube.
  • Troque URL-CONTATO pelo link da página de contato do seu blog.

É isso, espero que tenham gostado… Até mais pessoal!

Sobre o autor | Website

Esse artigo foi escrito por um Autor Convidado. Confira no primeiro parágrafo do artigo as informações do(a) autor(a). Quer escrever um Guest Post no Mundo Blogger? Veja como no artigo: Publique seu artigo no Mundo Blogger

Desculpe, os comentários deste artigo estão encerrados.

28 Comentários

  1. Silvio Mello disse:

    Muito bom o post !

  2. Lara Corrêa disse:

    Oi eu uso o modelo Minima e eu não acho essa parte ”]]>” no meio do HTML…Eu não procurei bem ou não tem lá mesmo?? E se tem teria como vc me dizer onde está? Porque eu realmente não estou achando.. /:

  3. Cacau Araujo disse:

    Oi, desculpe, mas tenho outra dúvida, sempre que posto algo no face referente ao meu blog, a imagem que aparece no face não tem nada a ver com o post, muitas vezes pegam de outros posts ou nada…
    se puderem me ajudar, por que ja tentei de tudo que conheço e não consigo configurar essa situação.

    Obrigada

  4. Cacau Araujo disse:

    Oi pessoal,
    eu acompanho o blog de vocês e acho um trabalho ótimo.
    Estou criando negócios na internet, e gostaria de saber se podem me ajudar em como colocar um rss para assinarem a cada final de post, se for possível ne

    Agradeço desde já!

    PS: trabalho com WP, mas, me adapto bem a códigos html

  5. Danny Vieira disse:

    Não tem nada a ver com o assunto do post, mas no blog de teste que
    foi citado tem uma barra na parte de cima do blog, fiquei super interessada, tem algum tutorial sobre como colocar ?

    • Vanessa disse:

      Danny,
      Dá uma procurada no indice aqui do MB, no item “Criar e instalar menus”, tem uma lista de tutoriais com diversos menus, é só ver se algum deles te agrada.

  6. Humberto disse:

    O demo do wiget, não tá funcionando. O.o

  7. phellipe disse:

    oie o meu blog e template que eu criei é o feed não aceita codigos xmls

  8. Coelho disse:

    tem como por contadores nas redes, procurei muito por um que mostra os icones com contadores, mais não achei, se não me engano era do sem nome. mais muito bom esse tutorial. =D

  9. OIEE e se eu não tiver tipo o google plus,oq eu faço??????

    • Denis Gomez disse:

      Apenas retire a linha abaixo:
      <a href=”URL-GOOGLE-PLUS” target=”_blank”><img src=”https://lh5.googleusercontent.com/-Y5Ivl2DFt0Q/AAAAAAAAAAI/AAAAAAAAABY/1ryPr7OSL0o/s48-c-k/photo.jpg” border=”0″ /></a>

      😉

  10. Widget caixa assinar feed e redes sociais simples.
    Denis meu amigo nem o seu demo esta funcionando,
    Troque URL-CONTATO pelo link da página de contato do seu blog.
    Eu pergunto como fazer?

    – Informe o que digitar em assinar.
    grato.

    • Denis Gomez disse:

      José, o widget está funcionando perfeitamente, porém ele não está ligado à nenhum feed.
      Em assinar não é obrigado alterar, lá é o texto que aparece no botão do campo de texto.

      Att.
      Denis Gomez

  11. ameiiii obrigada

  12. Guto Sanches disse:

    Olá Denis! Parabéns pelo primeiro post!
    Gostaria de pedir que fizessem um tutorial dos contadores de redes sociais como o atual do Mundo Blogger. Sei que já tem um ou mais posts com um tutorial desse tipo de widget, porém, o que eu estava querendo mesmo era com o widget do Google Plus, pois não achei-o em nenhum outro blog/site ainda.

    Obrigado!

    • Denis Gomez disse:

      Guto, obrigado pelos parabéns! 🙂
      Isso não é dificil de fazer, acho que até semana que vem eu já faço um tutorial desse. É que já tenho dois temas para fazer e vou tentar resolver o problema do Lucas!

  13. Lucas disse:

    UAU. Esse widget é incrível. Mas eu quero pedir um tutorial, se possível, é que eu tentei mudar o template do meu blog e o outro não tinha a opção de Jump Break. Então eu deixei o antigo, mas o antigo não tem colunas nas laterais, apenas na área do rodapé e eu quero colocar uma coluna lateral para que os widgets fiquem mais acessíveis. Será que tem como me ajudarem?

  14. Muito legal essa caixa. Você sabe se existe algum plugin no WordPress com esse mesmo serviço?

    • Denis Gomez disse:

      Roberto… Eu não sei, pois eu faço as coisas para Blogger por enquanto. Preciso aprender muito sobre WP ainda :/
      Obrigado pelo comentário 🙂

      • Vanessa disse:

        Roberto:
        Se o seu tema tiver opção para adicionar widgets na barra lateral, é só vc adicionar o widget de tipo “texto” e incluir este código lá. O código Css, vc inclui no arquivo css do seu tema. Nem precisa de plugin

  15. João Almeida disse:

    Muito bom este gadget! Estou animado para começar aqui no MB!

  16. Vanessa disse:

    Lol…primeiro post publicado pelo Denis Gomez 🙂

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.