Widget para redes sociais com botões de inscrição no Blogger

  • Autor Autor Danniel
  • Data de início Data de início
Este tópico foi traduzido automaticamente do espanhol. Ver original
Danniel

Danniel

Delta
Redactor
Verificación en dos pasos activada
Bom dia, betas!

Hoje não me pus a procurar templates para Blogger, mas encontrei um bom widget para redes sociais que inclui o "inscreva-se" do Blogger.

O widget é este: boton redes sociales verde.webp

O tutorial pode ser encontrado neste site Widget com Inscrição e Botões Sociais para Blogger | Terreno Blogger

Agora, pessoalmente, não gostei na cor verde, além de não combinar com o meu template, então me dei ao trabalho de editar os botões e colocá-los na cor certa, assim:

redes sociales botones.webp

Se vocês gostarem mais assim, aqui deixo o código :encouragement:

HTML:
<style type="text/css">
/* Terrenoblogger.co - botones sociales */
#TB-caja-suscripcion {width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
.TB-caja-suscripcion-wrapper{background:url(https://dl.dropboxusercontent.com/s/twb2c8p4zopqj0q/background%20botones%20sociales.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:16px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:capitalize}
.TB-caja-suscripcionform{clear:both;display:block;margin:10px 0}form.TB-caja-suscripcion-form{clear:both;display:block;margin:10px 0 0;width:auto}
.TB-caja-suscripcion-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(http://3.bp.blogspot.com/-DfHJzP9Mlh4/UXZE9ONhVnI/AAAAAAAAAgM/5xtMqb9biR4/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
.TB-caja-suscripcion-email-button{background:#00B047;border:1px solid #01B831;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:capitalize;width:100%}
.TB-caja-suscripcion-email-button:hover,.TB-caja-suscripcion-email-button:focus{background:#20B95D}
.TB-caja-suscripcion-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}</style>

<div id="TB-caja-suscripcion">
<div class="TB-caja-suscripcion-wrapper">
<br />
<a class="social-icons" href="TU DIRECCION DE FACEBOOK AQUI " target="_blank" title="Síguenos en Facebook">
<img src="http://www.zonammorpg.com/wp-content/uploads/2010/12/facebook48x48.png" /></a> 
<a class="social-icons" href="https://twitter.com/TU USUARIO AQUI"><img src="http://www.refugibaixcamp.org/wp-content/themes/refugibaixcamp/includes/widgets/social-profiles-widget/images/default/Twitter_48x48.png" /></a>
<a class="social-icons" href="TU URL DE GOOGLE + AQUI" target="_blank" title="Síguenos en Google+"><img src="http://complejolaciguena.com/images/Botones/gicon-48x48.png" /></a> 
<a class="social-icons" href="http://feeds.feedburner.com/FEEDBURNER AQUI" target="_blank" title="Suscríbete a nuestro Feed"><img src="http://img441.imageshack.us/img441/3157/feed48x48.png" /></a>
<p>Suscríbete para recibir nuestras actualizaciones</p>
<div class="TB-caja-suscripcion-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri="USUARIO-FEEDBURNERR aqui" class="TB-caja-suscripcion-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="USUARIO-FEEDBURNER AQUI" /> <input name="loc" type="hidden" value="en_US" /><input autocomplete="off" class="TB-caja-suscripcion-email-field" name="email" placeholder="Escribe tu Email Aquí" /> <input class="TB-caja-suscripcion-email-button" title="" type="submit" value="Suscribirme!" />&nbsp;</form></div></div></div>

Bom, amigos, é isso, espero que ajude nos seus blogs, abraços! :encouragement:
 
Última edição:
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
antes do /head ou /body ou b:skin ?
 
antes do /head ou /body ou b:skin ?

No tutorial diz, basta colocar como widget: Blogger.com - Design - Adicionar um gadget - HTML/Javascript
:encouragement:
 
Muito bom, excelente contribuição.
 
Voltar
Topo