3.3.14

Menu no Topo (Pedido)

~Hey!
Saudades de vocês amores!! Estou lendo o Livro "O Teorema de Katherine" e até onde estou é muito legal, quando terminar faço uma resenha para vocês. Mas o Livro é tão bom, que eu estava em tal parte e quando fui virar de pagina que cortei meu dedo, mas tudo de atrapalhada acontece comigo né?

Bem, temos o nosso primeiro pedido ehh *u* da Cat do  Unicórnios Purpurinados obrigada Cat!! Ela me perguntou como colocar aquele Menu no Topo que tem aqui no Blog sabe? Mas se você não entendeu aqui está ele (www) é o Primeiro menu lá de cima :)


Vá em: Modelo - Editar HTML aperte Ctrl + F e procure por ]]></b:skin> assim que achar cole acima da Tag procurada o seguinte código:
.topo {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s;
}
.topo:hover {
position:absolute;
margin-top: 147px;
}
.menu1{
padding: 5px;
width: 100px;
color: #ffffff, !important;/*cor da fonte*/
box-shadow: inset 0 1px 1px rgba(0,0,0,0.15), 0 1px 1px rgba(255,255,255,0.35);
text-shadow: 2px 1px 1px #d4dee2;
background: rgba(0,0,0,0.03);
text-align: just;
transition:All 0.3s ease;
-webkit-transition:All 0.3s ease;
-moz-transition:All 0.3s ease;
-o-transition:All 0.3s ease;
}
.menu {
display : block;
font-size: 10px;
font-family: 'Wendy', sans-serif;
background-repeat : no-repeat;
width: 40px;
text-indent : 8px;
text-decoration : none;
line-height : 21px;
margin-bottom : 2px;
padding: 0px;
color: #ffffff !important;
background-color: #ffbfbf;
box-shadow: inset 0 0 20px rgba(0,0,0,0.04), 1px 1px 0px rgba(0,0,0,0.04);
text-shadow: 1px 1px 0px rgba(0,0,0,0.08);
text-transform:uppercase;}
.menu a {
text-transform: uppercase;
text-decoration:none;
}
.menu:hover {
text-decoration : none;
background-color: #e1e8eb;
box-shadow: inset 0 0 20px rgba(0,0,0,0.04), 1px 1px 0px rgba(0,0,0,0.04);
}
Salve. Agora em adicione um HTML Java/Script de preferência no topo, e nele cole:

<div style="position: absolute;z-index: 2; margin-top: -38px; margin-left:25px;color: #fff; font-weight: bold;width: 320px;
font-family: 'Open Sans'; font-size: 12px; text-transform: uppercase;text-shadow: 1px 1px 0px rgba(0,0,0,0.05);">- blog de tutoriais do Having Cherry (⌒▽⌒)☆</div>
<div style="position: absolute;margin-left: 770px; margin-top: -192px;">
<div class="topo"><div class="menu1">
<a href="LINK" class="menu"> Home </a>
<a href="LINK" class="menu"> About </a>
<a href="LINK" class="menu"> Ask </a>
<a href="LINK" class="menu"> Tumblr </a>
<a href="LINK" class="menu"> Twitter </a>
<a href="LINK" class="menu"> Face </a>
<div style="position: absolute;margin-left: 40px; margin-top: -143px; width: 53px; height: 135px;
padding: 4px"><img src="http://static.tumblr.com/eibvjdd/bVFmzsu5b/02.png" />
</div></div>
<img src="http://static.tumblr.com/eibvjdd/8Gjmzr2a4/psd.png" />
</div></div>

Altere apenas as partes destacadas. Se você não quiser por nada onde está escrito "- blog de tutoriais do Having Cherry (⌒▽⌒)☆ " Apague e deixe sem nada.
O primeiro link é a imagem que fica do lado do menu e a segunda é a imagem que fica onde está escrito "menu" algumas imagens:









Créditos: Peguei o Tutorial no UF que pediu para creditar o HC então, crédito aos dois.
Espero que tenham gostado, e continuem pedindo aqui pelos comentários!
Beijos, qualquer duvida comentem.

8 comentários:

  1. Eu acho esse menu uma fofura >3<
    Beijos flor :*
    blogandoseuassunto.blogspot.com
    eter-nal.blogspot.com

    ResponderExcluir
  2. Agora eu já achei no HC HUASHAHUSHU'
    Mas mesmo assim, obrigada pela atenção viu ?
    Beijos <3
    youheartsbyleticia.blogspot.com.br

    ResponderExcluir
  3. Eu já tinha visto esse menu , e ele é muito cute .Adorei o tuto u3u

    Kissus <3 || Antigo Senhorita Liberdade || Vagas para afiliados || Adore HTML

    ResponderExcluir
  4. Já tinha visto este menu mais nunca havia visto um tuto sobre ele x.x
    Brigada ♥

    Me and You | meandyousolove.blogspot.com.br

    ResponderExcluir

*Comentários de baixo calão, brigas, ofensas ou nada educado não serão moderados.
*Seguindo, segue de volta? só acompanhado com um comentário sobre a postagem.
*Críticas são aceitas na boa, mas já vou avisando que todos os comentários são respondidos.
*Espero que tenha gostado do blog, não aceitamos tag, tenha um bom comentário!