Caixa de Feed Simples com CSS3


Demonstração da Caixa de Feed em tamanho Real
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:


 #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: #1F9CD8;
background: -moz-linear-gradient(top, rgba(31, 156, 216, 1) 0%, rgba(14, 131, 201, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(31, 156, 216, 1)), color-stop(100%,rgba(14, 131, 201, 1)));
background: -webkit-linear-gradient(top, rgba(31, 156, 216, 1) 0%,rgba(14, 131, 201, 1) 100%);
background: -o-linear-gradient(top, rgba(31, 156, 216, 1) 0%,rgba(14, 131, 201, 1) 100%);
background: -ms-linear-gradient(top, rgba(31, 156, 216, 1) 0%,rgba(14, 131, 201, 1) 100%);
background: linear-gradient(top, rgba(31, 156, 216, 1) 0%,rgba(14, 131, 201, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f9cd8', endColorstr='#0e83c9',GradientType=0 );
border: 1px solid #085988;
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 #117AAB;
filter: dropshadow(color=#117aab, offx=1, offy=1);
border-image: initial;
}
#btn-assinar:hover {
background: #1F9CD8;
}

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.

Nenhum comentário:

Postar um comentário

Postagem mais recente Postagem mais antiga Página inicial