Caixa de Assinar Feed com CSS3 e Validação de e-mail com Jquery

 Vamos ao Tutorial

1º – Acesse o painel do seu blog e clique na guia modelo.

2º – Em seguida, clique no Botão Editar HTML.

3º – Segure as teclas CTRL+F e procure por:
]]></b:skin> 

4º – E, acima dele, cole o seguinte código:

#form-feed-2 {text-align: center;font-family: Arial, sans-serif;width: 220px;margin: 0 auto;}
.form-feed-2p {font-size: 14px;}
.caixa-form-feed-2 {width: 200px;height: 28px;border: 1px solid #CCC;padding: 3px;-webkit-box-shadow: inset 0px 0px 10px -2px #B3B3B3;-moz-box-shadow: inset 0px 0px 10px -2px #B3B3B3;box-shadow: inset 0px 0px 10px -2px #B3B3B3;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;padding-left: 5px;padding-right: 5px;font-size: 14px;}
.caixa-form-feed-2:focus {border-color: #AEAEAE;outline: none;}
.btn-form-feed-2 {width: 100px;height: 33px;background: rgb(64,146,226); /* Old browsers */background: -moz-linear-gradient(top, rgba(64,146,226,1) 0%, rgba(26,117,221,1) 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64,146,226,1)), color-stop(100%,rgba(26,117,221,1))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, rgba(64,146,226,1) 0%,rgba(26,117,221,1) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, rgba(64,146,226,1) 0%,rgba(26,117,221,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, rgba(64,146,226,1) 0%,rgba(26,117,221,1) 100%); /* IE10+ */background: linear-gradient(top, rgba(64,146,226,1) 0%,rgba(26,117,221,1) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4092e2', endColorstr='#1a75dd',GradientType=0 ); /* IE6-9 */border: 1px solid #176ABB;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;font-size: 15px;text-transform: uppercase;text-shadow: 1px 1px 1px #176ABB;filter: dropshadow(color=#176ABB, offx=1, offy=1);-webkit-box-shadow: inset 0px 0px 10px -2px #2378CB;-moz-box-shadow: inset 0px 0px 10px -2px #2378CB;box-shadow: inset 0px 0px 10px -2px #2378CB;cursor: pointer;}
.btn-form-feed-2:hover {background: #499BEA;background: -moz-linear-gradient(top, rgba(73, 155, 234, 1) 0%, rgba(32, 124, 229, 1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73, 155, 234, 1)), color-stop(100%,rgba(32, 124, 229, 1)));background: -webkit-linear-gradient(top, rgba(73, 155, 234, 1) 0%,rgba(32, 124, 229, 1) 100%);background: -o-linear-gradient(top, rgba(73, 155, 234, 1) 0%,rgba(32, 124, 229, 1) 100%);background: -ms-linear-gradient(top, rgba(73, 155, 234, 1) 0%,rgba(32, 124, 229, 1) 100%);background: linear-gradient(top, rgba(73, 155, 234, 1) 0%,rgba(32, 124, 229, 1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 );}
.btn-form-feed-2:active {background: #499BEA;}
.no-space1 {margin-top: 14px;}
.no-space2 {margin: 0 auto;font-size: 17px;text-transform: uppercase;font-weight: bold;color: #363636;width: 220px;margin: 0 auto;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB3UFH0jYcDU7gMMOHLhG7Ng6_Da9TnsiohxnFZw-J6wJPEilzg0IlvPUAZiUU0gO72npQWrro3Rur7RslniME9QuSg8qcuWARzud8PIxGWww9J7yL5hdQls0-VXXv1YOHCWpH3znbx64/s1600/social_rss_box_orange.png) no-repeat -5px 0px;height: 120px;}
.assinar-form-msg {float: right;font-size: 22px;padding-top: 23px;padding-right: 12px;cursor: default;}
label.error {display: block;text-align: center;font-size: 14px;padding-bottom: 50px;margin-bottom: -50px;position: relative;margin-top: -15px;margin-bottom: -40px;padding-top: 5px;}
br {clear: both;}
label.valid {padding-bottom: 0 !important;margin-bottom: 26px !important;}
input.valid {border: 1px solid #AEAEAE;}
input.error { border: 1px solid red; }

5º – Segure as teclas CTRL+F e procure por:
</head> 

6º – E, acima dele, cole o seguinte código:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/44914301/codigos/box-jquery-validation/jquery.validate.js" charset="utf-8"></script>
<script>
$(document).ready(function(){
$("#form-feed-2").validate({
rules: {
email: {
required: true,
email: true
}
}
});
});
</script>

7º – Depois, clique em Salvar Modelo.

8º – Depois, clique na Guia Layout.

9º – Clique em Adicionar Gadget e selecione o gadget tipo HTML/Javascript.

10º – Dentro do conteúdo do gadget, cole o seguinte código (lembre-se de substituir):

<form id="form-feed-2" 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 SEU FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<div class="form-feed-2p no-space2">
<div class="assinar-form-msg">Assine<br/>nosso<br/>feed:</div></div>
<p class="no-space1"><input type="text" for="email" name="email" class="caixa-form-feed-2" value="" placeholder="Digite seu e-mail aqui."/></p>
<label for="email" generated="true" class="error"></label>
<input type="hidden" value="NOME DO SEU FEED" name="uri"/>
<input type="hidden" name="loc" value="pt_BR"/>
<input type="submit" class="btn-form-feed-2" value="Assinar" />
</form>

• Lembre-se de substituir os dois textos que estão negritados em vermelho pelo Nome do seu Feed.

11º – Depois, clique em Salvar.