17/04/2010

Criar uma Janela de Divulgação no blog

Vamos mostrar como colocar uma janela de divulgação (estilo pop up) fixa sobre o seu blog e dentro dela você poderá colocar coisas como adicionar ao Twitter, assinar Feed e outras coisas que deseje ter a certeza que seus visitantes vejam.

Janela pop up no blogspot
Esse código é bem fácil de usar basta adicionar um gadget de html (pagina layout, adicionar gadget, html/javascript) e colar o código abaixo:

<style type="text/css">
<!--
#popjan {border: 2px solid #000000;
background-color: #ffffff;
width: 320px;
top: 200px;left: 100px;
text-align: center;
z-index: 450;position:fixed;visibility: visible;}
-->
</style>
<div id="popjan">
<a style="float:right" href="#" onclick="document.getElementById('popjan').style.display='none';">[Fechar]</a>
<div style="clear:both"></div>
<div style="width:300px; text-align:center; margin:auto">
<div style="float:right; width:100px">conteudo</div>
<div style="float:right; width:100px">conteudo</div>
<div style="float:right; width:100px">conteudo</div>
</div>
<div style="clear:both"></div>
<br />
<a style="font-size:80%" href="http://www.dicasparablogs.com.br/2010/04/criar-uma-janela-de-divulgacao-no-blog.html" target="_blank">Widget Dicas para Blogs</a></div>

No lugar das linhas onde está escrito conteúdo você poderá colocar qualquer html que desejar (link do seu feed, Twitter ou qualquer outra coisa), veja como alterar e configurar corretamente esse novo acessório para o seu blog para deixá-lo totalmente personalizado para o seu site:
border: 2px solid #000000; isso é a borda, veja aqui como alterar as cores, estilo e tamanho das bordas.

background-color: #ffffff; cor de fundo da janela, se quiser alterar aqui tem o código html das cores

width: 320px; isso é a largura da janela, altere como desejar.

top: 200px;left: 100px; isso é a distancia em relação ao topo (200) e lado esquerdo (100) da pagina, também pode modificar como desejar.

Agora vamos passar as configurações dentro da janela de divulgação, note que a linha <div style="float:right; width:100px">conteudo</div> repete-se 3 vezes, ou seja, podemos ter 3 colunas dentro desta janela, ou seja, banners, textos um do lado do outro. Se quiser deixar apenas uma apague essas linhas, caso queria mais divisões é só copiar e repetir o código mais quantas vezes quiser.

Se forem criar mais divisões veja esse código <div style="width:300px; antes da primeira das linhas note que 300 é a soma das 3 colunas, cada uma delas em 100 pixels, então se for modificar a quantidade ou largura delas lembre-se de corrigir o valor total neste trecho.

Pedimos que não retirasse o trecho final do código onde está nosso link assim outros blogueiros que gostem deste acessório possam saber como fazer um no blog também.

Nos modelos novos do Blogger é recomendado colocar esse código num gadget sobre a postagem:
pagina layout do blogger
Isso porquê devido aos novos códigos se for colocado em outra parte pode haver erros e a janela de divulgação aparecer por baixo dos posts do blog. Fizemos esse teste usando o Firefox e Internet Explorer, usando o modelo Josh Peterson.
Related Posts with Thumbnails

