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

IDFashion 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

CandyReis disse...

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

Esmero da moda (blog oficial) 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

luan 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

Amanda ♡ disse...

aaaaaaaaaaaaaaaa
amei teu blog menina
tô lhe seguindo aqui

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

Amanda ♡ 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

Esmero da moda (blog oficial) 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

♥ღJhessy Carvalho ღ♥ 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