Assine nosso Feed


Melhores Dicas para Blogueiros

Passe o mouse e veja qual o assunto do tutorial de cada imagem

Fazer Pagina de Boas Vindas no Blog - Criar Pagina de Abertura

Vamos mostrar como criar uma pagina de abertura no blogger porque muitos blogueiros querem colocar uma imagem como fazer uma pagina de boas vindas no blog e não sabem como fazer e isso é mais simples do que parece só precisa criar uma imagem e depois alterar algumas linhas de código HTML no seu blog e seu blog terá uma pagina de abertura com imagens ou textos que desejar.
pagina de abertura no blogger

O primeiro passo é criar e hospedar uma imagem para usar como abertura do seu blog sobre esses assuntos você pode ver nestes links:

Editar e Colocar Efeitos em Fotos e Imagens Online
Criar Banners Online
Hospedar Imagens no Blogger

Depois que já tiver a imagem de abertura do seu blog pronta então escolha uma pagina do seu blog que abrirá ao clicar no link da sua pagina de abertura e copie o endereço dela. Agora coloque o endereço da imagem e o endereço pagina do blog neste código:

<b:if cond='data:blog.homepageUrl == data:blog.url'><center><a href='http://www.dicasparablogs.com.br/p/lista-de-tutoriais.html' title='Bem Vindo ao nosso Site !!!'><img border='0' src='http://www.google.com/logos/2011/brazil_day-2011-hp.jpg'/></a></center><b:else/>


Entre na pagina modelo, sugerimos fazer um backup do seu template, antes de fazer qualquer alteração, clique para editar HTML, use o ctrl F para encontrar <body .... > e coloque o código depois dele. Esse trecho varia um pouco, mas o importante é colocar o código após fechar a tag body, ou seja, depois do sinal >.

Agora procure por </body> e coloque </b:if> antes dele. Salve as alterações feitas e já está tudo pronto. Veja aqui sobre Retirar a barra do blogspot.


Testamos o código em templates padrão do blogger, ou seja, se você baixou algum template da internet pode ser que use tags diferentes e o código não funcione corretamente. Veja aqui como Fazer Pagina com Atualizações mais Recentes do Blog para usar como link na imagem da pagina de abertura do blog.

Fizemos esse tutorial por causa de vários pedidos que recebessem e cada blogueiro deve decidir e deve ou não fazer uma pagina de abertura para o blog como já falamos no tutorial Quais os Melhores Gadgets e Acessórios para Blogs existem muitos tipos de blogs e visitantes então cada um deve sabe o que é melhor para seu blog. Related Posts with Thumbnails
Link desta página
Comentários
87 Comentários

87 Comentários:

Debora disse...

a parte mais dificil foi fazer a imagem, colocar o código foi facil

adorei

Ronaldo Belarmino disse...

muito obrigado, tava a meses procurando como fazer isso.

Angelo disse...

Gostei, coloquei em todos os meus blogs

Rosiel T.S. disse...

Muito bom Fabiano, tava procurando isso faz tempo, ía até pedir pra você fazer um tutorial assim mas nem sabia como explicar.

Abraços!!!

Humor Panda disse...

Olá fabiano, como sempre muito bom, o que eu procuro é quase isso; e para colocar a caixa de fan page facebook com aquele fundo preto transparente?

Anderson disse...

queria saber qual o código colocaria para que ao clicar fechasse a imagem e mostrasse a home original!

Fabiano Roberto disse...

@Humor Panda na pagina de configuração da fan page tem para escolher a cor é mais facil configurar lá do que modificar o código porque tem varios tipos, mas o código da caixa com fundo preto é colorscheme=dark

http://developers.facebook.com/docs/reference/plugins/like-box/

Casa Decorada disse...

Olá, preciso saber se aqui existe algum recurso que me ajude a identificar quem deixou de seguir meu blog.
Obrigada
Valeria

Fabiano Roberto disse...

@Casa Decorada acho que não tem como saber quem parou de seguir o blog só é possivel ver o numero de seguidores

Casa Decorada disse...

@Fabiano Roberto

