WIDGET DE REDES SOCIAIS E NEWSLETTER COM EFEITO HOVER EM CSS3 - Ajudinha Blog

WIDGET DE REDES SOCIAIS E NEWSLETTER COM EFEITO HOVER EM CSS3

terça-feira, 15 de julho de 20140 comentários

Aprenda a colocar um widget de redes sociais e newslettter com efeito em css3.

Olá Pessoal, hoje ensinarei para vocês como colocar em seu blog um widget muito legal, o widget tem os botões de Feed, Twitter, Facebook e uma caixa de subscrição de newsletter. O código e de simples instalação em seu blogger e tem um efeito hover muito legal e atrativo feito em CSS3, com certeza os leitores de seu blog irão adorar esse widget, vamos ao tutorial.

ACESSE TAMBÉM: CRIE UM RSS FEED PARA SEU BLOG COM O FEEDBURNER

Acesse o Painel do Blogger, Vá em Layout, e Adicionar Gadget do tipo Html/JavaScript e cole o código a seguir e salve.

<style type='text/css'> 
/*----------- http://www.ajudinhablog.hol.es -----------*/ 
.db a{ 
    color: #6e6e6e; 
    font: bold 12px Century Gothic, AppleGothic, Arial, sans-serif; 
    text-decoration: none; 
    padding: 7px 12px; 
    position: relative; 
    display: inline-block; 
    text-shadow: 0 1px 0 #fff; 
    -webkit-transition: border-color .218s; 
    -moz-transition: border .218s; 
    -o-transition: border-color .218s; 
    transition: border-color .218s; 
    background: #2780c7; 
    border: solid 1px #2780c7; 
    border-radius: 2px; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
} 
.db a:hover { background:#ff9900; 
    color: #fff; 
    border-color: #f7a032; 
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) 
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); 
} 
.db a:active { 
    color: #000; 
    border-color: #f7a032; 
} 
.dbbar{ width:255px; float: left; margin-left:3px; margin-top:5px; padding:0;} 
.dbbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 0px 0 15px 0; float: left; width: 100%; font-family: Century Gothic, AppleGothic, Arial, sans-serif;}
.dbbar .emailsub .emailupdatesform{width: 100%; float: right; padding:0px;} 
.dbbar .emailsub .emailupdatesform input.emailupdatesinput{background: #2780c7;  float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px;  width: 138px; height:30px;   border-radius: 2px;
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px;} 
.dbbar .emailsub .emailupdatesform input.emailupdatesinput:hover{ 
border-color:#f7a032;background-color: #fff; 
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) 
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); 
} 
  
.dbbar .emailsub .emailupdatesform input.joinemailupdates:hover{background:#ff9900;border-color:#f7a032;  
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) 
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor:pointer; 
} 
.dbbar .emailsub .emailupdatesform input.joinemailupdates{ 
border: solid 1px #eb3355; 
    background: #2780c7; 
   font-family:Century Gothic, AppleGothic, Arial, sans-serif; 
text-transform: none; color: #989898; height: 25px; padding: 5px 10px; margin: 0 0 0 5px; font-weight:normal; font-size:12px; height:30px;
  border-radius: 2px; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
} 
  
.dbbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3; float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px;  width: 138px; height:28px;   border-radius: 2px;
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px;} 
.dbbar .emailsub .emailupdatesform input.joinemailupdates{ 
border: solid 1px #2780c7; 
    background: #2780c7; 
   font-family:Century Gothic, AppleGothic, Arial, sans-serif; 
text-transform: none; color: #fff; height: 25px; padding: 0 5px; margin: 0 0 0 5px; font-weight:normal; font-size:14px; height:30px;
  border-radius: 2px; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
} 
</style> 
 
  
<div class="db" style="padding: 0pt 0pt 0pt 5px;">
 
<table><tbody>
<tr> 
<td> 
<a   href="http://feeds.feedburner.com/NOME DO FEED" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEZW4hwFv2qodTpTM2HlEOCWUX9KUv1WCMcfXc1Z0SO0mcZbzwGAE8rCgmcT4HyYAjd_9DVC1wycStSt-fP5RCFqIr4d2Bj8TigV0STVyuRVkdwx20lbpFoL97RAAZHf_JRSpN09tIlPM/s1600/rss.png" border="0" /></a>
</td> 
<td> 
<a style="margin-left:5px;"href="http://twitter.com/SEU USUÁRIO DO TWITTER" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrKsM23b0doBNBuqwPwq4QoKiE9nHEdvLQMM84mbJmZVErYmyEvwnHTAhS7Jj6DGl-zqlnfAEZsXNBwyAnjcNXTY6P7NzxFi2R-3Bvk8XpkOaHgMpsfEzfAW6ylpCXezw0xztEOSc-NaU/s1600/twitter.png" border="0" /></a>
</td> 
<td> 
<a style="margin-left:5px;"href="URL DA SUA FAN PAGE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK0fsQwqjQ5OextG3uY-upyG5amYZ2JdIZ-pBQR1fMBC3rhmnFGEGgTHymYJz8GOiuZcIjMYgY-3j1i3UL4iCMtmC0PDFZRX3XwrsNhSuEJHnHZrumiEy3aL0reviqhVwrcG3iYGZUYHs/s1600/facebook.png" border="0" /></a>
</td> 
</tr>
</tbody></table>
<div class="dbbar">
 
<div class="emailsub">
 
<div class="emailupdatesform">
 
<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 DO FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="emailupdatesinput" name="email" value="Digite seu e-mail..." onblur="if (this.value == '') {this.value = 'Digite seu e-mail...';}" onfocus="if (this.value == 'Digite seu e-mail...') {this.value = '';}" type="text" /><input value="NOME DO FEED" name="uri" type="hidden" /><input value="Cadastrar" class="joinemailupdates" type="submit" /></form>
</div>
</div>
</div>
</div>

Não esqueça de alterar o código nas partes destacadas em vermelhos, verde e azul.

Vermelho – Nome do Feed
Verde – Usuário do Twitter
Azul – URL da sua página do Facebook

Compartilhe :

Postar um comentário

Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Ajudinha Blog - All Rights Reserved

Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger