Box com Facebook, Twitter, Google+, Youtube e Feed Burner Juntos
Neste post falarei aqui no DicasHot como você pode estar colocando em seu blog um gadget - Facebook, Twitter, Google+, Youtube e Feed Burner Juntos. Este Gadget, como vocês podem ver, não é um Gadget qualquer... ele possui um efeito CSS no botão ASSINE do feed.Enfim, então vamos instalá-lo no Blogger.
1° passo: Entre em "Layout" e clique em Adicionar um Gadget do tipo HTML/JavaScript.
2° passo: Cole este código:
<div class="widget-content">
<style><br />.feeds {height:110px;}<br />.fclear {clear:both}<br />#campo-de-texto {<br />width: 140px;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: center;margin-right: 6px;<br />}<br />#enviar { background:#0A4B73; <br />cursor: pointer;margin-top: -3px;height: 29px;color: white !important;border: 0px solid #000000;color: white;-webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;padding: -1px;cursor: pointer;float: center;line-height: 2px;text-shadow: 1px 1px 1px #000000;<br />filter: dropshadow(color=#117aab, offx=1, offy=1);border-image: initial;<br />}<br />#enviar:hover {background: #047bc5;}<br /></style>
<center>
<div class="feeds">
<div align="center"><a href="https://www.facebook.com/NOME NO FACEBOOK" target="_blank"><img src="https://lh4.googleusercontent.com/-gpP_zDebm3w/UAXEwF--Y0I/AAAAAAAADoo/uBXUW_kRIZw/s64/Facebook.png" border="0" /></a>
<a href="http://twitter.com/NOME NO TWITTER" target="_blank"><img src="https://lh3.googleusercontent.com/-sxj7YqMak8Q/UAXEwHzxO-I/AAAAAAAADos/BFNQuSwY4qw/s64/Twitter-Bird.png" border="0" /></a>
<a href="https://plus.google.com/ID DO GOOGLE+" target="_blank"><img src="https://lh4.googleusercontent.com/-1_PVfmK3_AE/UAXEwIiiWaI/AAAAAAAADok/VQoa56YnsEs/s64/Google-Plus.png" border="0" /></a>
<a href="http://youtube.com/NOME DO SEU CANAL" target="_blank"><img src="https://lh5.googleusercontent.com/-bX4urn7cBZs/UAXEwf6uy9I/AAAAAAAADo0/4AdqdKcU29k/s64/Youtube.png" border="0" /></a>
</div>
<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">
<div align="center">
<input onblur="if (this.value == '') {this.value = 'Digite aqui seu e-mail';}" onfocus="if (this.value == 'Digite aqui seu e-mail') {this.value = '';}" name="email" class="campo-de-texto" id="campo-de-texto" style="display: initial;" value="Digite aqui seu e-mail" 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: 70px;margin-top: 1px;font-size: 15px;" value="ASSINE" type="submit">
</div>
</form>
</div></center>
</div>
<style><br />.feeds {height:110px;}<br />.fclear {clear:both}<br />#campo-de-texto {<br />width: 140px;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: center;margin-right: 6px;<br />}<br />#enviar { background:#0A4B73; <br />cursor: pointer;margin-top: -3px;height: 29px;color: white !important;border: 0px solid #000000;color: white;-webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;padding: -1px;cursor: pointer;float: center;line-height: 2px;text-shadow: 1px 1px 1px #000000;<br />filter: dropshadow(color=#117aab, offx=1, offy=1);border-image: initial;<br />}<br />#enviar:hover {background: #047bc5;}<br /></style>
<center>
<div class="feeds">
<div align="center"><a href="https://www.facebook.com/NOME NO FACEBOOK" target="_blank"><img src="https://lh4.googleusercontent.com/-gpP_zDebm3w/UAXEwF--Y0I/AAAAAAAADoo/uBXUW_kRIZw/s64/Facebook.png" border="0" /></a>
<a href="http://twitter.com/NOME NO TWITTER" target="_blank"><img src="https://lh3.googleusercontent.com/-sxj7YqMak8Q/UAXEwHzxO-I/AAAAAAAADos/BFNQuSwY4qw/s64/Twitter-Bird.png" border="0" /></a>
<a href="https://plus.google.com/ID DO GOOGLE+" target="_blank"><img src="https://lh4.googleusercontent.com/-1_PVfmK3_AE/UAXEwIiiWaI/AAAAAAAADok/VQoa56YnsEs/s64/Google-Plus.png" border="0" /></a>
<a href="http://youtube.com/NOME DO SEU CANAL" target="_blank"><img src="https://lh5.googleusercontent.com/-bX4urn7cBZs/UAXEwf6uy9I/AAAAAAAADo0/4AdqdKcU29k/s64/Youtube.png" border="0" /></a>
</div>
<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">
<div align="center">
<input onblur="if (this.value == '') {this.value = 'Digite aqui seu e-mail';}" onfocus="if (this.value == 'Digite aqui seu e-mail') {this.value = '';}" name="email" class="campo-de-texto" id="campo-de-texto" style="display: initial;" value="Digite aqui seu e-mail" 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: 70px;margin-top: 1px;font-size: 15px;" value="ASSINE" type="submit">
</div>
</form>
</div></center>
</div>
3° passo: SUBSTITUA os campos destacados de vermelho no código e pronto!!!
Gostou deste post?
Digite seu e-mail abaixo e receba nossas atualizações por e-mail:
