Box Elegante Para FeedBurner

Nesta postagem compartilho com vocês mais uma Box Bem Elegante para Você conseguir mais assinantes Feed Burner. 

Já havia mostrado em tutoriais mais antigos outras box também muito elegantes. Para ver esses tutoriais, digite na caixa de busca do site e veja estes tutoriais. 

Enfim; Para colocar esta no seu site.

Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código:

<div align="center" id="probloggerideas"> <div id="ig-subscription-optin" filter: progid:dximagetransform.microsoft.gradientundefined startcolorstr='#55AAEE',endcolorstr='#003366',gradienttype=0 ); width: 265px;"> <h4 id="probloggerideas-title-text" style="color: 000; font-size: 20px;"> Receba atualizações do DicasHot no seu e-mail</h4> <div id="probloggerideas-sub-title-txt" style="color: 000; font-size: 14px;"> Receba gratuitamente novos posts direto no seu e-mail, assim você não perde nenhuma atualização do DicasHot!!!</div> <br /> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEED-BURNER-ID','popupwindow','scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="name" id="probloggerideas_Subscriber_name" name="name" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Digite o Nome do Seu Feed" /><br /> <input class="email" id="probloggerideas_Subscriber_email" name="from" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Digite Seu E-mail" /><br /> <div class="separator" style="clear: both; text-align: center;"> </div> <input name="uri" type="hidden" value="YOUR-FEED-BURNER-ID" /><input name="loc" type="hidden" value="en_US" /> <input id="probloggerideas_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Inscrever-se!" /></form> </div> </div> <style> #ig-subscription-optin
{
  height:auto!important;
  text-align:center!important;
  font-family:Georgia, Times, "Times New Roman", serif!important;
  line-height:22px;
  border:none;
  margin:8px 0 0!important;
  padding:0 10px 15px 15px !important;
}
 
#ig-subscription-optin p
{
  line-height:22px;
  font-family:Georgia, Times, "Times New Roman", serif;
  border:none;
  margin:8px 0 0!important;
  padding:5px;
}
 
#ig-subscription-optin input.name
{
  background:#FFF urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMQFZGE95yIYFHBMGT7gAfeocLsW34DnsybmIHKiv9vhlRhCNBjusEANIgL87h9W3snss4np9VT33Y6XK4BP3A3JhVDW3HjaxQG-kSug2HjaXrJZaatcLN_js5ihm9y3lDiDyJp_BAjBZV/s1600/subscribe-name.png) no-repeat center right;
}
 
#ig-subscription-optin input[type="text"]
{
  border:1px solid #111!important;
  font-size:15px!important;
  margin-bottom:10px!important;
  width:80%!important;
  height:auto!important;
  padding:8px 28px 8px 10px !important;
}
 
#ig-subscription-optin input.email
{
  background:#FFF urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAQ6UnAoIWY6OmqKhS2btMYoQE8u9mMvAR9T8K03wjBmBHlUkpXbpxi4-RZqV54q-u8mNtUPgr9U8Q7q4LSqyJJJm1YBXpom8UHCLepOZAcQB9WpKQPAIu7emYkw2Zr1Sa3JO0E3Fd136O/s1600/subscribe-email.png) no-repeat center right;
}
 
#ig-subscription-optin input
{
  font-family:Georgia, Times, "Times New Roman", serif;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  box-shadow:0 2px 2px #111;
  -moz-box-shadow:0 2px 2px #111;
  -webkit-box-shadow:0 2px 2px #111;
  margin:0;
  padding:0;
}
 
#ig-subscription-optin h4
{
  margin-bottom:8px!important;
  font-weight:700!important;
  line-height:26px!important;
  letter-spacing:normal;
  text-transform:none;
  text-decoration:none;
  text-align:center!important;
  font-family:Georgia, Times, "Times New Roman", serif;
  border:none;
  float:none;
  padding:0!important;
}
 
input:hover[type="submit"]
{
  background-color:#0094D2;
  border:1px solid #0094D2;
  color:red;
  text-decoration:none;
}
 
input[type="submit"]
{
  background-color:#00A7ED;
  border:1px solid #0094D2;
  color:#FFF;
  cursor:pointer;
  font-family:'Droid Sans', sans-serif!important;
  font-size:13px;
  font-weight:400;
  text-decoration:none;
  padding:5px;
}
 
input
{
  color:#333;
  font-family:'Droid Sans', sans-serif;
}
 
#ig-subscription-optin input[type="submit"]
{
  background:#f6640e;
  border:1px solid #111!important;
  color:#FFF;
  cursor:pointer!important;
  font-size:18px!important;
  font-weight:700!important;
  text-shadow:-1px -1px #3A060A!important;
  width:90%!important;
  height:auto!important;
  line-height:24px!important;
  padding:6px 0!important;
}
 
#ig-subscription-optin input[type="submit"]:hover
{
  color:#FFFC00;
}</style>

Tendo colado o código, substitua a parte destacada de Azul pelo seu nome Feed Burner. 

Tendo feito isto, está pronto!!!

Observação:

Perceba que eu já coloquei o CSS da box junto com o Gadget para facilitar. Mas, caso queira instalar o CSS direto no seu HTML, basta recortar o css do código ir até o seu HTML e colar lá. Ok.

Deixe seu comentário.