Image Image Image Image Image
Scroll to Top

Topo

feeds

29

fev
2012

Sem Comentários

Em Blog
CSS
HTML

Por Allison

Caixa de Feed Simples com CSS3

Em 29, fev 2012 | Sem Comentários | Em Blog, CSS, HTML | Por Allison

Fonte: Iago Melanias/BlogandocomFacilidade

No artigo de hoje, aprenderemos como inserir uma caixa de feed simples no Blogger. Precisamos sempre achar formas de conseguir mais leitores fidelizados, os feeds ligam muito os leitores aos blogs, e as caixas de assinar feed são táticas para conseguir mais assinantes. A caixa possui gradientes com CSS3 e tem um Design bem interessante. Temos abaixo a imagem que demonstra bem o que vamos inserir.


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.

Tags | , , ,