Widget: Acompanhamento Social [RSS, Twitter, Facebook, Youtube, Email]

Olá caros leitores, hoje anunciando a primeira postagens tutorial, após a postagem sobre o anunciamento de volta — Estamos de Volta! — que veio com explicações sobre a demora das atualizações. Enfim, o tema do artigo não é esse, vamos falar sobre um widget criado pela equipe Amotrix destinado a sites supor

Há respeito ao widget, foi criado em 25-26 de Abril de 2012, por Matheus Amorim, redator e designer do Amotrix. Com base de HTML básico, que tem a função de que o usuário leitor do blog tenha acompanhamento social do blog, em redes sociais ou atualizações.

Modelos

Modelo 1 — RSS, Facebook, Twitter, Youtube e Email

<a imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xO611fxyogQaa-TvIjGOlwaWQ6NQcr_Xn4fpkY9a9oiKaiOsqPZ1NFFeMMNhaoUDc8JFL6TCiEklvEnKd1WeFJYEd4oWqME545SGnSemLw4ZiY6q4haoG0Kp94-3CC4FC5YDdz3FL6qp/s1600/RSS1.png" /></a>
<a href="http://endereco_do_blog/feeds/posts/default" target="_blank"><b>Newsletter</b></a><br />
<span style="font-size: x-small;">Increva-se, e receba atualizações</span><br />
<span style="font-size: x-small;">por email </span><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBAJ_ZhKUG1LYbvp9RuVgzL5AzhklM4kH1E_qey594rGximknMtrd_SYH4FGEWfTSl9WbRdVebWrqnhEJ_zvtgAReQSePReku7Df6q1T0bsONDwxr3qLyOpnBXoNuO-FeplVfMvX_WePOV/s1600/TWITTER1.png" /></a></div>
<div style="font-family: "Trebuchet MS",sans-serif;">
<a href="http://www.twitter.com/@SEUPERFILNOTWITTER" target="_blank"><b>Twitter</b></a></div>
<span style="font-size: x-small;">Siga-nos, e receba atualizações</span><br />
<span style="font-size: x-small;">pelo Twitter</span><br />
<span style="font-size: xx-small;"><i></i></span><br />
<br />
<div style="font-family: "Trebuchet MS",sans-serif;">
<a imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9P65xAMm48N5lkvNwQAEERhIhwwa9OKkE7k2popjQTA8ClZ_da5GraDEQ4Ash3p4UsDu5jH2nXNVmXmiXJ4mTfBzFRzuySWd0GGJkkW7TDioK5PBk7Wio_9uQOldFiE2-k2ws5CX5ANyT/s1600/FACEBOOK1.png" /></a><a href="http://www.facebook.com/NOME_DO_SEU_FACEBOOK" target="_blank"><b>Facebook</b></a></div>
<span style="font-size: x-small;">Curta-nos, e receba atualizações</span><br />
<span style="font-size: x-small;">pelo Facebook</span>
<br />
<br />
<a imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKggOTFosK_au9MMKZUYrf6CIUYjoSTYr75TwNEfPMitj8DLRDyt2Af1Orc64PhXzGN_QrUw0UXxr1jEqYIZU9fXr2Jem2T8RBX3-_rRm_f_z4oWaeOmiP_UpO8-3jseQ3mRx56hRYTzBA/s1600/RSS1.png" /></a><a href="http://Endereco_do_canal" target="_blank"><b>Canal no Youtube</b></a><br></br>
<span style="font-size: x-small;">Assine, e confira nosso</span><br />
<span style="font-size: x-small;">canal no Youtube</span>
<br />
<br />
<a imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://png-2.findicons.com/files//icons/575/pleasant/64/e_mail.png" /></a>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Nome-de-usuario', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Digite seu email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
        <input type="hidden" value="Nome-de-usuario" name="uri" />
        <input type="hidden" name="loc" value="pt_BR" />
        <input class="subscribe" name="commit" type="submit" value="Enviar" />
    </form>
    <span style="float: right; font-size: 10px; font-family:Arial, Helvetica, sans-serif; padding: 0; margin: 0;"><small><script language='javascript'   type='text/javascript'   src='http://amotrix.webs.com/Codigos/JavaScript/Creditos/Acompanhamento%20Social%20-%20Atributos.js'></script></small></span>
</div>

Caso tenha dificuldade em copiar, tente esse.

Modelo 2 — RSS, Facebook, Twitter e Email

