terça-feira, 26 de junho de 2012

Caixa de Feed Flutuante

trago pra vocês uma maneira de personalizar o feed, é uma caixa flutuante que fica no rodapé e acompanha a pagina. Vamos começar.

Exemplo:
Primeiro passo:
Bom, no blogger, vá em Design, adicionar um gadget, HTML/JavaScript. E cole o código logo abaixo mas lembrando em editar as devidas partes em vermelho.
<script type="text/javascript" src="http://dl.dropbox.com/u/30158660/blogger-widgets/assinar-feed2.js"></script><div id="feed" style="visibility: hidden; background-color: #ffffff; width: 320px;height: 115px;border: 1px solid black; position: fixed; bottom: 10px; right: 10px;  z-index:1000000"><div id="topo-title" align="center" style="width: 100%; height:16px; background-color: #000000">
<span id="assinar-feed-head" style="font-size:12px; color:#ffffff;font-weight: bold;">ASSINE NOSSO FEED!<a href="javascript:closebar(feed);"><img src="http://lh5.googleusercontent.com/-aCxkTA3dmzs/Ti2IZcTakNI/AAAAAAAAAgA/KWG2E1hbsoc/CloseIcon.gif" widht="300px" height="16" px; align="right" border="0" title="Fechar" /></a>
</span></div><div style="width: 100%; height:auto !important; min-height: 84px; height: 84px;font-size:13px; font-weight:bold; color:black;"><a href="URL-DO-FEED"><img src="http://lh3.googleusercontent.com/-5sPDxmvH-H4/Ti2An8KywrI/AAAAAAAAAf0/SECv4d2p_oQ/assinar-feed.png" align="left" alt="Inscrever-Rss-Feed" title="Cadastre-se no nosso Feed!" /></a>Cadastre seu <u>E-mail</u> e receba nossas atualizações diretamente no seu e-mail!<br /><br /><form align="center" action='http://feedburner.google.com/fb/a/mailverify' method='post' target="_blank"><input type="text" style="width:230px" name="email" value="Coloque seu E-mail aqui!" onblur="if (this.value == &#39;&#39;) 
{this.value = &#39;Coloque seu E-mail aqui!&#39;;}" onfocus="if (this.value == &#39;Coloque seu E-mail aqui!&#39;) {this.value = &#39;&#39;;}" align="center" />
<input name="uri" type="hidden" value="NOME-DO-FEED" /><input name="loc" type="hidden" value="pt_BR" /><input type="submit" value="Assinar" />
</form>
<p style="text-align: center;margin-top:0px;font-size:80%"></p></div></div>
Espero que tenha gostado. ^^

0 comentários:

Postar um comentário