03 janeiro 2012

Menu horizontal com efeito


Oi amores,faz um tempinho que não posto um tutorial aqui né?!
Então,hoje ensinarei a como fazer esse menu que tem aqui no blog :) .

                   Então vamos ao tutorial :
                  
Vá em Design-Editar Html , e marque a caixinha ''expandir modelos de widgets''  ,de Ctrl+f ,e ira aparecer uma caixinha de busca ,então pesquise nela por:

                                                              body { 

   E cole o código a seguir abaixo de  background: $(body.background); :

un {
font-family: Tahoma; /* Fonte do Menu */
width: 25%; /* Tamanho do Menu */
float: left;
background:#C6D3E3; /* Cor do fundo do Menu */
padding: 5px;
text-align: center; margin: 2px;
-moz-border-radius: 03px;
-webkit-border-radius: 30px 0px 30px 0px;
font-size: 08pt; /* Tamanho da fonte */
color: #fff; /* Cor da fonte */
}

un:hover {
font-family: Tahoma; /* Fonte do Menu quando passa o mouse */
width: 25%; /* Tamanho do Menu quando passa o mouse */
float: left;
background:#7897BC; /* Cor do fundo do Menu quando passa o mouse */
padding: 5px;
text-align: center;
margin: 2px;
-moz-border-radius: 03px;
-webkit-border-radius: 0px 30px 0px 30px;
font-size: 08pt; /* Tamanho da fonte do Menu quando passa o mouse */
color: #fff; /* Cor da fonte do Menu quando passa o mouse */
}

  E faça as alterações desejadas.

                                VISUALIZE,e se estiver tudo certo salve.

    Agora vá em elementos da página e adicione o gadget  HTML/Javascript , e no gadget cole o código abaixo:

           <a href="Link aqui"><un>Nome Aqui</un></a>

 Aonde esta escrito ''Link aqui'' você coloca o link da página, e aonde esta ''Nome aqui''você coloca o nome da página.
    Lembre-se que cada página que for colocar no seu menu,você tem que colocar o código acima.

E salve.

(Lembrando que vi esse tutorial onde ensina a fazer essa menu no blog  Todas as pequenas coisas)

Bom,é isso aí amores,espero que tenham gostado :) Bjs!!




Aviso: Pessoal,vou viajar amanhã (05/01) e só volto dia 16,então voltarei a postar aqui no blog só dia 16 OK?!
Como os comentários  aqui no blog são moderados antes de serem publicados  vai demorar um pouquinho para mim publicar eles,Bjs, e fiquem com Deus!

24 comentários:

Júlia disse...

Afiliação? Mas é claro!! Quando vc colocar minha imagem de afiliação aqui (tá na minha sidebar) me avisa por comentário, aí se você não tiver, eu faço uma e coloco, ok?

Bjs
makes-da-julia.blogspot.com

Bruna e Amanda disse...

Obg*-* seu blog esta mt lindo e as postagens sem palavras beijos te adoro paty

Anônimo disse...

Que gatinho lindo!

Beijooos
Siga o blog, assim vc pode participar dos sorteios!!!
www.idfashion.com.br
@blogidfashion

Trickster disse...

Aiw amo o MAGIC e ameiii o tutu super cut

Blog da Nah disse...

Gostei muito do seu blog! Visita o meu! http://nataliamedice.blogspot.com

Anônimo disse...

Ah brigada minha linda *-* fico feliz que goste do meu blog♥

Anônimo disse...

Oi Patricia, tudo bem?
Achei seu blog d+!!!!!!
Já estou seguindo o magic, você poderia seguir o meu:
www.esmerodamoda.blogspot.com
bjs
Segue-lá!!!!!!!!!!

Ana Carolina ∞ disse...

Seu blog é lindo, adorei! E o tutorial super útil, vou tentar usar no próximo lay...

Beijos,
http://bloggarotainocente.blogspot.com/

Sweet Girl disse...

Ainw que fofinho o efeito :P ameiiiiiiiiiiiiiiiiiiii
bjus sweet Girl