87 comentários:

  1. Sobre o post, achei que essa parte fica bem melhor na barra de acessorios pois gera menos poluição visual.
    Sobre outro assunto, quando eu ainda nem mechia no blogger não sabia nem o que era html, eu entrei em um blog hospedado pelo blogger (não lembro o link) que a página abria diferente das outras ai tinha uma opção Internet Rapida / Internet Lenta.
    Sendo que uma das opções abria o site sem alguns gadjets com as imagens com poca qualidade e com o template mais padrão, diferente da primeira opção que abria o blog completo, teria algum codigo para isso que você conheça ? Se puder ajudar :).

    ResponderExcluir
  2. entendi sua duvida sobre a pagina para conexões lentas, mas não sei como fazer isso de alguma maneira automatica.

    os sites que fazem isso realmente tem duas paginas, mas no caso de sites como usam sistema diferente de hospedagem podem formatar cada uma do jeito que desejarem.

    ResponderExcluir
  3. Este comentário foi removido por um administrador do blog.

    ResponderExcluir
  4. olá amigo Fabiano Roberto estou aqui mais uma vez atraz de tirar uma dúvida que creio que ajudará muitos blogs e muita gente
    eu queria saber se vc´s sabem algum código de parceiros ao vivo tipo um que o mega cubo usava há um bom tempo

    ele funcionava da seguinte forma
    quem mandasse maos vizitas oculpava o topo e parecia um texto assim
    tantos vizitantes vindo de tal blog

    eu já tentei criar um código assim pois o pmetrics ele é um sistema de monitoramento de sites tipo o google analytics mas ele é portugês e ele tem como monitorar ao vivo e mostrando de qual site veio

    caso você possa nos ajudar eu ficarei muito grato

    By : Glugu

    ResponderExcluir
  5. veja se é esse o contador que está procurando
    http://www.e-referrer.com/

    eu faço minha lista de top parceiros manualmente consultado as estatisticas do analytics.

    ResponderExcluir
  6. muito bom, mas nao gosto desses popups nao, nao gosto qndo chego num site e tem isso.

    ResponderExcluir
  7. Olá Fabiano...
    desculpe naum mandar isso pelo emial, mas eh pq quado tento enviar recebo a seguinte msg: "Alguns endereços do campo "Para" não foram reconhecidos. Certifique-se de que todos os endereços estão com o formato adequado."

    etaum resolvir postar aki.
    eh o seguinte, eu keria saber como faço para hospedar meus javas scripts com meu dominio.
    EX: tenho um dominio no uol, (www.hentaisbr.net) e keria q o endereço fikasse assim... www.hentaisbr.net/exemplo_de_script.js

    BOM AXO Q CONSEGUIR EXPLICAR O Q KERO.

    VLW, blog ficando cada vez melhor.

    e outra vez volto a falar, desculpa por naum mandar no email

    ResponderExcluir
  8. Olá amigo eu queria saber onde eu ponho o codigo dos anuncios de modo que ele ñ apareça no blog só depois que clicarem em leia mais e ele fique emcima do post ?

    e estilo adsence

    ResponderExcluir
  9. Olá Fabiano!
    Uma grande dica. Vou seguir e vou testar como irá ficar no meu blog.

    ResponderExcluir
  10. ADMIN --- Rui Carlos
    se quiser hospedar arquivos terá que contratar uma hospedagem isso você paga por mês. mas é recomendado fazer isso com outro dominio e deixar o atual somente para o blog.

    ResponderExcluir
  11. Oi Fabiano ..
    eu novamente te enchendo o saco
    viu eu fiz uma nova pagina pra colocar dicas de ali mentação saudavel no meu blog
    e toda semana é um texto novo só que ai tem geito de deixar o texto velho sem ter que mecher na postagem inteira pra incluir o novo texto ??
    da uma olhada no meu blog que acho q vai entender melhor
    http://glamorous-woman.blogspot.com

    ResponderExcluir
  12. Olá Fabiano

    é o seguinte:
    adicionei essa divulgação no meu blog, mas quando algume fecha essa janela, o blog tipo, cai. Como resolver este problema

    vlw
    abraço

    ResponderExcluir
  13. vocÊ sabe algum codigo de contador de click ?

    para por no blog ?

    ResponderExcluir
  14. Glamorous Woman

    sua pergunta foi meio confusa, o que está querendo fazer com o texto da semana anterior? para colocar textos novos é só clicar em nova postagem.


    José
    qual o endereço do seu blog, talvez tenha colocado algo errado no código na hora de alterar, fiz testes e funcionou tudo normal sem mover a janela do blog.


    Pedro Ma®tins ™

    não tenho código para contar cliques, mas você queria contar o que? algum link? ou cada postagem?....

    ResponderExcluir
  15. eu coloquei a janela pop up acima das postagens, faça um teste ai tu verá e talvez poderá me ajudar.

    abraço

    ResponderExcluir
  16. Fabiano é assim
    eu fiz uma nova pagina do blog
    aquela pagina adicional, nela eu fiz pra colocar textos de nutricionista
    toda semana o texto muda mas ñ queria tirar um texto pra colocar outro e pra ficar com o texto antigo eu tive que mexer na postagem inteira do texto passado p colocar junto como se fosse um unico texto
    na nova pagina ñ tem opção de nova postagem .. ou tem ??
    se ñ tiver tem algum geito de fazer da pagina nova pra postar como a pagina inicial ou não

    espero que tenha entendido pq é meio confuso msm pra explicar

    ResponderExcluir
  17. Como ponho a caixa no canto da tela :como esse site --->http://www.gamesturbo.com.br/

    Por favor me respondem!!!

    ResponderExcluir
  18. Glamorous Woman
    nas paginas extras do blog você pode criar até 10 paginas, mas elas não são uma sequencia são totalmente individuais.

    Gabriel
    olhei o efeito e não é dificil de fazer alias é bem parecido com esse que mostramos aqui, durante o final de semana vou preparar um tutorial sobre o assunto.

    ResponderExcluir
  19. Cara gostei muito do poster!
    Não coloquei no meu site, mas guardei para uma ocasião necessária.
    Ela é simpres mas pode ser muito útil. Parabéns pelo tabalho que tem feito!

    Mas tb tenho uma pergunta.
    Existe um jeito de editar o html modelo simples josh Perteson pelo método convencional?

    ResponderExcluir
  20. Thiesco Gonçalves
    é possivel mexer neste template diretamente pelo html, mas eles são mais complicado que os modelos atuais. mas certamente depois de algum tempo vamos nos acostumar com eles também.

    ResponderExcluir
  21. Olá professor Fabiano!

    Bom dia!
    Por favor, preciso de sua ajuda. Não sei como criar uma janela para visitares copiarem o link do meu blog com uma imagem gif no widget "Divulgue-me", tipo o seu "Link para esta página"!

    Já fiz um banner e uma imagem gif, mas não sei como criar uma janela para que os leitores possam copiar o link do meu link e divulguem na lista de blog recomendados...

    Qual a postagem eu aprendo no seu blog?

    Obrigado pela atenção, compreensão e ajuda!

    ResponderExcluir
  22. Gustavo Reis
    você está falando da caixinha com o código do seu banner? se for veja aqui
    Como fazer um banner

    ResponderExcluir
  23. Muito bom esse blog me ajudou muito no meu blog http://www.nerdirado.blogspot.com

    ResponderExcluir
  24. Como faco parA colocar somente na pagina inicial do blog seria possivel ?

    ResponderExcluir
  25. infelizmente não é possível colocar somente em algumas paginas

    ResponderExcluir
  26. Muito legal essa dica Fabiano, vou colocar no blog.
    Valewwww.

    ResponderExcluir
  27. me ajuda postei daload no meu blog mas quando a pessoua vai baixar a janela do meu blog fecha automaticamente

    ResponderExcluir
  28. Otávio Barreto
    no código do download, coloque target="_blank", isso faz a janela do download abrir numa nova pagina

    ResponderExcluir
  29. eu tenho um blog de dawloads mas quando alguem baixa o meu blog some e so fica a pagina do dawload vc pode me ajudar? como eu configuro o link visita meu blog e olha pra vc ver http://oktopus888.blogspot.com/

    ResponderExcluir
  30. Otavio
    você quer abrir os links em uma nova janela? se for isso use target="_blank" no código, logo depois do endereço da pagina.

    ResponderExcluir
  31. Fabiano, tudo bem, se puder me explicar como coloco o formulário Dicas de divulgação na internet, solicite um cálculo de seguro de vida, aguardo sandra boaventura

    ResponderExcluir
  32. Como dar a essa janela um efeito de destaque tipo lightbox

    ResponderExcluir
  33. para fazer o efeito lightbox precisaria ser um tipo de pop up e alguns navegadores vão bloquear

    ResponderExcluir
  34. Olá eu gostaria de saber como colocar tags no blog...
    muita gente posta de nuvens mais eu não gostei do modelo tem outro jeito de tags?
    se tiver encina aí...

    ResponderExcluir
  35. as nuvens de tags as vezes dão erro, mas faça um teste com o código do link abaixo:
    Colocar uma nuvem de tags no blog

    ResponderExcluir
  36. Este comentário foi removido pelo autor.

    ResponderExcluir
  37. Como modificar a altura do fundo.

    ResponderExcluir
  38. andraD
    não entendi o que está querendo dizer com altura do fundo, o posicionamento é neste trecho: top: 200px;left: 100px;

    ResponderExcluir
  39. Desculpa me expressei mal queria dizer a altura da janela, no post vc diz que width: 320px; e a largura da janela quero saber como modificar a altura da janela

    ResponderExcluir
  40. é possivel colocar height:200px para controlar a altura, mas acho que se ajusta automaticamente ao conteudo da janela

    ResponderExcluir
  41. Consegui estender uma imagem semitransparente por todo meu blog fico tipo lightbox agora preciso saber como posicionar o conteúdo dentro da janela *

    ResponderExcluir
  42. o posicionamento dentro da janela é automático, mas a janela na tela do computador é neste trecho: top: 200px;left: 100px;

    ResponderExcluir
  43. GOSTARIA DE SABER SE TEM COMO COLOCAR IMAGENS NO LUGAR DE TEXTO SE TIVER COMO FAÇO?!?

    OBRIGADO E PABABÉNS PELAS DICAS

    ResponderExcluir
  44. nesta parte do código
    <div style="float:right; width:100px">conteudo</div>

    <div style="float:right; width:100px">conteudo</div>

    <div style="float:right; width:100px">conteudo</div>

    você pode trocar os conteudos por códigos de imagens, ou se quiser apenas uma imagem troque esse trecho inteiro

    <img src="endereço da imagem" border="0" />

    ResponderExcluir
  45. CONSEGUIR COLOCAR OS ANUNCIOS E TUDO MAS TA UM POR CIMA DO OUTRO.

    COMO FAÇO PRA AJEITAR ISSO O QUE FICOU POR CIMA NAO DEIA VER O QUE TA POR BAIXO SO APARECE METADE DO ANUNCIO.

    ResponderExcluir
  46. no código da janela tem o valor 300px, precisa alterar para o tamanho que desejar

    ResponderExcluir
  47. Olá Fabiano,

    muito legal suas dicas. Consegui colocar cria a janela mas ela não fica no lugar que eu adicionei a gadget. ela fica caminhando junto com o cursor. É assim mesmo? Eu queria que ela ficasse para pois vai atrapalhar a leitura das postagens...

    Outra dúvida: no lugar do conteúdo eu ponho o que quero divulgar então é algo que eu hospedei em outro site como slideshare não é isso? desculpa as perguntas mas sou blogueira nova de estrada.

    obrigada pelas dicas

    ResponderExcluir
  48. Paula Oliveira
    a janela fica fixa na tela não acompanha o cursor, se está seguindo o mouse então deve ter outro código no seu blog usando os mesmos nomes de scripts

    ResponderExcluir
  49. Amigo fabiano, incluí seu código no meu blog, no entanto está ocorrendo um erro quando o blog é visualizado pelo Internet Explorer, como eu não uso esse navegador, fui avisado por um visitante. Se possível dar uma olhada, eu agradeço!
    http://baiadozeh.blogspot.com
    Abraço!
    Pablo

    ResponderExcluir
  50. vou fazer alguns testes com esse código, parece que está dando problema com os novos templates do blogger

    ResponderExcluir
  51. Fabiano, sei que perguntei isso no email, mas acho que o pessoal deveria saber tbm.
    Na dica, como eu coloco uma imagem para encobrir o blog? Tipo, como página inteira? Qual trecho devo mudar? O Meu interesse é colocar uma mensagem de natal como "página principal" e ao clicar no fechar da janela, o blog aparece.
    Deu certinho o modelo aqui, mas eu preciso colocar uma imagem e não sei como.
    Obrigado!

    ResponderExcluir
  52. não tenho códigos para colocar a imagem inteira na pagina inicial do blogger, essas aberturas de paginas normalmente são feitas em sites onde são possíveis criar e editar as paginas de outra forma

    ResponderExcluir
  53. Como faço pra ela abrir quando clico em algo?

    ResponderExcluir
  54. dentro da janela você pode colocar uma imagem com link como se fosse um banner

    Como fazer um banner

    no link acima tem um gerador de códigos, mas use a opção imagem com link e não a caxinha link-me senão ele vai criar o código com a caixinha junto

    ResponderExcluir
  55. Olá e boa tarde a todos....
    Poxa vida não consigo fazer isso.
    Aliás,eu queria fazer éla rolar junto com a página.
    Tem como alguem mi ensinar ?

    ResponderExcluir
  56. Olá Fabiano...
    Não é ese,o botão já tenho...!!
    Eu quero é esta caixa mesmo,só que quero ela rolando junto com a página.
    Já vi em muitos blogs,só que esta sua fica fixa,tem como colocar pra rolar junto com a página ?

    ResponderExcluir
  57. DDG-admin
    eu sei qual é o tipo de botões que está procurando, vou testar alguns códgos e publicar um tutorial sobre o assunto

    ResponderExcluir
  58. Olá Fabiano tudo bem ?
    Tem alguma noticia sobre o código da caixinha rolante ? ;-)

    ResponderExcluir
  59. Olá Fabiano,encontrei o que eu queria.
    Pois tamebm vou partilhar do código..
    Está aqui nesse link..
    https://docs.google.com/document/pub?id=16_3PMkbgkowPQdGApzAuNuPInk5Qu0_Amwe6MkK5Oqw

    ResponderExcluir
  60. Eai Dicas parablog vocês estão de parabéns mais uma vez mais eu não to conseguindo Codigos de alguns sites como twiter,orkut e etc ...
    vc pode me enformar?

    ResponderExcluir
  61. os códigos para linkar seu perfil no orkut e outras redes é igual um link comum, adicione um gadget de html/javascript e use esse código

    <a href="http://twitter.com/fabianoroberto" title="Seguir no Twitter" target="_blank">twitter</a>


    o texto seguir no twitter aparece quando passa o mouse sobre o link
    ou tem o gadget lista de links

    ResponderExcluir
  62. tenho uma pergunta ja andei por muitos sites seu tem muitas coisa bacana mesmo sabe queria coloca menu no meu blog mas nao de outro site tipo assim no modelo HTML do blog e posivel nao achei nada realionado a esse conteudo ainda se tiver uma resposta agradeço ai meu imail manda pra la se posivel
    wesley_zat@hotmail.com

    ResponderExcluir
  63. não entendi sua pergunta.... um menu em html é só uma sequencia de links com uma formação

    Alterar cores dos links - CSS

    Imagem ao lado do texto ou link

    ResponderExcluir
  64. eu não consigo colocar o gadget pq aki n tem pra colocar em javascript só em URL oque eu faço ?

    ResponderExcluir
  65. Kelven
    quando clicar para adicionar gadget procure na lista, lá tem html/javascript que abre uma janela para você colar o código

    ResponderExcluir
  66. Fabiano, vc teria um código para pop up que só abrisse quando a pessoa terminar a leitura e clicar para fechar a página?
    EX: a pessoa entra, explora o blog à vontade e quando terminar, ao clicar em fechar, aparece um pop up avisando que amanhã ou daqui a dois dias um artigo sobre assunto "X" será postado ou na semana que vem novas fotos poderão ser visualizadas. Assim caso a pessoa tenha interesse no tema, voltará ao blog para ler a nova postagem. Este pop up funcionaria como um quadro de avisos que somente aparece quando o leitor tenta fechar a página.

    ResponderExcluir
  67. cara era o que eu estava precisando por que sempre aparece quando click em algum tópico era o que eu precisava, isso força aos visitantes que só querem sugar pelo menos se cadastre no blog. 100% o código

    ResponderExcluir
  68. Como mudar a cor e o tamanho da letra?
    http://noivasetc.blogspot.com/

    ResponderExcluir
  69. @Monalisa Souza pode alterar a letra mexendo no estilo CSS

    #popjan {....}

    ResponderExcluir
  70. Olá, eu coloquei isso certinho no meu blog só que aparece sempre que mudo de página ou abro um post. Como faço para aparecer só na página inicial?
    Obrigado

    ResponderExcluir
  71. João Tiago Gonçalves
    veja aqui sobre mostrar algo somente na pagina inicial: Conteúdo diferente nas paginas do blog

    ResponderExcluir
  72. Ola eu não estou coneguindo abri meus layout oque eu fsa disso não consigo mexer ou criar Gadgets me ajudddeeeeeeeeeeeeem

    ResponderExcluir
  73. Lavinia mas o que acontece? perdeu a senha? ou a pagina do layout não carrega?

    tente excluir seu histórico de internet, deve ser erro no carregamento da pagina

    ResponderExcluir
  74. Gostei do codigo, mas há como ela ser exibida apenas uma vez na sessao do visitante? por exemplo ao trocar de pagina ela nao se abra novamente, só quando ele fechar o site e entrar novamente.

    Desde ja agradeço!
    abraços

    ResponderExcluir
  75. Oi Fabiano Roberto! =)
    Não sei se vc vai lembrar sobre minhas "últimas dúvidas" por aqui... sobre uma "página de abertura". Bem, como eu não consegui (pq eu queria uma "home" antes da "home"...rs), e estou sempre lendo e relendo suas dicas... aproveito para tirar mais uma dúvida:
    Tenho como colocar uma janela dessas no centro da página, num tamanho grande, e como incluir uma imagem nela? Por exemplo: colocaria a foto da minha "casinha" e ao acessar o blog, abriria essa janela estilo "pop-up" bem no centro do blog, como "boas-vindas"!!! =) Ah, e outra dúvida. Não tem uma forma de bloquear janelas "pop-ups"? Quem bloqueia não vê essas coisas? Obrigada!

    ResponderExcluir
  76. não tem como fazer uma pagina de abertura no blog do jeito que falou.

    o código que mostramos funciona no index (home) somente

    ResponderExcluir
  77. Fabiano,
    Gostaria de saber se é possivel essa Janela de Divulgação ficar parada, sem descer conforme a rolagem da página?

    ResponderExcluir