quinta-feira, 15 de novembro de 2012

Olá! Hoje lhes trouxe um tutorial para a criação de um menu interessante, que vai fazer com que seu blog tenha "cara de PC". Isso porque nesse tutorial, encontrado no Vagabundia, faremos um menu com estilo de dock.
Ficará igual ao deste dock de cupcakes que uso em meu computador (na parte superior da imagem), para XWidget:
Faça o download do dock para PC aqui
Caso ainda não conheça o XWidget leia estes posts aqui e aqui.
Só que nesse tutorial será feito com HTML para blog, ou seja, precisaremos apenas das imagens ^-^ E o melhor: tudo será feito em 3 passos! Lembrando que pode não funcionar em alguns modelos do Blogger, portanto faça em um blog de testes.
Vamos começar?
1. Acima de </head> cole este script:
<script src='http://kawaiiicode.github.io/dockmenu.js' type='text/javascript'/>
2. Acima de  ]]></b:skin> cole este código:
#dock {
    position: relative;
    text-align: center;
    width: 100%;
    border-bottom: 20px solid #fcc;
  }
  #dock a, #dock a:visited { text-decoration: none; }
  #dock img { border: none; width: 0px; }
  #legend {
    color: #fcc;
    font-size: 24px;
    font-family: 'Lobster Two', cursive;
    text-shadow: 1px 2px 3px #fff;
    text-align: center;
    width: 100%;
  }
As áreas destacadas em vermelho são as que deverão ser editadas basicamente; em border-bottom: 20px solid #fcc; significa que o menu terá uma borda abaixo, para ficar tipo um dock mesmo, com espessura 20 ou outro valor que preferir, com código na cor rosa. Width é a largura do menu.
O restante se refere ao texto que vai aparecer quando passar o mouse em cada imagem. Se quiser usar a fonte Lobster Two, tem que colar isso aqui antes de </head>, conforme mostrei nesse tutorial para usar fontes diferentes no blog:
<link href='http://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
Caso deseje que seu menu apareça como no PC mesmo, por exemplo, na parte inferior do blog, use esse CSS acima de ]]></b:skin>:
#dock {
    position: fixed;
    bottom: 0px;
    left: 0px;
   z-index: 100;
    text-align: center;
    width: 100%;
    border-bottom: 10px solid #fcc;
  }
  #dock a, #dock a:visited { text-decoration: none; }
  #dock img { border: none; width: 0px; }
  #legend {
    color: #fcc;
    font-size: 24px;
    font-family: 'Lobster Two', cursive;
    text-shadow: 1px 2px 3px #fff;
    text-align: center;
    width: 100%;
  }

Edite como preferir. Visualize e se nada der errado, salve. Ainda não vai aparecer nada diferente.

3. Cole o código abaixo onde desejar que o menu apareça:
<div id="dock">
  <a href="URL1" target="_blank"><img src="http://3.bp.blogspot.com/-Ci_g2pErU1Q/UKUcTe5s_jI/AAAAAAAAGy8/30IK93ngHOA/s1600/1.png" lang="LEGENDA1"></a>
  <a href="URL2" target="_blank"><img src="http://3.bp.blogspot.com/-ndfiyUpZAhw/UKUcVArdthI/AAAAAAAAGzE/kUGKMxiZzvk/s1600/2.png" lang="LEGENDA2"></a>
  <a href="URL3" target="_blank"><img src="http://2.bp.blogspot.com/-XHGUaHwbOVQ/UKUeC7gxqVI/AAAAAAAAGzk/tzJRGhaTqDg/s1600/3.png" lang="LEGENDA3"></a>
  <a href="URL4" target="_blank"><img src="http://1.bp.blogspot.com/-GZTkNWdPJLU/UKUcuskFGVI/AAAAAAAAGzM/N7-TlmnElbA/s1600/4.png" lang="LEGENDA4"></a>
  <a href="URL5" target="_blank"><img src="http://1.bp.blogspot.com/-lKtByhBdNPI/UKUdDF1MxBI/AAAAAAAAGzU/rM1veLbDw4Q/s1600/5.png" lang="LEGENDA5"></a>
