Menu no topo com caixa de pesquisa








Annyeong pessoal, tudo bem? (  ^ω^)Eu estou um pouco chateada e triste, mas nada que não passe, afinal tudo passa né? Hoje eu fui visitar um ponto turístico da minha cidade e fiquei realmente admirada com tamanha beleza, era um lugar bem alto que dava para ver a cidade inteira e ainda uma outra cidade pela altitude que estávamos, eu fiquei impressionada! Ultimamente eu estou tão melancólica e tão desanimada, peço desculpas por não postar esses dias, eu estou tentando por em dias os pedidos que ainda ficaram pendentes na minha ask ok? ❤~

Este menu meu deu uma trabalheira para criar ´^eu comecei fazendo algo simples mas nada ficava ao meu agrado, editei várias e várias vezes, então eu dei uma pesquisada na net para ter alguma inspiração e tive a ideia de por título do blog, um icon e ainda uma caixa de pesquisa. Eu adorei o resultado, achei super fofo e o menu cobre toda a largura do blog, qualquer um pode usar este modelo pois fica bem em qualquer tamanho de tela. É simples de editar e pode ser mudado as cores, fontes e a imagem do icon. Espero que vocês gostem, confiram logo abaixo o preview ^ω^/


LIVE PREVIEW ヽ(^ω^)

Para usar o menu, abra o seu modelo e clique em editar html, procure por: ]]></b:skin> E acima dele cole o seguinte código abaixo:

#topo{
background-color:#fff;
border-bottom: solid 2px #C7D1DD;
width:100%;
height:70px;
left:0%;
top:0px;
position:fixed;
z-index:900;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#topolinks{
position:absolute;
z-index:1000;
letter-spacing:0.5px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
#topolinks em{
position:relative;
top:17px;
left:90px;
right:100px;
bottom:0px;
color:#C1C9D2;
letter-spacing: -1px;
text-transform:none;
font-family:calibri;
font-weight:300;
font-size:25px;
}
#topolinks a {
background-color:#E6EAEE;
padding:2px 4px 2px 4px;
position:relative;
top:15px;
left:120px;
margin:2px;
font-size:12px;
font-family:calibri;
color:#C1C9D2;
text-shadow:#fff 1px 1px 1px;
text-transform:uppercase;
text-decoration:none;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
#topolinks a:hover{
background-color:#CFD8E4;
padding:30px 4px 27px 4px;
color:#fff;
text-shadow:#AFB8C2 1px 1px 1px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
#icon img{
width:50px;
height:50px;
position:fixed;
margin-top:5px;
margin-left:20px;
padding:4px;
background:#fff;
border:1px solid #C1C9D2;
border-radius:100%;
opacity:1;
z-index:99999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#icon img:hover{
background:#E6EAEE;
border:1px solid #C1C9D2;
opacity:0.8;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-animation: ToolVertical 1s;
}
@-webkit-keyframes ToolVertical {
0%   {-webkit-transform: rotateX(0deg);}
100% {-webkit-transform: rotateX(360deg);}
}
input, textarea, option, select, button form{
background:#fff;
border-top: solid 1px #fff;
border-bottom: solid 1px #fff;
border-left: solid 1px #fff;
border-right: solid 1px #D6DDE6;
padding:2px;
color:#CFD6DF;
font-size:12px;
font-family:calibri;
color:#C1C9D2;
text-shadow:#fff 1px 1px 1px;
text-transform:uppercase;
text-decoration:none;
font-weight: 300;
line-height:20px;
height: 20px;
width:160px;
float: right;
margin-right:-550px;
margin-top:-8px;
transition:All 0.7248s ease-in-out;
-webkit-transition:All 0.7248s ease-in-out;
-moz-transition:All 0.7248s ease-in-out;
-o-transition:All 0.7248s ease-in-out;
cursor: pointer;
}
input:focus{outline:none;}
*::-moz-selection {
background:#CFD6DF;
color: #fff;
text-shadow: 0 1px 0 #ffffff;
}

