Reino Kawaii

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbYV7AQmB9zwNte5b25K7pnXTHpnITQB82hWRLRnaQWPjgKZ6PswFbPOVnl4eeB4bfA1KDElyTE68Mqkm5ZfLkDOe-9rpHXJ0km0GFKbKJ2OwJ3uJ6aGAG0ViM9zTGz4ngm2-1onALxGgr/s1600/1.png" lang="LEGENDA1"></a>
  <a href="URL2" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifiMPobNetC52vyLCpuGHKrAwgQX9olgaz7lSmu4kRx3TNKDj1VABhKgYo1_F2GtiZQrl_Jm1QegH6DbqdKfkXv5YEiThxBiVZxs9rGo6u7mzk48gMX5SKc1krvvHd_NY0xX00WxZZp7mA/s1600/2.png" lang="LEGENDA2"></a>
  <a href="URL3" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbxOkFDKBoDcK6jWqq8xsTXp_egj9H-KWO2jX4iRwmMPwe9M5piI8ccPVLnMGny-qipEM7DNJ4b0RJ3FU3YMMwA1kg-uCv3TvJN7Ssibyw-96GnQ6cV_WgFuNBvV8qJuG2SnTeMkLzOSlf/s1600/3.png" lang="LEGENDA3"></a>
  <a href="URL4" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcUaWh7qeNjOaWC7A2qzlHFAPRboNdQ2yLWZ3oYt0uSz0qfseu8_PVMB0RskMpeLt3onam-vwQyG4W9b0lk6uN4ccDTfkTn6cJHgX-3eYccwFBXF_qWScxREgY5uuny8GR9DJ-F3qTUana/s1600/4.png" lang="LEGENDA4"></a>
  <a href="URL5" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxbdSp6szGftZuDtZ7NAsTdiqBFBzKjtdojIVCgMyyxbsZJ36onsaXNhp1brNl9Ye-yk-ULLSJcolv1Eu3fvJh3aVJ-F0LOvGfgHxSVX8xoB57-QTHsdZZnLgRB4tkqx0cQSiXLEzPYPEn/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:
Espero que tenham gostado e mil beijinhus ;3 Ah sim! Não se esqueçam de curtir no Facebook ok?