Pedido de Tutorial : Menu no blogger!
sábado, março 30, 2013
Hello amoras e caramelos,
hoje vim com tutorial
pedido nos comentários, o tutorial de hoje será de como ter um MENU
personalizado no blogger e como inserir as páginas feitas no Menu.
Como podem ver abaixo
o pedido da leitora “Brenda Britto” foi bem extenso (hahahaha) então
farei algo do que ela pediu por dia para não se tornar cansativo as postagens.
Clique em MAIS
INFORMAÇÕES para ler a
postagem completa!
Ela pede nesse comentário
o seguinte :
þ
Como faz
as os desenhos que aparecem no final do blogger
þ
Como criar
um Menu
þ
Como
colocar as páginas no Menu
þ
Como
inserir regras para comentar
Primeiramente sobre a
parte dos desenhos
e escritas no final do blogger isso são Brushes depois farei uma postagem sobre as
utilidades dos brushes e como fazer uma imagem com eles, Porém esses não foi eu
quem fez...Já vieram inclusos no template do blog ou seja quando baixei o
template ele já veio com as imagens no HTML logo eu só fiz algumas alterações
para se adequar ao meu estilo.
Porém vamos aos
primeiros pontos que poderei ensinar :
COMO FAZER MENU:
1º) Irei ensinar como fazer as páginas para
colocar no seu MENU para que você possa inserir o que você quiser, mas para que
serve as páginas no blog? Bem as páginas servem para você criar algo fixo em
vez de criar postagens que logo saem da página principal, com as páginas você
pode sempre ter aquele determinado assunto como um “algo mais” podendo a
alterar para o assunto que você quiser.
Para criar a página
faça o seguinte (click nas imagens para ampliar) :
·
Vá para o
painel do seu blogger e click em “Páginas” como mostra a imagem abaixo:
·
Click em “Nova Página”
e em seguida em “Páginas
em Branco” confira o exemplo abaixo:
·
Confira a
imagem abaixo para saber detalhes de cada função.
·
Por fim após
configurar e colocar o que deseja basta clicar em “PUBLICAR” e a sua página
aparecerá como vocês poderão observar na imagem abaixo:
·
Se a opção
“MOSTRAR PÁGINA
COMO” estiver configurada como “Não mostrar” suas páginas não
aparecerão e você poderá apenas clicar em “VISUALIZAR” para pegar os links de cada página
para integrar no seu MENU. Como poderão ver na imagem abaixo:
PRONTO!!! Página feita, se quiser criar mais páginas para o seu menu basta seguir o mesmo processo e pegar os links de cada página usando o “Visualizar” em baixo da página pronta.
INSERINDO AS PÁGINAS NO MENU:
2º)
Agora vou ensinar como fazer um tipo de MENU que eu ainda não vi ensinando em
outros bloggers é bem simples e explicarei passo a passo...Outro dia ensino
como fazer outros tipos de Menu desses que outros bloggers já usam com mais frequência.
Ÿ
Para o
Menu comum eu recomendo o site “FlashVortex” além de diversos menus que você
poderá alterar para o estilo que você quiser nesse site você também encontrará
Botões interativos, banners interativos, relógios e textos para enfeitar seu
blog.
Ÿ
Para usar
o FlashVortex para fazer seu menu basta clicar em menu como na imagem abaixo:
Ÿ
Em seguida
você encontrará várias opções para MENUS, escolha a que mais te agrada e click
como na imagem abaixo:
Ÿ
Em seguida
aparecerá a página para edição do seu MENU para o estilo que você quiser...Vamos
a observação de cada ponto:
þ
Buttons' labels
: Essa é a parte onde você
colocará o título das suas páginas .
þ
Links : Nessa opção você deve colocar o Link para
onde os títulos que você colocou na opção “Buttons' labels” vão levar ,
lembre-se de colocar exatamente na ordem para que não coloque Título com link
de outra coisa.
þ
As próximas
opções são para você escolher cor e estilo do seu MENU
þ
Background color
: No finalzinho da página
você encontrará esta opção e significa que é a opção que ficará como cor de
fundo do seu MENU nesse blog a opção para que fique transparente é apenas para
as pessoas que tem conta premium no blogger então teremos que nos virar
escolhendo uma cor que seja idêntica ao do nosso blogger e como faremos?
þ
Coloque o
link do seu blog click em GET e eles identificarão as cores que seu
blogger tem então escolha a cor do lugar onde você colocará seu MENU como na
imagem abaixo e copie:
þ
Volte para
o FlashVortex
onde está seu menu e onde estiver Background color coloque a cor que você
escolheu para dar a impressão de transparente, confira a imagem abaixo:
þ
Após todas
as configurações prontas basta apenas clicar em
GERATE
ANIMATION como podem ver
na imagem abaixo:
Agora vamos colocar no blogger
v
Copie todo esse código que você confere na imagem abaixo:
v
Vá para
seu blogger Click em:
Ÿ
Layout
Ÿ
Adicionar
um Gadget
Ÿ
Escolha a
opção HTML/Javascript e cole o código que você copiou do FlashVortex
Ÿ
Click em
Salvar .
OBS:
Para tirar
as propagandas do MENU basta modificar o quarto número de trás para
frente do código, você vai diminuindo até desaparecer, na imagem abaixo o
numero é 40 então mudou para 49, 48,47...até desaparecer totalmente!!!
Pronto bonbons é simples e acho ele interessante, resolvi ensinar esse porque ainda não tinha visto em outros bloggers e fica de certa forma diferente da maioria, fora que é bem fácil e você não meche no HTML fonte do seu blog apenas nos gadgets encontrados no seu layout...Depois farei um tutorial de como inserir outros tipos de MENU pois essa postagem ficou GIGANTE.
O que acharam? Espero que tenham gostado fiz
com muito carinho ...A leitora que pediu amanhã postarei outro tutorial do que você
me pede no seu comentário. Beijocas!!!
91 comentários
Adorei o post flor! Bem Interessante aprendi muitas coisas ! Beijão :D
ResponderExcluirQue bom flor fico muito feliz que tenha lhe sido útil :D
ExcluirBeijinhos e volte sempre!
Que post útil, adorei!
ResponderExcluirwww.espacegirl.com
Que bom flor *-* amo quando minhas postagens são úteis :)
ExcluirBeijinhos e volte sempre!
Gostei muito do tutorial (:
ResponderExcluirSorriso-Jovem sempre com bons posts!
Beijos *u*
http://perturbacoesdeumadolescente.blogspot.pt/
Ounw Obrigada querido *-* fico muito feliz que tenha gostado.
ExcluirBeijinhos e volte sempre!!!
Esse menu da Vortex é bem legal.. pena que tem anuncios..
ResponderExcluirEstuda Jovem! Que tal dedicar um pouco para se preparar para o futuro e os estudos? www.estudajovem.com.br
Oi querido os anúncios podem ser retirados hahaha vou até colocar isso ...
ExcluirBeijos e obrigada por comentar :D
Gostei do tutorial, mas nem mexo na formatação, não me entendo com html nem por tutorial,
ResponderExcluirhttp://iasmincruz.blogspot.com.br/
Que bom que gostou flor...Esse tutorial é apenas para mexe no Gadget ... Não meche na parte de HTML geral não :)
ExcluirBeijos e volte sempre!!!
Obrigada linda, de coração!!! <33333
ResponderExcluirQueria muuuito inserir as páginas feitas no menu, mas sou do wordpress e não vai de jeito nenhum =/
Boa páscoa!!!
Que bom que gostou flor *-*
ExcluirVolte sempre e Boa Páscoa :D
Beijinhos!!!
Adorei, muuuuito útil esse tuto hawehawehawe
ResponderExcluirQue bom que gostou flor *-* fico muito feliz...Obrigada pela visita...
ExcluirBeijos e volte sempre!!!
Ficou mt legal o tuto flor! parabéns.
ResponderExcluirwww.mundogarota.com
Onw que bom que gostou linda *-* obrigada pelo comentário e volte sempre!!!
ExcluirBeijinhos!!!
Claro flor passo lá sim e obrigada pela sua visita...
ResponderExcluirBeijinhos e volte sempre!!!
Gostei de sua postagem.
ResponderExcluirBem explicadinha.
Bjo e boa Páscoa.
filhadejose.blogspot.com
Ana Virgínia
Obrigada flor *u* Fico feliz com sua visita comentário e por ter gostado.
ExcluirBeijocas e volte sempre querida!!!
Oi oi oi.. eu queria saber como você colocou a setinha para subir no seu blog. Obrigado!
ResponderExcluirOi querido preparei um post para você :)
ExcluirEspero que goste...Beijocas e volte sempre!!!
Muito bom o post! =)
ResponderExcluirminhas-confissoes-2012.blogspot.com
Que bom que gostou flor ^.^ Fico muito feliz :3
ExcluirBeijocas e volte sempre guria :*
Oie gatona, amei seu blog, gostei muito de seu tamplete como faço para ter um no meu blog com o tema beleza?
ResponderExcluirVisite o meu blog ele fala sobre a beleza feminina.
www.mulhercolor.blogspot.com.br
Oi querida fico muito feliz ^^ olha é só você procurar por layout ou template ai você pode encomendar em algum site ou então pesquisar por Layout Free ou Template ree que são os grátis que você acha na internet ... Tem vários sites com temas legais é só procurar ^^ em breve arei um tutorial pra você .
ExcluirBeijocas e volte sempre!
Oi adorei seu blog. Mas quero saber como colocar colocar testes no blog, para que as pessoas possam responder e ver resultado. Adoraria se me ensinasse. Obrigadooo.
ResponderExcluirFarei tutorial :)
ExcluirObrigada por sua visita...Beijocas e volte sempre flor.
Oie Hilda, gostaria de saber se tem como colocar mais de um link no mesmo título no caso, vários posts no mesmo titulo no menu. Obrigada! O seu tutorial está otimo. beijos
ResponderExcluirOi querida tem sim lá no site tem essa opção :)
ExcluirObrigada por sua visita...Beijocas e volte sempre!
GATINHA OBRIGADA, Você não faz idéia do quanto eu ralei vendo mil videos complicados sobre o assunto, e não conseguia colocar o meu querido menu. Te convido em breve pois agora estou construindo meu blog a dar uma olhadinha também. Abraços sinceros que Deus te abençoe.
ResponderExcluirQue bom que ajudou querida, fico muito feliz que meus tutoriais estejam agradando :D Obrigada por sua visita...Beijocas e volte sempre!
ExcluirAssim que seu blog estiver pronto deixe seu link aqui que visitarei com prazer :3
como você fez pra essas estrelinhas ficar aparecendo quando mexe o mouse queria um igual pro meu blog me ajuda???
ResponderExcluirOieh Laura eu já fiz um tutorial explicando isso, você pode vê-lo aqui:
Excluirhttp://sorriso-jovem.blogspot.com.br/2013/03/colocando-efeito-brilhinho-no-cursor-do.html
Beijocas e volte sempre!
eu queria colocar um menu assim como seu, não queria entrar pelo vortex, como eu posso coloca-lo?
ResponderExcluirOieh :) peguei seu pedido de tutorial, em breve posto aqui outros modelos de menu :)
ExcluirObrigada por sua visita ^^ Beijocas e volte sempre!
Caramba, você me ajudou muitoooooo kkkkkkk já estava a um tempão tentando colocar no meu blog e só com a sua ajuda que deu certo... Muito obrigada : ))
ResponderExcluirFico realmente feliz que tenha conseguido *-*
ExcluirObrigada por sua visita querida...Beijocas e volte sempre!
Olá, achei incrível seu blog. tenho muito o que aprender, mas faço um pedido simples visite meu blog http://colinasdoiran.blogspot.com.br/, é um blog de viajem para o Irã. confira, e comente, grato.
ResponderExcluirOlá fico muito feliz que tenha apreciado meu blog :D claro visitarei o seu blog com prazer.
ExcluirObrigada por sua visita...
Beijocas e volte sempre que puder!
Oi!! Esse seu tutorial é um dos melhores que tem na internet! Eu queria te perguntar como que eu faço pra deixar esse menu um pouco mais largo. Ele ficou tão pequenininho e no meio. Você sabe? Obrigado!!!!
ResponderExcluirOlá Derek :) muito obrigada por pensar assim...Fico muito agradecida!!!
ExcluirÉ só você alterar os tamanhos da largura (width) e altura (height) clicando em editar...Depois é só salvar e pronto :)
Espero ter ajudado ...Obrigada por sua visita...Beijocas e volte sempre que puder!
Não sei o que acontece, mas quando clico em adicionar gadget não aparece a opção html/java script :(
ResponderExcluirOlá Cíntia tenta descer a barra de rolagem que aparece ao você clicar na opção "ADICIONAR UM GADGET" estará próximo da opção "PESQUISA" :)
ExcluirCaso mesmo assim fique em branco tente mudar seu navegador, e se MESMO ASSIM não pegar pode ser algum BUG do BLOGGER que logo logo se resolverá :)
Obrigada por sua visita querida.
Beijocas e volte sempre !
Como faço para colocar o menu na horizontal?
ResponderExcluirOi querida ^^ é só seguir o mesmo processo! No site tem a opção de modelo ai é só você escolher para um modelo que se encontra na Horizontal e na hora de colocar no blog escolha o GADGET que estiver mais próximo do seu banner :3
ExcluirEspero ter ajudado...
Obrigada por sua visita querida. Beijocas e volte sempre! :3
como vc coloca esses brilinhos ??
ResponderExcluirOi ^^ tem no menu "GOODIES" vários tutoriais...Você pode encontrar esse e muitos outros lá :D
ExcluirObrigada por sua visita...Beijocas e volte sempre :3
eu segui todos os passos mais não xta ajustado me ajuda vai....
ResponderExcluirOlá Claudio, desculpe te responder somente agora, o blog passou por um período de hiatus e somente agora voltou. Olha tenta ajustar os valores numéricos no HTML. Espero que tenha conseguido. Que você possa vir mais vezes.
ExcluirAmeii
ResponderExcluircoloquei o de diamantes :P
vc poderia fazer um tutorial de como fazer um layout ou um pra mim??
Oi Valéria! Obrigada por comentar, sinto muito pela demora em te responder. O blog estava parado e aos poucos estou retornando com ele. Fico muito feliz que tenha gostado do post e que ele lhe tenha sido útil. Sobre sua dúvida, eu não faço layouts :( o meu rosa, inclusive é FREE. Eu apenas baixo e modifico ele para que fique com meu estilo. Mas todas as ferramentas que uso para modificação estão aqui na área de GOODIES ou de TUTORIAIS. Espero ter te ajudado. Que voce^possa vir mais vezes por aqui :*
ExcluirOOiE ,(Funciono) Obrigada Mesmo Vc ensino direitinho,Acompanhei e Deu Tudo Certinho, Soque Eu tenho uma duvida ,Eu queria saber como fazer para tirar o simbolo do blogger e colocar igual o seu Mais Tipo colocar outro simbolo ...Responde por E-mail : helen_s.a.p@hotmail.com <- Desde ja agradeço!
ResponderExcluirOi Helen, que bom que conseguiu e que o tutorial foi útil para você. Desculpe pela demora em te responder, o blog passou por um período de hiatus e só voltou agora. Sobre sua dúvida, você está falando sobre o favicon? Fiz um tutorial explicando como modificar.
Excluirhttps://sorriso-jovem.blogspot.com.br/2013/04/como-colocar-icone-representando-seu.html
Espero que eu tenha ajudado e que você possa vir mais vezes me visitar :3
Hilda, não conseguir tirar a propaganda....não entendi como diminuir o numero...você deu o exemplo do número 40. Obrigada. Lívia
ResponderExcluirOi lívia, tem que modificar o quarto número de trás pra frente. Dei o exemplo do número 40 porque é o número que apareceu pra mim no exemplo, mas no seu pode aparecer outro número, não necessariamente o 40 pode ser outro número. Tente outra vez, com calma que você conseguirá. Espero que possa vir mais vezes. Desculpe te responder somente agora, o blog seu uma longa pausa e só retornei com ele agora :3
ExcluirRealmente muito bom...
ResponderExcluirhttp://downloadsprado.blogspot.com.br/
Oi Thiago, obrigada por sua visita... :) Espero te ver mais vezes por aqui, fico feliz que o post tenha sido útil para você. Tentei visitar o seu blog, mas consta como não encontrado :( espero que não tenha parado.
Excluiroi, eu nao entendi direito como faz pra tirar a propaganda ,eu tenho que apagar o quarto numero ?
ResponderExcluirOi Selina, obrigada por comentar e por sua visita. Desculpe pela demora em te responder, o blog estava parado e só retornei com ele agora. Sobre a sua dúvida, se você apagar o 4º número de trás pra frente, seu código ficará incompleto e não funcionará, por isso a sugestão é que apenas vá diminuindo até a propaganda desaparecer totalmente então você diminui e salva, e vai fazendo isso até a propaganda desaparecer completamente. Espero ter ajudado e que você possa me visitar outras vezes :)
ExcluirSerá que vc pode me ajuda a personaliza o meu blog por que eu nao to conseguindo botar o curso e nem o menu
ResponderExcluirOi Amanda, eu não personalizo os blogs eu apenas faço os tutoriais que uso no meu para ajudar quem não consegue. Espero que compreenda. Desculpe pela demora em te responder, o blog passou por uma fase de hiatus e só retornou agora. Espero que tenha conseguido arrumar o seu e que possa me visitar mais vezes. Ensino vários tutoriais aqui basta procura-los nos menús.
Excluirpor favor me ajuda deu um problema no meu blog quando eu fui fazer o menu
ResponderExcluirOi Amanda, se basta deletar o gadget caso não tenha funcionado e tentar outra vez. Salve as edições feitas. Espero que tenha conseguido :)
ExcluirAmeiiii muito seu blog, ele realmente é perfeito. Bom eu queria pedir um tutorial de como faz essa setinha que vc fez no seu blog. Beijinhos
ResponderExcluirOlá!!! Fico feliz que tenha gostado do blog *-* obrigada por seu comentário e visita. Sinto muito pela demora em te responder, o blog estava pausado mas já está retornando a atividade. Sobre sua dúvida, fiz dois tutoriais sobre cursores:
Excluirhttps://sorriso-jovem.blogspot.com.br/2013/04/tutorial-colocando-cursor-personalizado.html
https://sorriso-jovem.blogspot.com.br/2013/03/colocando-efeito-brilhinho-no-cursor-do.html
Espero que seja útil ^-^ obrigada por sua visita, espero que eu possa te ver mais vezes por aqui :3
Olá Hilda, parabéns pelo blog!!!
ResponderExcluirTira uma dúvida por favou? Eu já consegui criar um menu horizontal de páginas para o blogger mas não consigo centralizar os links, ele sempre ficam alinhado a esquerda. Você sabe como resolver isso? Também não sei como excluir as divisórias.
Aguardo respostas. Abraços!!! =)
Oi Fábio, desculpe pela demora em te responder, o blog estava em hiatus e só retornou agora...Eu acho que pode ser um BUG do seu template. Espero que tenha conseguido. Que você possa me visitar mais vezes :)
ExcluirAjudou bastante! Obrigada =)
ResponderExcluirhttp://tamiresreginas.blogspot.com.br/
Fico feliz que tenha ajudado Tamires, desculpe pela demora em te responder o blog passou por um período de hiatus e só agora voltou. Obrigada por sua visita e comentário, espero te ver outras vezes por aqui. Tentei visitar seu blog mas não o encontrei. Espero que não tenha parado :(
ExcluirOlá eu tenho um template que veio com barrinhas de menu só que não consigo encontrar no html do modelo para inserir os links das paginas. como faço com esses modelos que já vem pronto?
ResponderExcluirOlá Jô você precisa adicionar as páginas, fiz um tutorial de menu, mas ele explica sobre adicionar páginas em menus. Observe neste link que poderá ser útil :
Excluirhttps://sorriso-jovem.blogspot.com.br/2013/03/pedido-de-tutorial-menu-no-blogger.html
Desculpe pela demora em te responder, o blog deu uma pausa e só retornou agora. Espero ter ajudado e que você possa vir me visitar mais vezes. :3
Muito útil o post, estava procurando como colocar e encontrei bem explicado aqui no blog.
ResponderExcluirhttp://www.turmajovem.com.br
Olá Jamilson, obrigada por comentar, fico feliz que o post tenha sido útil para você ^_^ desculpe pela demora em te responder, o blog passou por um período de hiatus, mas já está voltando a ativa. Visitei seu blog mas não o encontrei :/ . Espero te ver por aqui mais vezes, sempre que puder deixe seu comentário. :)
ExcluirAmor não consigo fazer pelo celular
ResponderExcluirOlá Sarah, acho que é mais complicado pelo celular. Obrigada pelo comentário, espero te ver por aqui mais vezes. Desculpe a demora o blog passou por uma looonga pausa mas já está voltando a atividade. :)
ExcluirMeu blog ficou um arraso!
ResponderExcluirAcessa lá:
omundosecretodamoda.blogspost.com.br
Olá Camila, fico feliz que tenha aproveitado o tutorial :) espero te ver por aqui mais vezes. Desculpe pela demora em te responder, o blog passou por uma pausa mas já está voltando. Tentei procurar o seu site mas não o encontrei :( espero que não tenha parado de blogar. :)
ExcluirAdoreii a postagem , so que quando eu vou clikar em CRIAR PAGINA não aparece pagina em branco o que pode ser??
ResponderExcluirOlá Andreia, pode ser algum BUG. Espero que você tenha conseguido. Desculpe pela demora em responder o seu comentário; O blog estava em hiatus mas já voltou. Espero te ver por aqui mais vezes. :3
ExcluirOi, adorei seu post, e fiz e deu certinho, mas eu queria saber como faço para publicar em certo menu, aguardo sua resposta, bjoo :)
ResponderExcluirOi Amanda, desculpe a demora em te responder o blog passou por uma pausa mas já está retornando. Como assim? Eu não entendi bem a sua pergunta :( Espero te ver por aqui mais vezes.
ExcluirOla eu queria te pedir um tutor de como eu posso fazer um layout tão bonito como o seu e como eu posso colocar a data personalizada igual a sua se não poder fazer as duas em uma postagem só pode fazer uma de cada vez pode divulgar o meu blog
ResponderExcluirObrigado flor...
http://queenofstyles.blogspot.com.br/
Oi Mel, esse layout eu não criei, eu apenas editei para ficar adequado aos meus gostos. Desculpe pela demora em te responder, o blog passou por uma looonga pausa mas já está voltando as atividades. Espero te ver por aqui mais vezes :3 visitei seu blog mas não o encontrei :/ espero que não tenha parado de postar. :)
Excluirmuito bom parabéns.sucesso querida.
ResponderExcluirOi Vanessa! Obrigada por comentar, fico muito feliz com seu comentário! Desculpe pela demora em te responder, o blog estava passando por uma fase de hiatus mas já está voltando. Espero te ver por aqui mais vezes ;3
ExcluirOi fiz meu blog hoje e segui o tutorial acima... porém quando clica no ícone onde coloquei o site fala que a página a não existo no blog... O que faço?
ResponderExcluirAs vezes você pode ter deixado a página oculta. Tente novamente caso não tenha conseguido. Obrigada por seu comentário Everton e desculpe pela demora, o blog estava parado devido a um hiatus, mas já está voltando. Espero que possa vir mais vezes. :3
ExcluirMuito bom o tuto, amei.
ResponderExcluirmythings2.blogspot.com
Olá Cris, obrigada por comentar, fico muito feliz que os tutoriais tem agradado! Espero te ver mais vezes por aqui. Sinto muito pela demora em te responder, o blog deu uma longa pausa, mas já está de volta! Darei uma passada no seu blog :3
Excluirola eu gostaria de perguntar se vc faz capas para blog ? Bem eu sou nova nesse mundo e não entendo muito ,será que você poderia ensinar ou vazer uma para mim?
ResponderExcluirOlá Thamy, desculpe pela demora em te responder, o blog deu uma pausa beeeeeeeem longa mas já está retornando. Infelizmente não tenho como fazer um banner para você, mas existem alguns programas bons como Photoshop e Photoscape (esse é mais fácil) e você pode fazer em PNG (imágem com um fundo transparente). Espero ter te ajudado. Que você possa vir mais vezes. :3
Excluir~REGRAS PARA COMENTAR~
-Não desrespeite ninguém.
-Não xingue ou use palavras de baixo calão.
-Sempre que puder comente é uma forma de incentivar a trazer sempre novidades.