A assinatura do feed é uma das diversas formas de fidelizar
leitores ao blog. Hoje, vamos aprender como inserir uma caixa de feed, embora
simples, mas com um desenho muito interessante, conseguido com gradientes de
CSS3, conforme se vê na imagem abaixo:
Vamos ao tutorial:
1º – Acesse o painel do seu blog e clique na guia modelo.
2º – Clique no botão Editar HTML e segure as teclas CTRL+F e
procure por:
]]></b:skin>
3º – E, acima dele, cole o seguinte código CSS3:
#input-rss {
width: 185px;
padding: 8px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-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: 15px;
border-image: initial;
float: left;
margin-right: 6px;
}
#input-rss:focus {
border: 1px solid gray;
outline: none;
}
#btn-assinar {
cursor: pointer;
margin-top: -7px;
height: 31px;
color: white!important;
background: #008594;
background: -moz-linear-gradient(top, rgba(0, 133, 148, 1) 0%, rgba(4, 180, 174, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0, 133, 148, 1)), color-stop(100%,rgba(4, 180, 174, 1)));
background: -webkit-linear-gradient(top, rgba(0, 133, 148, 1) 0%,rgba(4, 180, 174, 1) 100%);
background: -o-linear-gradient(top, rgba(0, 133, 148, 1) 0%,rgba(4, 180, 174, 1) 100%);
background: -ms-linear-gradient(top, rgba(0, 133, 148, 1) 0%,rgba(4, 180, 174, 1) 100%);
background: linear-gradient(top, rgba(0, 133, 148, 1) 0%,rgba(4, 180, 174, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb200', endColorstr='#008594',GradientType=0 );
border: 1px solid #0489B1;
font-size: 17px;
color: white;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 8px;
cursor: pointer;
float: left;
line-height: 12px;
text-shadow: 1px 1px 1px #008594;
filter: dropshadow(color=#008594, offx=1, offy=1);
border-image: initial;
}
#btn-assinar:hover {
background: #ffb200;
}
4º – Depois, clique em Salvar Modelo.
5º – Agora, vá até a guia Layout e clique em Adicionar
Gadget.
6º – Selecione o Gadget HTML/Javascript e no conteúdo dele
cole o seguinte código:
<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 SEU FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input style="display: initial;" id="input-rss" class="input-rss" type="text" name="email" />
<input type="hidden" value="NOME DO SEU FEED" name="uri" /><input type="hidden" name="loc" value="pt_BR" />
<input id="btn-assinar" class="mais" style="width: 90px;margin-top: 1px;font-size: 15px;" type="submit" value=" ASSINAR " />
</form>
Lembre-se de substituir as duas partes que tem “Nome do seu
Feed”.
7º – Depois, clique em Salvar. Pronto, bastar conferir.
Fonte: swx.com.br
