Códigos e Scripts Vanessa S.
Box Flutuante Assinar Feed via Email
Que tal oferecer assinatura de seus Feed a seus leitores, através de um box flutuante, que funciona como uma janela Pop Up que se abre assim que o leitor entra em seu blog?
Este recurso já é oferecido à plataforma Wordprees, através da instalação de um plugin, porém, agora também é possível obtê-lo no Blogger,para isto basta instalar um código no template.
Atendendo a sugestão de artigo enviada por email, hoje você verá como instalar um Box Flutuante e poder divulgar e oferecer assinatura de seus Feeds a seus leitores.
Este widget é bem simples e fácil de instalar, e possui um efeito bem legal.
DEMO
Vamos ver como instalar?
Vá para o menu “Layout”, clique em “adicionar um gadget”, (pode ser em qualquer lugar: sidebar, footer etc, mas não coloque título), escolha o modo HTML/javascript e cole o seguinte código:
<style type="text/css">
#topbar
{
padding: 5px 5px 5px 5px;
visibility: hidden;
border: black 1px solid;
width: 340px;
font-family: Tahoma;
position: absolute;
background-color: white
}
</style>
<script type="text/javascript">
var persistclose = 0
var startX = 5
var startY = 5
var verticalpos = "frombottom"
function iecompattest()
{
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name)
{
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0)
{
offset = document.cookie.indexOf(search)
if (offset != -1)
{
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar()
{
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar()
{
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id)
{
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else
{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop")
{
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else
{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<div id="topbar">
<a href="javascript:closebar();"><img border="0" style="float: right;" src="http://lh4.ggpht.com/_UCfxgWHzU98/S21DcwKbx9I/AAAAAAAAByU/XVXEvhvu7rA/closeicon.gif" rel="nofollow" title="Fechar janela" /></a>
<a target="_blank" href="url-do-seu-feed"><img border="0" vspace="4" align="left" title="Assine nosso Feed" height="48" src="http://lh6.ggpht.com/_UCfxgWHzU98/SuutdCeSzAI/AAAAAAAABXI/LsUY2tSb2AI/rss_feed.png" hspace="4" width="48" /></a>
<center><font color="#000000"><b>Fique sempre atualizado! <br />Cadastre-se e receba nossas novidades em seu e-mail.</b> </font><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=nomedoseufeed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' ><input name="email" style="WIDTH: 250px" /><input name="uri" type="hidden" value="nomedoseufeed" /><input name="loc" type="hidden" value="pt_BR" /><input type="submit" value="Assinar" /></form>
</center><span style='font-size: 65%;font color: #000;text-align: right'>Widget by MundoBlogger<a target='_blank' href='https://www.mundoblogger.com.br/2010/03/box-flutuante-assinar-feed-via-email.html'><font color="#000000"> Instale este widget</font></a></span></div>
<div class='clear'></div>
Faça as alterações necessárias. Na parte destacada em azul, coloque a url do seu Feed.
Na parte destacada em vermelho, coloque o nome do seu Feed.
Se precisar, vá até o site FeedBurner e verifique o seu Feed, copie-o e cole- no local destacado em vermelho.
Lembrando que para este Widget funcionar é necessário que você tenha habilitado a opção “assinatura de feed por email”.
E antes que eu me esqueça: Não retire os créditos! E não publique este widget como se fosse seu!
Não esqueça que antes de disponibilizar algo, existe alguém que “ralou” bastante, testando e editando código para ser publicado e disponibilizado para uso, portanto, os créditos devem ser mantidos, ok?
[alerta]
A funcionalidade deste script pode variar de acordo com o template.
Templates que possuem muitos scripts, acabam gerando “conflitos” entre si. Caso este script não funcione em seu blog, faça uma avaliação de quais realmente são mais necessários. Para melhor entendimento, leia este artigo: Por que alguns scripts não funcionam no meu blog.
[/alerta]
No template q utilizo no momento não funciona, desço a barra e nunca chega ao fim.
Já template que estou preparando para mudar funcionou, mas ao digitar o e-mail, a caixa de confirmar abre em um popup e na página do blog. Sabe me informar como corrijo esse erro??
Ju tenho uma duvida quando eu coloco ela em meu blog e o visitante asassina, ao clicar em “Enviar” carrega-se duas paginas de confirmação para confirmar aquelas letras e tals.. Isto é normal?
Aqui Não deu certo o box não fica flutuante, fica na área de Gadgets como se fosse um Gadget comum, O que eu faço?
Vc deve ter feito algo errado, não há como eu saber o que houve.
amigo no meu aki ele comforme vou decendo no site ele desce tudo e nao para para colocar o email nele.oque eu faço?
Oi boa tarde como posso colocar esse código na parte inferior do blog ?
É só ler o tutorial que já explica como.
Ok Obrigado.
Como fazer no wordpress.org?
Existe um plugin que faz isso, mas não lembro o nome dele.
Ah…como saber qual o nome do plugin? Eis a questão
Infelizmente não tenho como te ajudar, pq não faço idéia tb..rs
Me ajuda nessa bagaça ta bugada o feed não vai pq antes eu fis pq era .blogspot.com,mas comprei um dominio .net ta deficil não consigo botar ele dá erro,me ajuda por favor =(.
Valeu por mais essa dica! Seu site é incrível!!
ué no meu blog não ta aparecendo eu coloquei o feed do blog o nome mas nao ta aparecendo pq?
Clau, se eu utilizar o feed do próprio blog tem algum problema?
rapaz aqui no meu blog omeudownload.blogspot.com funciona perfeitamente! obrigado!
Pablo
Conforme eu já comentei anteriormente, a funcionalidade deste script relmente pode variar de acordo com o template. Infelizmente não tenho como te ajudar.
Clau,tentei, mais não deu certo a pagina do meu blog ficou infinita, queria saber se vc tem outro post relacionado com o feed, mais eu queria um que assim que o visitante entrasse no meu blog aparesesse uma janela para que ele se escrevesso no feed, #souseufã
Ciao, Clau!!
Stoi a ti screver per pregare ajuda.. Observei che os e-mails do feedburner notificando las atualizazon di blog all cadastrados mostram la matéria completa… Existe una maneira, alguma opzon la marcarer in feedburner all no Blogspot per che apenas o link e o título dellas nuovas postegens apareçam reduzindo o número di caracteres in e-mail enviado all cadastrados, per ficare apenas o 1º parágrafo, poi è un forma di aumentar o acesso in blog. Molto legal questa tua dica, vou usar in blog.
Abbraccio fraterno,
no meu aqui nao rola para baixo e para cima! o que faço?
Claaaaau.
Queria um desse, não só para convidar os leitores a assinar o feed, mas também pra linkar as páginas de redes sociais. Aí eu fiz tudo bonitinho, mudei o que era preciso e coloquei. Deu certo menos por um detalhe: quando desço a página, o widget fica por trás dos outros gadgets.
Como lida? :~
O meu funcionou, mais notei que apenas no IE enquanto no FireFox 4.0 não apareceu nada!
Alguém poderia me da uma força?
Infelizmente não funcionou no meu blog…
O widget apareçe abaixo da margen inferior ficando invisivel aos visitante ou fica aparecento por trás das imagens e texto do blog…
Clau, se você poder me ajudar, eu agredeço!
Meu blog: www baixegratis .net
Oi Clau tudo bem com vc?
Estou aprendendo muito com o seu blog viu?
Valeu por mais uma dica!
Se quiser conhecer o meu blog, o endereço é:
http://blogdosmartin.blogspot.com
Continue nos ajudando com essas dicas preciosas!
Abraço!
Ana Costa
Dá uma lida no tutorial: Criar mapa do site.
Marcus
Existe sim, mas não me lembro o nome dele.=/
Olá Cláudia, td bem? Você conhece algum plugin com a mesma função para o wordpress?
Abs
Marcus
Olá, seu blog tem-me sido muito útil para a construção do meu, muito obrigada.
Agora precisava de uma ajudinha…como faço para pôr o botão de ir para o topo? eu puz só que ficou mt minorquinha! outra coisa, gostava que o meu blog tivesse uma apresentação do género do seu, ou seja com as diversas páginas assinaladas para clicar…pode me ajudar? obrigada
Beto Default
Infelizmente, ainda não.
Clau, valeu pelo código. Já tem alguma "notícia" de incompatibilidade deste box flutuante com outro código JS ? Algum script ou widget ? ^^ 🙂
Luis ADM
Se vc não notou, no dia 25/12/10 eu publiquei um post informando que estou viajando e o blog entraria em recesso por um periodo.
Não me leve a mal não, mas independente de eu estar viajando de férias ou não, quanto as respostas dos comentários no blog,eu respondo qdo posso! Qdo tenho disponibilidade e tempo para fazer-lo. Se não lhe respondi, foi justamente por não estar disponivel.
pow clau nem pra responder,vle sua atenção em!
qual é o plugin do wordpress?
Obrigado
arteffinal.com
Em #topbar
tenta aumentar o valor em padding, desta forma:
padding: 5px 5px 20px 5px;
Olá Clau…,
quanto ao box flutuante, gostaria de saber onde posso alterar a altura (posicionamento) dele por que se você olhar no meu blog: http://www.arteffinal.com ele irá mostrar o box, porém eum um lugar que não dar pra ver o seu crédito. Aguardo uma resposta.
Abraço.
Ah, blz, não entendo nada de Cookies mas ta fmz, parabens pelo site, obrigado!
@Bruno Sajermann:
ele não falou como conseguiu resolver isso, mas eu acredito que possa ter relação com os cookies, pq se vc analisar esse box funciona a base de um script que utiliza cookies para faze-lo funcionar.
Falo isso pq o código pra abrir o cadastramento do email em "pop up" é o mesmo código disponibilizado pelo próprio Feedburner.
Clau, o leitor @DownloadsXT citou nops comentarios, que estava com problema de abrir duas janelas quando a pessoa vai assinar o feed, só que ele conseguiu arrumar, porém ele não falou como, você sabe como ele arrumou???
Por favor, to com o mesmo problema!
Bjus!
@sandro3a:
Infelizmente eu não tive tempo algum pra tentar descobrir isso. Mas eu acredito que possa ser algo relacionado ao código fornecido pelio Feedburner,
pq o código pra abrir o cadastramento do email em "pop up" é o mesmo código disponibilizado pelo Feedburner, essa parte eu não alterei em nada no código.
Não tem como eu te ajudar.
@Nissan Skyline:
No inicio do código, lá em "#topbar", onde está
"background-color: white", troque por:
background: transparent url(endereçodasuaimagem);
@Daniel:
Vc deve habilitar a opção para oferecer cadastro via email de seus feeds, e para isso deve fazê-lo através do site Feedburner.
meu feedBuner flutuante aparece essa mensagen quando envio o email:
A alimentação não tem assinaturas por e-mail ativado como faço para resolve? ou The feed does not have subscriptions by email enabled.
Olha eu coloquei ele no blog tem como colocar uma imgem de fundo background pois assim ele fica atras dos videos e imagens do meu blog se tiver me ajuda vlw gostei muito do seu blog deve entender muito de html,css,xml obrigado seu blog e lindo a sua cara 😉
Oi muito bom esse tutorial mas estou com um probleminha aqui no meu blog de teste, o box esta funcionando corretamente abrindo em um pop up sendo que a pagina do blog tbm muda junto, eu li um comentario de um amigo que estava com essa problema tbm, mas ele não postou como conserta. Alguem pode me ajudar nisso. Muito obrigado desde já.
Bom dia, essa ferramenta é muito bacana, queria saber se existe uma configuração para quando fechar a caixa ela não aparecer mais, ou seja só aparece no primeiro acesso e quando fechada não retorna.
@Adm Scorpion:
1º: Pelo amor…eu não sou "mano" O.o
Sou mulher O.o
A funcionalidade deste script pode variar de acordo com o template. Dá uma lida no final da postagem, tem um link de um artigo que pode te esclarecer a respeito.
Mano fiz qoeu vc mandou fazer mais o feed box num fica flutuando e sim em forma de widget
oi clau,
criei um script a parti de seu mas com outra função ok!
não copiei nada de de texto do seu artigo!
da uma olhada ae !
http://reidobloguinho.blogspot.com/2010/04/box-de-pesquisa-flutuante-no-blog.html
Ja concertei o problema da pagina abrir em cima do meu blog.
mas agora tou com outro problema. e creio que esse problema só tem no meu blog. quando voce vai descendo a pagina o box tambem desce, mas só que ele ta passando por tras da imagem que fica o titulo dos widgets da minha sidebar. Clau se poder me ajuda a resolver isso por favor. se eu for mecher no código é capaz de eu estragar ele 😀
Sera que tem como voce arrumar uma pequena coisinhas. quando a pessoa coloca o email para assinar e clica em Assinar abre uma janela pop-up e tambem abre a pagina de registro do email em cima do meu blog. Eu gostaria que so a janela pop-up abrisse e nao a pagina toda em cima do meu blog.
Como posso resolver isso?
desde já agradeço a ajuda
meu email e felipesouzarabello@gmail.com
Sera que tem como voce arrumar uma pequena coisinhas. quando a pessoa coloca o email para assinar e clica em Assinar abre uma janela pop-up e tambem abre a pagina de registro do email em cima do meu blog. Eu gostaria que so a janela pop-up abrisse e nao a pagina toda em cima do meu blog.
Como posso resolver isso?
Aee. Isso que tava querendo. Vlw
Amei e coloquei no meu blog! E não se preocupe pois mantive os créditos ^^
Obrigada!