Obrigada Fabiano, bom fim de semana a vcc e parabéns pelo blog. Vc me ajuda a entender muita coisa sobre blogs.Fico no aguardo, se souber de algo que possa me ajudar .

Humor Panda disse...

muito obrigado pela resposta.

VejaBlog - Seleção dos Melhores Blogs/Sites do Brasil! - disse...

VejaBlog
Seleção dos Melhores Blogs/Sites do Brasil!
http://www.vejablog.com.br

Parabéns pelo seu Blog!!!
- Dicas para Blog -

Você está fazendo parte da maior e melhor
seleção de Blogs/Sites do País!!!
- Só Sites e Blogs Premiados -
Selecionado pela nossa equipe, você está agora entre
os melhores e mais prestigiados Blogs/Sites do Brasil!

O seu link encontra-se no item: Blog

http://www.vejablog.com.br/blog

- Os links encontram-se rigorosamente
em ordem alfabética -

Pegue nosso selo em:
http://www.vejablog.com.br/selo

Um forte abraço,
Dário Dutra

http://www.vejablog.com.br
....................................................................

Valdemir Santos Pedrozo disse...

Isso mesmo estava procurando agora achei, Ainda bem que sigo vc do dica para blogger, obrigado serviu muito.

Fabiano Roberto disse...

@Casa Decorada acredito que não seja possivel para evitar constrangimentos entre as pessoas pois imagine quantos blogueiros ficariam perguntando aos outros porque deixaram de seguir.

isso acabaria virando briga

Angelo disse...

Eu tenho uma sugestão para seu proximo tutorial, como criar uma area de login para blogs ?, e estou precisando em 2 blogs

Fabiano Roberto disse...

@Angelo area para login? tente explicar melhor

pq se for necessário logar em algum site isso aparece automaticamente

Fabiano Roberto disse...

@Anderson não tem como mostrar a home original usando esse código

Rosiel T.S. disse...

Fabiano porque você fez essa vídeo aula sem voz?

Abraços!!!

Fabiano Roberto disse...

@Rosiel T.S. fiz apenas para demonstrar que funcionava.

não quis colocar voz para ficar dizendo apenas cole o código aqui e ali.

afinal esse é um tutorial bem simples de usar.

Fabiano Roberto disse...

mas logo pretendo fazer mais videos e claro com voz

Assessoria Patricinhas Suburbanas disse...

fabiano,
teria como voce fazer um tutorial ensinando a fazer um midia kit??
beijos

Fabiano Roberto disse...

@Assessoria Patricinhas Suburbanas vou pesquisar e escrever sobre o assunto em breve

Chŗiร Oliveira disse...

Muito bom. Parabéns!! Mas ainda estou com uma dúvida: como fazer esta mesma página só que com uma imagem em flash que está hospedada em um site? Obrigada.

Fabiano Roberto disse...

o maior problema é hospedar o arquivo em flash a maioria das hospedagens gratis não aceita.

e hospedagens de sites são um pouco mais complicadas de usar.

para fazer a imagem em flash precisa do programa que chama flash cs5

Chŗiร Oliveira disse...

Então, o que eu preciso é:
no lugar desta imagem JPG colocar um link de uma imagem flash.
o link desta imagem é: http://www.effectgenerator.com/1.0.7/showeffect.php?id=591177

Caso necessário, tenho também o código dela em HTML.
É possível fazer isso?

Obrigada.

Chŗiร Oliveira disse...

Então, o que eu preciso é:
no lugar desta imagem JPG colocar um link de uma imagem flash.
o link desta imagem é: Usei o site www.effectgenerator.com para hospedar.

Possuo também o código dela em HTML.

É possivel fazer isso?

Obrigada.

Márcio Souza disse...

testei até deu certo, mas eu queria apontar para página principal do blog, mas não aceitou

Fabiano Roberto disse...

@Márcio Souza mas a pagina inicial do blog está com a imagem por isso não funciona.

se usar esse código não poderá colocar link para a pagina inicial do seu blog porque aparece só a imagem tem que usar uma outra pagina qualquer ou mesmo uma postagem.

Fabiano Roberto disse...

@Chŗiร Oliveira não testei com flash mas deve funcionar.