<a imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xO611fxyogQaa-TvIjGOlwaWQ6NQcr_Xn4fpkY9a9oiKaiOsqPZ1NFFeMMNhaoUDc8JFL6TCiEklvEnKd1WeFJYEd4oWqME545SGnSemLw4ZiY6q4haoG0Kp94-3CC4FC5YDdz3FL6qp/s1600/RSS1.png" /></a>
<a href="http://endereco_do_blog/feeds/posts/default" target="_blank"><b>Newsletter</b></a><br />
<span style="font-size: x-small;">Increva-se, e receba atualizações</span><br />
<span style="font-size: x-small;">por email </span><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBAJ_ZhKUG1LYbvp9RuVgzL5AzhklM4kH1E_qey594rGximknMtrd_SYH4FGEWfTSl9WbRdVebWrqnhEJ_zvtgAReQSePReku7Df6q1T0bsONDwxr3qLyOpnBXoNuO-FeplVfMvX_WePOV/s1600/TWITTER1.png" /></a></div>
<div style="font-family: "Trebuchet MS",sans-serif;">
<a href="http://www.twitter.com/@SEUPERFILNOTWITTER" target="_blank"><b>Twitter</b></a></div>
<span style="font-size: x-small;">Siga-nos, e receba atualizações</span><br />
<span style="font-size: x-small;">pelo Twitter</span><br />
<span style="font-size: xx-small;"><i></i></span><br />
<br />
<div style="font-family: "Trebuchet MS",sans-serif;">
<a imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9P65xAMm48N5lkvNwQAEERhIhwwa9OKkE7k2popjQTA8ClZ_da5GraDEQ4Ash3p4UsDu5jH2nXNVmXmiXJ4mTfBzFRzuySWd0GGJkkW7TDioK5PBk7Wio_9uQOldFiE2-k2ws5CX5ANyT/s1600/FACEBOOK1.png" /></a><a href="http://www.facebook.com/NOME_DO_SEU_FACEBOOK" target="_blank"><b>Facebook</b></a></div>
<span style="font-size: x-small;">Curta-nos, e receba atualizações</span><br />
<span style="font-size: x-small;">pelo Facebook</span>
<br />
<br />
<a imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://png-2.findicons.com/files//icons/575/pleasant/64/e_mail.png" /></a>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Nome-de-usuario', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Digite seu email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
        <input type="hidden" value="Nome-de-usuario" name="uri" />
        <input type="hidden" name="loc" value="pt_BR" />
        <input class="subscribe" name="commit" type="submit" value="Enviar" />
    </form>
    <span style="float: right; font-size: 10px; font-family:Arial, Helvetica, sans-serif; padding: 0; margin: 0;"><small><script language='javascript'   type='text/javascript'   src='http://amotrix.webs.com/Codigos/JavaScript/Creditos/Acompanhamento%20Social%20-%20Atributos.js'></script></small></span>
</div>

Caso tenha dificuldade em copiar, tente esse.

Modelo 3 — Facebook e Twitter

<a href="http://www.twitter.com/@SEUPERFILNOTWITTER" target="_blank"><b>Twitter</b></a></div>
<span style="font-size: x-small;">Siga-nos, e receba atualizações</span><br />
<span style="font-size: x-small;">pelo Twitter</span><br />
<span style="font-size: xx-small;"><i></i></span><br />
<br />
<div style="font-family: "Trebuchet MS",sans-serif;">
<a imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9P65xAMm48N5lkvNwQAEERhIhwwa9OKkE7k2popjQTA8ClZ_da5GraDEQ4Ash3p4UsDu5jH2nXNVmXmiXJ4mTfBzFRzuySWd0GGJkkW7TDioK5PBk7Wio_9uQOldFiE2-k2ws5CX5ANyT/s1600/FACEBOOK1.png" /></a><a href="http://www.facebook.com/NOME_DO_SEU_FACEBOOK" target="_blank"><b>Facebook</b></a></div>
<span style="font-size: x-small;">Curta-nos, e receba atualizações</span><br />
<span style="font-size: x-small;">pelo Facebook</span>
<span style="float: right; font-size: 10px; font-family:Arial, Helvetica, sans-serif; padding: 0; margin: 0;"><small><script language='javascript' type='text/javascript' src='http://amotrix.webs.com/Codigos/JavaScript/Creditos/Acompanhamento%20Social%20-%20Atributos.js'></script></small></span>

Modelo 4 — Email

<a imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://png-2.findicons.com/files//icons/575/pleasant/64/e_mail.png" /></a><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Nome-de-usuario', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Digite seu email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
        <input type="hidden" value="Nome-de-usuario" name="uri" />
        <input type="hidden" name="loc" value="pt_BR" />
        <input class="subscribe" name="commit" type="submit" value="Enviar" />
    </form>
    <span style="float: right; font-size: 10px; font-family:Arial, Helvetica, sans-serif; padding: 0; margin: 0;"><small><script language='javascript'   type='text/javascript'   src='http://amotrix.webs.com/Codigos/JavaScript/Creditos/Acompanhamento%20Social%20-%20Atributos.js'></script></small></span>

Legenda

endereco_do_blog - Troque pelo endereço do blog atual, por exemplo:

www.amotrix.com (sem http://)

SEUPERFILNOTWITTER - Troque pelo nome do usuário do twitter, por exemplo:

www.twitter.com/amotrixfollow

NOME_DO_SEU_FACEBOOK - Troque pelo nome do usuário do facebook, por exemplo:

www.facebook.com/amotrixlike

Nome-de-usuario - Troque pelo nome do usuário do Feed, por exemplo:

www.feeds.feedburner.com/Amotrix

Lembrando

Lembrando que, esse widget foi criado por Matheus Amorim, participante da equipe Amotrix, e que contem direitos autorais. E pedimos, por favor, que não retire os atributos, ou seja, créditos que vem a ter quando adicionado o widget.

Caso dúvidas ou modificações/publicações em outros sites, entre em contato. Há respeito a modificações ou publicações em sites, por favor, entre em contato, para que seja dada a licença para isso, caso ao contrário, o site pode responder por quebra de direitos autorais.

Créditos

Imagens

RSS, Twitter e Facebook (sem autor); Youtube (Matheus Amorim); Email (Find Icons)

Criação

Matheus Amorim, designer e redator do Amotrix.

Desenvolvimento

HTML Basic | 25-26/04/2012