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>