tente colocar o endereço do arquivo em flash neste código:

<center><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="468" height="80"><param name="movie" value="http://imagens.frasescurtas.com.br/flash/4681.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><embed src="http://imagens.frasescurtas.com.br/flash/4681.swf" width="468" height="80" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed></object></center>

veja que aparece duas vezes: http://imagens.frasescurtas.com.br/flash/4681.swf

e o tamanho do banner também: width="468" height="80"

Izaque disse...

Olá fabiano eu consegui colocar na pagina inicial mas gostaria de saber que quando meu blog voltar ao ar é só eu remover as linhas que ele aparece ?

Rickson Jordan disse...

Cara fiz tudo oque vc mandou mas não da certo porque eu tenho um monte de paginas e eu quero no (Início) mas não da certo porque volta para a imagem!Quando coloco o endereço de uma pagina ai>clika na imagem e vai para a pagina, mas quando vou pro inicio não aparece as postagens que eu fiz e sim volta para imagem!Espero que poça me ajuda o endereço do meu blog pra você ver é:
http://youtubedamoda.blogspot.com

Mateus disse...

EU SEI QUE NÃO VEM AO CASO DO POST mas queria saber como colocar uma caixa igual a desse site:
http://xmemes.blogspot.com/
se Não souber de qual caixa estou falando:
http://imageshack.us/photo/my-images/638/imagemdlu.png/

Fabiano Roberto disse...

@Izaque para voltar o blog ao normal é só apagar essas linhas que falamos no tutorial e pronto

Fabiano Roberto disse...

@Rickson Jordan mas é essa a função da pagina de abertura substituir a pagina inicial do blog.

não tem como usar esse código e mostrar a pagina inicial com as postagens ao mesmo tempo.

Fabiano Roberto disse...

Mateus

aqui tem um código: Como fazer Apresentação de Slides com Banners

mas não é exatamente igual ao exemplo que falou.

estou testando alguns códigos daquele tipo mas todos que achei deu erro em algum navegador ou template por isso ainda não publiquei ainda.

Will ← disse...

O meu não deu certo, pois quando click ele só fica na apagina de abertura, me ajuda ai se poder, pq queria q ele fosse pro home.

Joao Vitor Miranda disse...
Este comentário foi removido pelo autor.
Anônimo disse...

como eu faço uma página de abertura para uma página do meu blog? Gostaria que quando clicassem na minha página, antes dela viesse uma página de boas vindas. Como eu fasso?

Fabiano Roberto disse...

@Will ← mas esse código faz a home ser somente a imagem.

não tem como fazer ao clicar na imagem ir para a pagina inicial normal

Fabiano Roberto disse...

Joao Vitor Miranda
tem que usar o link de outra pagina no link da imagem.

veja o meu comentário anterior é basicamente a mesma coisa.


Anônimo
é só usar o código como mostramos no tutorial.

Lucas Vinicius Bertoncelo disse...

Fabiano,o Google Analytics é um serviço pago ?

Fabiano Roberto disse...

Lucas Vinicius Bertoncelo

O Google Analytics é um serviço gratuito que oferece aos utilizadores um máximo de 5 milhões de visualizações de páginas por mês. Se o seu site gerar mais de 5 milhões de visualizações de páginas por mês, necessitará de o ligar a uma conta activa do AdWords de modo a evitar a interrupção do seu serviço do Google Analytics. Actualmente, o Google Analytics define uma conta activa do AdWords como uma conta do AdWords com, pelo menos, uma Campanha activa e em execução, com um orçamento mínimo de $1 por dia (ou quantia equivalente noutras moedas).


http://support.google.com/googleanalytics/bin/answer.py?hl=pt&answer=55476

Anônimo disse...

Interessante mas não resolve o problema já que vai para uma página html e não para o conteúdo da página inicial!

Anônimo disse...

Este recurso é mais interessante para se fazer uma página de manutenção ou de construção do blog. Em vez de colocar a página html coloque o próprio endereço do blog. Fica aí a dica!!!

Fabiano Roberto disse...

Anônimo
vou fazer um tutorial sobre como criar uma pagina mostrado as postagens da pagina inicial