</div>
<div id="legend"></div>
Em que:
O que está em vermelho você substituirá por algum link;
O que está em lilás são os endereços das imagens, as quais você pode substituir;
E o que está em azul é o local em que você coloca o nome do link.
Prontinho! O resultado será mais ou menos assim:
 
Ao passar o mouse em um cupcake ele aumenta e a legenda aparece
Espero que tenham gostado e mil beijinhus ;3 Ah sim! Não se esqueçam de curtir no Facebook ok?
Compartilhe:

Quem escreveu esse post?


Foi a Roberta, que adora tudo o que for kawaii, macio, fofo, de chocolate e com morango no topo. Se ela não estiver online por aqui, você pode encontrá-la também em...


Caso queira adicionar um emoticon/emoji ao seu comentário, copie o link de uma das imagens abaixo:

18 comentários

ai que fofo!
Amo cupcakes!
bjss

REPLY

MUUUITO FOFO o seu blog e menu muuuuito cute, parabéns pelo blog perfeito! Seguindo aqui segue de volta?
Cupcakezandooficial.blogspot.com
Espero por você lá =D

REPLY

Fica muito fofo. bjs
no-planetaroom

REPLY

Ei Rô tudo bem?

Bom, andei tirando algumas páginas do meu blog e depois que fui perceber que o espaço que eu tinha colocado para os filiados sumiu...
Estou editando um novo templante para o blog, então logo logo o seu link estará de novo tá?

Espero que entenda, um grande beijo s2

REPLY

Muito obrigada a todas meninas!!!
Fico super contente por terem gostado ^^
Beijus...

REPLY

Tudo bem ^^
Beijinhus

REPLY

Queria muito aprender a colocar essas coisinhas no meuu blog, pena que não sei, tô começando no blog agora, espero aprender um dia. :)

REPLY

Com o tempo vai ficando fácil ^^
Esse tutorial, por exemplo, é bem facinho; tenta para vc ver :3
Sucesso para você e seja bem vinda sempre!!!
Beijus...

REPLY

legal XD http://souotomeecomorgullhoo.blogspot.com.br/

REPLY

Oi. Tentei colocar esse menu no meu blog, mas avisa que
The element type "img" must be terminated by the matching end-tag "".

REPLY

Parece que tem que fechar as imagens no HTML. Vou verificar aqui direitinho ok?

REPLY

Como prometi, fiz a revisão do código testando em um modelo Viagem do Blogger e deu certo. Não uso mais o código nesse layout, por isso coloquei a imagem para mostrar como fica.
Tente de novo ^^
Beijus...

REPLY

Obrigada,. Roberta, mas a imagem do seu post fica com o efeito opacity. mas eu lembro o efeito do menu dock.
Vou testar no meu blog.
Obrigada mesmo pela atenção. Teu blog é muito fofo e lindo.
Parabéns!

REPLY

Deu tudo certinho, até eu colocar o código das imagens.
Então aparece a mesma mensagem:
The element type "img" must be terminated by the matching end-tag "".

Uso o modelo viagem, das cortininhas brancas.
Caso queira olhar o blog, Emaranhado De Maluquice.

REPLY

Tentei de novo e deu certo novamente :/ Não sei o que pode estar ocorrendo...talvez haja algum conflito com outros códigos do seu template.

REPLY

Ah...que pena. Achei perfeito esse menu porque uso 2 dock no meu pc...
Obrigadão mesmo assi, viu?!

REPLY

|Amei, mais não esta dando certo no meu blog :c

REPLY

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart

Reino Kawaii . 2018 Copyright. All rights reserved. Designed by Blogger Template | Free Blogger Templates