13 julho, 2012

Menu de Barrinhas

105130972522143470_kgr8q7g4_c_large

Hooy pessoal, hoje vou ensinar a fazer um menu muito fofo olha :



Créditos : http://blog-sweetpoison.blogspot.com.br/

 Vá em design > Editar HTML > Tecle F3 e pesquise por :
]]></b:skin>

E acima de ]]></b:skin> cole :

.menu a {
margin-right: 144px;
background: #B3E1CF; /* Cor das caixinhas */
border-left: 6px double #458B74; /* Borda */
font-family: Palatino linotype; /* Fonte */
font-style: italic; /* Estilo da fonte */
text-transform:lowercase; /* Estilo da fonte - uppercase: maísculas e lowercase: minúsculas */
display: block; /* Exibir em bloco */
font-size: 10pt; /* Tamanho da fonte */
color: #fff; /* Cor do texto */
padding: 3px; /* Margem interna */
text-align: left; /* Alinhamente do texto */
margin-bottom: 1px;
}
.menu a:hover {
border-left: 6px solid #458B74; /* Borda em hover */
}

Edite de acordo com o seu gosto e salve. Vá em design > Elementos da Página > Adicionar um gadget HTML/JavaScript e nele cole o seguinte código :

<img src="http://3.bp.blogspot.com/-YlSV4J21M24/T4QmRimCfrI/AAAAAAAADjM/scPg1rDyAAw/s1600/menu.png" align="right" />
<div class="menu">
<a href="URL1">Link 1</a>
<a href="URL 2">Link 2</a>
<a href="URL 3">Link 3</a>
<a href="URL 4">Link 4</a>
<a href="URL 5">Link 5</a>
<a href="URL 6">Link 6</a>
<a href="URL 7">Link 7</a>
</div>

Onde está URL é o link da página, e onde está Link é o nome da página.

Você tem que colocar os 7 links, senão a imagem vai ficar desalinhada.
Na parte negritada é o url da imagem.
Se quiser usar sua própria imagem no lugar da imagem do Sweet Poison, coloque uma de 138x174.
Beijos !!!

7 comentários:

  1. NOSSA , que tuto mara, ainda não tinha visto o tuto, mas já tinha visto o menu e tinha adorado, pena que lá no blog não cabe )):

    aah meu anjo', ~ ja ia esquecendo, eu queria te pedir um favor .. será que você pudia pegar um tempinho e analisar os prêmios do concurso que tá rolando lá no AD ? http://mini-fofoquinhas.blogspot.com.br/2012/07/concurso-com-o-conversando-com-lua.html é rapidinho... PA-PUM, hehehe ^^' , brigadão desde já !!

    ResponderExcluir
  2. Heey Stela!
    Floor amei o tuto mto legal tenho um selinho pra você aquii no meu blog >>>http://fordodeserto.blogspot.com.br/

    ResponderExcluir
  3. Heey Stela ><
    ótimo tutorial , leitora nova u.ú
    Lindo o blog (:
    Se puder entrar e conhecer o blog?
    http://apenassorri-a.blogspot.com.br/
    Bjin :**

    ResponderExcluir
    Respostas
    1. Oi , eu queria saber da gincana, tem como participar começando agora?

      Excluir
  4. Esse tutorial é bastante ultil.
    Ah! :d e se quiser deixar a sua marquinha lá no MFF, ficarei super feliz.Tenho certeza que vai amar!
    ---> Clica? MundoFantásticoFeminino

    ResponderExcluir
  5. Onww, eu acho esse menu supeer lindo! ^^
    Adorei o tutorial ;)

    Seu blog é muito prefeeito, ameei! *-*
    Já estou seguindo :D
    Beijoos ♥
    http://mikicandy.blogspot.com

    ResponderExcluir
  6. Oi tudo bom? NOOOOOOSSA! Adorei o seu blog,ele é muito lindo mesmo e eu fiquei apaixonada,adorei o designe e as postagens? PERFEEITAS ?
    Gostei daqui porque é muito bem organizado,você é uma blogueira carismática e tem muito talento! E você escreve muito bem garota,continue assim que você vai longe,sério..não quero sair do seu blog :\ já fuçei ele todinho,KKKKK’ Adorei mesmo,e o nome,postagem e conteúdo? Incríveis! Eu já seguia aqui,mais nunca tive tento pra te elogiar..é que as vezes passo por aqui e nem comento :\ bom,eu adoraria que seguisse o meu novo blog,pra ajudar sabe? Agradeço! Beijos e como eu disse antes,MENINA..seu BLOG É PERFEITO,amei,amei,amei >< não tenho palavras pra descrever,hahahaha..seu blog é DIVO!!
    http://planetadospngs.blogspot.com.br/

    ResponderExcluir