Widget assinar FEED - Personalizado

Muitas pessoas procuram um widget de assinar o feed personalizado, e sei que é difícil pois eu estava a um tempão. Mas finalmente achei.

Nesse tutorial veremos como adcionar este widget personalizado, exemplo na imagem abaixo.

1. Na guia Layout do seu painel Blogger, selecione a opção Adcionar Gadget onde você quiser.
2. Selecione a opção "HTML/JavaScript" e cole o código abaixo:

<script type="text/javascript" language="javascript"> 
function changeBorder1() {
  if(document.getElementById('input-rss').className == "input-rss") {
    document.getElementById('input-rss').className ="input-rss2";
  }
}
function changeBorder2() {
  if(document.getElementById('input-rss').className == "input-rss2") {
    document.getElementById('input-rss').className ="input-rss";
  }
}
</script> 
<style type="text/css"> 
.input-rss {
  font:normal normal 12px Arial;
  border:2px solid #63bdf7;
  padding:4px 5px;
  width:93%;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  -goog-ms-border-radius:6px;
  border-radius:6px;
}

.input-rss2 {
  font:normal normal 12px Arial;
  background:#FFFFFF;
  border:2px solid #ff333d;
  padding:4px 5px;
  width:93%;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  -goog-ms-border-radius:6px;
  border-radius:6px;
}
.submit-rss {
  width:80px;
  font-weight:bold;
  color:#000000;
  text-shadow:1px 1px #FFFFFF;
  outline:none;
  margin:5px 0px 0px;
  padding:5px;
  background:#EEEEEE;
  background: -webkit-gradient(linear, left top, left bottom, from(#FBFBFB), to(#E3E3E3));
  background: -moz-linear-gradient(top, #FBFBFB, #E3E3E3);
  border:1px solid #E3E3E3;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  -goog-ms-border-radius:2px;
  border-radius:2px;
}
.submit-rss:hover {
  width:80px;
  cursor: pointer;
  font-weight:bold;
  color:#000000;
  text-shadow:1px 1px #FFFFFF;
  outline:none;
  margin:5px 0px 0px;
  padding:5px;
  background:#EEEEEE;
  background: -webkit-gradient(linear, left top, left bottom, from(#FBFBFB), to(#E3E3E3));
  background: -moz-linear-gradient(top, #FBFBFB, #E3E3E3);
  border:1px solid #E3E3E3;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  -goog-ms-border-radius:2px;
  border-radius:2px;
}
.submit-rss:active {
  width:80px;
  cursor:pointer;
  font-weight:bold;
  color:#FFFFFF;
  text-shadow:1px 1px #000000;
  outline:none;
  margin:5px 0px 0px;
  padding:5px;
  background:#000000;
  border:1px solid #6A9307;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  -goog-ms-border-radius:6px;
  border-radius:6px;
}
.text-rss {
  font:normal normal 10px Arial;
  text-align:center;
}
table.rss {
  border:1px dashed #DDDDDD;
  padding:0px 5px 0px;
  margin:5px 0px 0px;
}
.image-rss {
  margin:0px 5px 0px -5px;
  padding:5px 0px 0px;
}
</style> 
<table class="rss" border="0" width="100%" cellpadding="0" cellspacing="5"><tr><td><div class="image-rss"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0TIjTuMBDIajGnotfW_ADJX9klJv115TbtOFz3N_VT0ksCAex1bhQv1tslqZhtTrUvKVCdjkUyvV6CfJL1uhd_6Dn8hwwLJAdhpgKCTBZBnAzJ3A5rDIK8VpyZ7MP8tJ4B_-Bf2xLItc/s1600/Mail+RSS.png" border="0" alt="RSS" oncontextmenu="return false" ondragstart="return false" /></div></td><td><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID DE SEU FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">Informe seu e-mail: <input onclick="changeBorder1()" onblur="changeBorder2()" id="input-rss" class="input-rss" type="text" name="email" /><input type="hidden" value="ID DE SEU FEED" name="uri" /><input type="hidden" name="loc" value="pt_BR" /><input class="submit-rss" type="submit" value=" Assinar " /> <div style="float:right;margin:5px 0px 0px;"><img src="http://feeds.feedburner.com/~fc/ID DE SEU FEED?bg=99CCFF&amp;fg=444444&amp;anim=30%20&label=leitores" height="26" width="100" style="border:0" alt="" /></div></form></td></tr> 
</table>

Lembrando: 

♦ Nos trechos em azul, troque pelo ID de seu FEED.
♦ Nos trechos em vermelho, é a palavra que aparece no botão para assinar.
♦ Em laranja é a palavra do contador de assinantes.

Alguma dúvida, crítica, elogio, não conseguiu? Poste um comentário!