Antonio Pereira (Apon) disse...

Olá Fabiano!

Não seria possível, no lugar da imagem, já abrir a página que escolhemos como inicial? Por exemplo: Se eu criar uma página estática com o nome Home ou Inicial. Não teria como essa página entrar quando o visitante acessa o Blog sem precisar antes a imagem?

Obrigado.

Fabiano Roberto disse...

Antonio Pereira (Apon)
existem códigos de redirecionamento mas não é recomendavel usar, mas veja aqui: Fazer Pagina com Atualizações mais Recentes do Blog

se quiser pode usar o código que tem lá no lugar da imagem assim mostraria somente as postagens recentes na pagina inicial.

Anônimo disse...

Oi Fabiano, eu queria saber qual é o código para colocar um botão nessa pagina de boas vindas, e se clicar nesse botão, ele vai até um questionário, para responder, como você conheceu o blog?, o que achou do blog, etc. desde já agradeço.
P.s.: Não sou muito bom de explicar coisas, e o questionário eu já sei fazer.

Força Jovem Jd. das Industrias disse...

Olá Fabiano,
como eu faço para tirar a pagina de boas vindas?

Fabiano Roberto disse...

Anônimo
é possivel fazer isso mas vai dar um pouco de trabalho.

você pode colocar mais de uma imagem ou mesmo links de texto se quiser neste código da pagina de abertura.

então precisa criar uma pagina com a enquete e usar o link dela na imagem, veja aqui como Criar uma enquete no blog


Força Jovem Jd. das Industrias
tem que achar e retirar os códigos no html do seu blog

:Kingo Habbo disse...

Fabiano Roberto
Como os leitores irão ver as postagens iniciais? Já que a imagem fica no início?

Fabiano Roberto disse...

:Kingo Habbo
veja aqui: Fazer Pagina com Atualizações mais Recentes do Blog

:Kingo Habbo disse...

Muito obrigado Fabiano Roberto, agora sim meu blog está ótimo! :)

@RAFA_PWL8 disse...

MUITO BOM GOSTEI

Mundo Informatica disse...

Olá, Acompanho Esse Blog ah pouco tempo, por que estou criando meu blog de downloads, Queria saber se alguem sabe Um Site que vc coloca em seu blog que da para ver de onde vem as visitas no Seu site, eu ja vi um blog com isso

Fabiano Roberto disse...

Mundo Informatica
você pode usar o google analytics para saber isso e muito mais sobre as visitas do seu blog: Blogger Integra Contador Google Analytics no Painel de Configurações

Portal Habblex disse...

aff estraguei meu blog e nao consegui

Jogos Gratis disse...

Show de bola..... vou usar isso em meu site!!!

Fabiano Roberto disse...

Portal Habblex
tenha calma, apenas tente retirar os códigos que alterou

Ministério Infantil Estrela da Manhã disse...

O codigo da imgem coloca aonde??? No codigo de html ou no Java Script?????

Fabiano Roberto disse...

Ministério Infantil Estrela da Manhã
precisa hospedar a imagem e colocar no código que mostramos no lugar de http://www.google.com/logos/2011/brazil_day-2011-hp.jpg

Airke disse...

pow eu tenho um blog e queria q vcs me mandasse a opniao sobre ele sabe?.....se esta bom, ou ruim, em fim quero tbm divulgar ele aqui se puder, tem filmes, animes, cds, dvds, documentarios

http://www.sotemfilme.blogspot.com

vlw

Fabiano Roberto disse...

Airke
a melhor coisa a fazer é tentar descobrir o que seus visitantes gostam.

quais postagens tem mais visitas? comentarios? foram mais divulgadas em redes sociais ....

SЋikαмαru ADM disse...

eu não entendi onde se coloca as urls no html q postase

Fabiano Roberto disse...

SЋikαмαru ADM
a url é o endereço de uma pagina do seu blog para usar como link na imagem da pagina inicial.

veja aqui Fazer Pagina com Atualizações mais Recentes do Blog

............... disse...

obrigado a 3 anos q procurava isso e serio !

srα. Kαrøł Kαułiŧz Bizαrrє disse...