E o links cole dentro de um gadget:

<div id="topo">
<div id="icon">
<img  src="http://i.imgur.com/wCzuwE4.jpg"/></div>
<div id="topolinks"><strong><em>Título do blog</em></strong>
<a href="/" title="inicio">homepage</a>
<a href="/ask" title="ask">pergunte me</a>
<a href="/archive" title="os que eu admiro">blogroll</a>
<a href="/sailor" title="amigos">parcerias</a>
<a href="http://" title="recomedações">conheça</a>
<a href="http://" title="layouts free">extras</a>
<a href="http://" title="sobre a dona">owner</a>
<a href="http://" title="siga o blog">follow us</a>
<a href="http://" title="agradecimentos">créditos</a>
<form action='/search' method='get'>
<input name='q' type='text' value='pesquise aqui'/>
</form>
</div></div> 
Querem ver os perfis de quem posta aqui? cliquem na imagem᠉
Continue

3 comentários:

  1. Oi roh , esta super fofo (só não localizei a caixa de pesquisa ) , e detalhe o seu leia mais " mais informações " externo esta fora da caixa, Já o seu continue interno esta certinho !

    COMO SABE A MAIORIA DO DESENVOLVIMENTO DO MEU LAY É BASEADO NOS SEUS TUTOR... ( ESTÃO COM OS CREDITOS )


    BJS
    www.bubbslandia.blospot.com

    ResponderExcluir
  2. AAAA, olá Roh! Que saudade. ♥ Poxa, espero que fique melhor, minha querida. Aqui na minha cidade tem um lugar como este chamado "Pico do Urubu", mas eu nunca me interessei realmente em ir. Agora que você falou, fiquei curiosa. Well, eu te entendo, estou no fim do primeiro semestre da faculdade e também estou o desânimo em pessoa, mas como você disse, tudo passa, logo menos voltamos ao nosso humor.

    Olha, deu trabalho, mas valeu à pena, viu? O resultado está puro amor, acho que é o menu de topo mais amorzinho que eu já vi na interwebs kpjsaojofsj <33 Adorei, como sempre.

    Carinhosamente, Jheni.
    empire k. || written feelings

    ResponderExcluir
  3. Hello Rooh, tudo bom? Que saudade daqui, eu sempre pego seus tutorais pra me dar uma ajudinha na hora de fazer os meus layouts rsrsrs (sempre credito, lógico).

    Poxa, que bonito. O único ponto turístico que temos aqui (Santos/SP) é a orla da praia, as vezes sinto falta de algo pra fazer na cidade sem ser ir à praia.
    Ah! E não fica triste não, você merece ficar feliz!! Pensa nisso <3

    Adorei o tutorial, to com um lay na cabeça e provavelmente seu menu vai estar nele hehe

    Kiss
    a-pplepie.blogspot.com.br

    ResponderExcluir

Olá meus amores, os comentários devem ser direcionados somente ao blog e não a vida pessoal de ninguém! Qualquer dúvida peça pela Ask que responderei o mais rápido possível. Anônimo não adianta vir xingar pelos comentários que antes de mesmo de pensar em me ofender eles serão excluídos! Não gosto de tags, se quiser fazer fique a vontade mas não irei retribuir, não curto seguindo segue de volta =/ mas posso seguir se gostar realmente do blog, não julgo por layout ou por seguidores, avalio o blog e como disse se eu curtir é claro que sigo, afiliações? Peça nos comentários pois se pedir em outro lugar no caso páginas é bem provável que eu não veja! Então meus lindos espero que curtam cada cantinho do meu bloguinho e voltem sempre! kissus (*^3^)

Layout e codificação por Roh A.Ramos Os blogs que mais ajudaram com os tutoriais foram: CHIHDVCA Tecnologia do Blogger ♡ 2012 a 2017