Menu Polaroid

Bom Dia! Hoje eu venho trazer para vocês um menu exclusivo aqui do blog que eu crie há puco tempo e uso atualmente nas tags, são essas fotinhas nas laterais do blog que quado você passa o mouse ficam retinhas e você pode clicar no menu. Além de fofinhas você pode usa-las para menu principal do seu blog, para menu de equipe do blog, afiliados ou como eu uso de tags.

O tutorial desse menu foi pedido pela Bunny *--* Caso você também queira fazer um pedido de tutorial é só deixar um comentário em qualquer postagem falando qual tutorial você gostaria de ver que assim que possível eu vou preparar e postar o tutorial aqui no blog, lembrando que temos postagens todos os dias pares, ou seja, um dia sim e outro não.


Vamos ao Tutorial:
1° Passo: Vá em Modelo > Editar HTML.
2° Passo: Procure por(Usando Ctrl+F): ]]></b:skin>
3° Passo: Cole acima de "]]></b:skin>" o código:
/** Menu Polaroid por myfluffyrainbow.blogspot.com.br **/
#pic1 {
font-family:trebuchet ms;
font-size:10px;
position:fixed;
top:20px;
left:30px;
width:118px;
height:130px;
transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-webkit-transform: scale( 0.7) rotate( 0deg);
-moz-transform: scale( 0.7) rotate( 0deg);
background:#fff;
text-align:center;
font-size: 12px;
box-shadow: 0 0 10px #D3D3D3;
box-shadow: inset 0 0 10px #D3D3D3;
padding:2px 2px 10px 2px;
-webkit-transform: scale( 0.7) rotate( 8deg);
-moz-transform: scale( 0.7) rotate( 8deg);
}

#pic1:hover {
-webkit-transform: scale( 0.9) rotate( 0deg);
-moz-transform: scale( 0.9) rotate( 0deg);
}

#pic2 {
font-family:trebuchet ms;
font-size:10px;
position:fixed;
top:140px;
left:30px;
width:118px;
height:130px;
transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-webkit-transform: scale( 0.7) rotate( 0deg);
-moz-transform: scale( 0.7) rotate( 0deg);
background:#fff;
text-align:center;
font-size: 12px;
box-shadow: 0 0 10px #D3D3D3;
box-shadow: inset 0 0 10px #D3D3D3;
padding:2px 2px 10px 2px;
-webkit-transform: scale( 0.7) rotate( -8deg);
-moz-transform: scale( 0.7) rotate( -8deg);
}

#pic2:hover {
-webkit-transform: scale( 0.9) rotate( 0deg);
-moz-transform: scale( 0.9) rotate( 0deg);
}

#pic3 {
font-family:trebuchet ms;
font-size:10px;
position:fixed;
top:260px;
left:30px;
width:118px;
height:130px;
transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-webkit-transform: scale( 0.7) rotate( 0deg);
-moz-transform: scale( 0.7) rotate( 0deg);
background:#fff;
text-align:center;
font-size: 12px;
box-shadow: 0 0 10px #D3D3D3;
box-shadow: inset 0 0 10px #D3D3D3;
padding:2px 2px 10px 2px;
-webkit-transform: scale( 0.7) rotate( 8deg);
-moz-transform: scale( 0.7) rotate( 8deg);
}

#pic3:hover {
-webkit-transform: scale( 0.9) rotate( 0deg);
-moz-transform: scale( 0.9) rotate( 0deg);
}

#pic4 {
font-family:trebuchet ms;
font-size:10px;
position:fixed;
top:380px;
left:30px;
width:118px;
height:130px;
transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-webkit-transform: scale( 0.7) rotate( 0deg);
-moz-transform: scale( 0.7) rotate( 0deg);
background:#fff;
text-align:center;
font-size: 12px;
box-shadow: 0 0 10px #D3D3D3;
box-shadow: inset 0 0 10px #D3D3D3;
padding:2px 2px 10px 2px;
-webkit-transform: scale( 0.7) rotate( -8deg);
-moz-transform: scale( 0.7) rotate( -8deg);
}

#pic4:hover {
-webkit-transform: scale( 0.9) rotate( 0deg);
-moz-transform: scale( 0.9) rotate( 0deg);
}

/** FIM Menu Polaroid por myfluffyrainbow.blogspot.com.br **/
5° Passo: Edite a parte destacada para que fique na altura que deseja, cada um dos codigos equivale a uma das fotinhas, de preferencia faça o próximo passo e depois edite para que fique na altura desejada
6° Passo: Cole em um Gadget Java/Script o seguinte código:
<<div id="pic1">
<img src="URL DA IMAGEM" id="inimg4" width="100px" />
<br />
<a href="http://www.blogger.com/Link" id="navi4"><span style="color: black;">
Em Breve</span></a></div>
<div id="pic2">
<img src="URL DA IMAGEM" id="inimg4" width="100px" />
<br />
<a href="http://www.blogger.com/Link" id="navi4"><span style="color: black;">
Em Breve</span></a></div>

<div id="pic6">
<img src="URL DA IMAGEM" id="inimg4" width="100px" />
<br />
<a href="http://www.blogger.com/Link" id="navi4"><span style="color: black;">
Em Breve</span></a></div>

<div id="pic4">
<img src="URL DA IMAGEM" id="inimg4" width="100px" />
<br />
<a href="http://www.blogger.com/Link" id="navi4"><span style="color: black;">
Em Breve</span></a></div>
7° Passo: Altere o código colocando o link e o nome do link.

Espero que tenham gostado do tutorial e do menu e se usarem deem os devidos créditos <3
Caso tenham qualquer duvida comentem que farei o máximo para ajuda-los.

4 comentários:

  1. oie gostaria de fazer um pedido |o|
    Eu sempre tentei, mas não conseguia fazer...
    Queria pedir-vos para fazer um tutorial de "imagem do cabeçalho com largura total do blog" tipo, queria que a imagem lá do cabeçalho fosse fixada de canto a canto do blog :)
    Se for fazer pode me avisar quando fazer? Ai eu vou vim aqui pra ver o/
    obrigada desde já
    by by http://clubeotaku-co.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi, vou preparar o tutorial essa semana e assim que ficar pronto passo no seu blog avisando =)

      Excluir
  2. Ai que lindo! *-*
    Obrigada por postar s2
    Um dia uso, prometo! u-u

    Mas desse jeito so da pra colocar de um lado neh? o.o'

    Kissus, continua com as boas postagens! >-<')b

    ResponderExcluir
    Respostas
    1. Vou ficar mega feliz se você usar algum dia <3
      Da para colocar elas lado a lado também, é só deixar top:---px; igual de todas e alterar left:30px; para que elas não fiquem uma em cima das outras =)

      Excluir