não entendi!

Projeto Bom de Bola na Escola disse...

NAO ENTENDI ESCOLHER UMA PAGINA DO SEU BLOG NAO ENTENDI MESMO

Fabiano Roberto disse...

Projeto Bom de Bola na Escola
a imagem precisa de link para quando alguém clicar nela, então você pode usar uma postagem do seu blog ou criar uma pagina com as postagens recentes (veja o link no final do tutorial)

..::Kisb::.. disse...

Tutorial muito bom parabéns!! mas tem como deixar o fundo transparente?? se tiver avisa ai por favor. vlw!

Fabiano Roberto disse...

é possivel fazer fundo semi transparente com imagem .png

mas precisa hospedar fora do blogger

Dulce Maria disse...

eu não consegui fazer nada com isso

Fabiano Roberto disse...

veja se colocou os códigos nos lugares certos

CSDA disse...

OHH muito boa essa dica mas tem como colocar duas imagens com links diferente??
tipo:uma para mim poder entrar no site e um para o top 30 mas com outra imagem??
se tive mee avisa,ou mesmo se não tiver!

Fabiano Roberto disse...

CSDA
o trecho que colocamos uma imagem você poderia colocar 2 ou mais imagens.

aquilo é um código html e pode alterar como quiser.

CSDA disse...

ei ela substitui a imagem pq?? tem como mandar o codigo onde posso colocar as duas imagens normais?

CSDA disse...

toda a ves que eu coloco duas ou uma imagem,só mostra a primeira como fasso para mostrar aas duas??

Fabiano Roberto disse...

para duas imagens o código ficaria assim:

<b:if cond='data:blog.homepageUrl == data:blog.url'><center><a href='http://www.dicasparablogs.com.br/p/lista-de-tutoriais.html' title='Bem Vindo ao nosso Site !!!'><img border='0' src='http://www.google.com/logos/2011/brazil_day-2011-hp.jpg'/></a><a href='http://www.dicasparablogs.com.br/p/lista-de-tutoriais.html' title='Bem Vindo ao nosso Site !!!'><img border='0' src='http://www.google.com/logos/2011/brazil_day-2011-hp.jpg'/></a></center><b:else/>


note que o trecho:
<a href='http://www.dicasparablogs.com.br/p/lista-de-tutoriais.html' title='Bem Vindo ao nosso Site !!!'><img border='0' src='http://www.google.com/logos/2011/brazil_day-2011-hp.jpg'/></a>

aparece duas vezes, então é só colocar uma imagem em cada uma delas

CSDA disse...

vlw ^^

Lucas Vinicius Bertoncelo disse...

Fabiano o meu blog tem aquele recado de conteudo adulto...
Então eu teria que desativar ?
Ou vai aparecer o recado 1º e depois a pagina ?

Brigado...

Fabiano Roberto disse...

acho que não tem como desativar o aviso

daniblogger disse...

Olá fabiano, tudo bem?

Eu sempre tive curiosidade de saber como se coloca essas jenalas que fica na lateral do blog, que tem esses botoes do orkut,twitter,facebook,google + etc.

Onde posso encontrar um código para por essa jenela com icones?

abraço

http://infoprodutospararevendabr.blogspot.com.br

Fabiano Roberto disse...

veja aqui o código que utilizamos: Botões das Redes Sociais na Vertical - Compartilhar Posts

Juliane disse...

nao tem como apacer uma imagem como na light box com o botao fechar ?

Juliane disse...

tem como fazer tipo a light box escurecer a pagina aparecer a imagem que eu quero , com o botao fechar

Fabiano Roberto disse...

Juliane
mas está querendo fazer isso com a imagem de abertura do blog com esse código que mostramos?

não tem como mostrar só a imagem e clicar para fechar e aparecer a pagina inicial normal do blog

Fabiano Roberto disse...

seria possivel fazer uma Criar uma Janela de Divulgação no blog

mas isso aparece em todas as paginas, mas se servir tem como fazer aparecer só na pagina inicial usando outro código que publicamos aqui:
Conteúdo diferente nas paginas do blog

.

Postar um comentário