HTTP://PRAIA234.BLOGSPOT.COM

Anônimo disse...

Seu blog é lindo, e eu acho que eu já sigo :) Muito legal aqui! Adorei os posts e o design.

Beijos, Luan - www.fofocasda-web.blogspot.com

Nicolly Ferreira disse...

ooi seguii segue de voltaa ???
http://fashiongirls-blogspot.blogspot.com/
gente que ta lendo meu comentariio
Por favor segue meu blog se seguirem deixe um comentario eu sigo de volta
poor favor meu blog vai fazer um ano e só to com nove seguidores por favor

Bruna disse...

Adoreeei *-* rs :)
seguindo aqui fofa, seus posts sao mt bem elaborados :) rs
sempre vou vir comentar aqui rsrs *-* <<3
ah, tem post novo la no meu blog, passa lá e comenta?
ah, segue dvlta?

bjs e brigada! rsrs
bnascimentooo.net.tc

Kawanny Arruda disse...

Adorei este tutorial. Seu blog é lindo e você é uma fofa *-* Estou seguindo aqui, quando puder passa lá, Beijoos'
http://wwwgertiegirlcom.blogspot.com/

- maari disse...

Amei o tutorial *-*
E o blog também, parabéns, tá lindo demais !


beijos,
http://girliethingspt.blogspot.com/

Sabrina Machado - Mundo da Moda disse...

Olá flor, amei o tuto, bem explicadinho, heheh ^^ to seguindo aqui, adorei seu blog, ficaria muito feliz se retribuísse no meu tb, se tiver um tempinho dá uma passadinha lá e me diz o que achou, se gostar e se identificar, siga, que fico muuito grata, sua opinião é muito importante para mim, viu? ahh, estou realizando um sorteio Mara em parceria com a thipos perfumes, o prêmio é um perfume a escolha da ganhadora, e o melhor: são colonias similares a fragrâncias importadas, não é demais? espero você lá!


Blog Mundo da Moda | Sorteio Thipos perfumes

kisses♥

AndreessaFigueiredo' disse...

OH MY GOOD , que blog super fofo, amei aqui flõr, parabéns pelos posts ! Seguuiindo ... Bêezos Andressa 8infinitoamor.blogspot.com

Blog Vous disse...

Lindo o Blog Parabens ;D
Segue//Retribuo
http://blogvous.blogspot.com/

Carol disse...

Oii flor,linda, você poderia votar em mim nos links a seguir? É mto importante pra mim e vc ainda ganha um selinhho! *-* Bjus!

www.perfeitinha-blog.blogspot.com
www.isjackiezzdream.blogspot.com/2010/01/quem-merece-ganhar-o-concurso-jackie.html

www.meujeitoblog.blogspot.com

Anônimo disse...

aaaaaaaaaaaaaaaa
amei teu blog menina
tô lhe seguindo aqui

http://blog-moderninho.blogspot.com/

Anônimo disse...

aaaaaaaaaaaaaaaaaaaaaaa
amei teu blog garoota
parabeeeeeeeeeens

http://blog-moderninho.blogspot.com

SEGUIND""

Sweet Girl disse...

Você é realmente bom em achar erro?

veja se sim ou se não tentando achar o erro é apenas Um, ganha divulgação
e+cabeçalho

http://praia234.blogspot.com/2012/01/jogo-dos-7-erros.html

Anônimo disse...

Paty já estou seguindo, mas deu erro porque você não está aparecendo como seguidora, tenta de novo, porfavor!!!
bjs
www.esmerodamoda.blogspot.com

Bruna disse...

Adooooro esse tuto =D shuahsa.
Sempre que puder venho comentar aqui <3
Ótima quarta p/ vc :)

Beijos,
http://bnascimentooo.net.tc

Anônimo disse...

rsr obg flor mas lindo é o teu blog (; eu gostei do tutorial vou usar la no meu blog (; flor eu ja te sigo a um tempo eu era do blog nwe girl (http://blognew-girl.blogspot.com/) so que hackearam ele e agora to com chamando atenção (http://chamando-atencao.blogspot.com/) bjs