Reino Kawaii

Olá! Hoje trouxe um tutorial de como fazer um menu que nem esse que uso no template atual, abaixo do cabeçalho, que, quando você 'desliza' pelo blog, ele se mantém fixo no topo, com acesso a links e caixa de pesquisa. Foi um pedido de alguns leitores, esse daqui do blog já veio no template, então fui pesquisar porque sempre tive curiosidade de saber como fazer menus nesse estilo, porém ficava em dúvidas quando lia os tutoriais, a maioria em inglês ;___; Finalmente consegui entendê-lo, graças ao site LearnWebCode, e usar no Blogger. Claro, eu não sou profissional, então minha versão ficou bem simples e sem muitas edições do original, mas acho que vão gostar. O menu do tutorial de hoje vai ficar fixo na tela, tem área para caixa de pesquisa, links e redes sociais com efeito grayscale. Vamos começar.

Em Modelo - Editar HTML - cole o seguinte código antes de </b:skin>:

nav {
 z-index: 500;
    background-color: rgba(255, 255, 255, 0.62); /*cor da barra*/
}

.nav-placeholder {
 margin: 0 0 40px 0;
}

.fixed {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
    background-color: rgba(255, 255, 255, 0.62); /*cor da barra ao deslizar*/
}

.fixed .nav-inner {
 padding: 0 20px;
}

.fixed .nav-inner-most {
    max-width: 1100px;/*largura maxima ao deslizar*/
 margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.62);
}

nav ul {
 margin: 0;
 padding: 0;
}

nav ul li {
 list-style: none;
 float: left;
}

nav ul li a:link,
nav ul li a:visited {
 display: block;
 text-decoration: none;
 padding: 10px 25px;
 background-color: #transparent;
 color: #AAAAAA;
 font-size: 90%;
 font-weight: bold;
}

nav ul li a:hover {
 color: pink;
}

nav ul li:last-child a:link,
nav ul li:last-child a:visited {
 border-right: none;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.container {
    max-width: 1100px; /*essa largura tem que ter valor igual ou proximo da largura total do seu blog*/
 margin: 0 auto;
 padding: 0 20px;
 position: relative;
}
#search {
width: 228px; /* largura caixa de pesquisa */
height: 22px;/* altura caixa de pesquisa */
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
}
#search-box {
margin-top: 3px;
border:0px;
background: #fff;
text-align:center;
color:#AAAAAA;
}
.gray, a gray { /*deixa os icones cinza*/
-webkit-filter:grayscale(100%)
}
.gray:hover, a:hover gray {
-webkit-transition-duration: 0.5s;
-webkit-filter:grayscale(1%)
}

<nav>
   <ul class='clearfix'>
                <li><form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Search...&quot;;' onfocus='if (this.value == &quot;Search...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Search...'/></form></li>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>F.A.Q</a></li>
                <li><a href='#'>Música</a></li>
    <li><a href='#'>Tutoriais</a></li>
              <li><a href='#'><img class="gray" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDsNuCMxB-SXai_-p-d_FVVriq4P5nP_mhzlswTd1_sstWwSMfL-eQKaS0msgmkpG-6RA5WFsNFvqe_uoMGf6RYZmMFEqJ2AsBPSyQpLznTZPCswgRrPkw3ctJqeWdKTupdLuTxsr6ymg/s1600/facebook.png" title='Curtiu?'/></a></li>
              <li><a href='#'><img class="gray" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit6jBZgOxOmObgDmJuxonGVEAXX_rLUvPTJzrQjrMDIYSiW2DySTWuNd9ZH5onN3Mq2hwmOcZcLkIeUbTmk3eqHZP1loMC8flI38LQ4cw9SGXOhKi2su-1JKxjJ17XVc0gmpeisxltCuQ/s1600/twitter.png" title='Follow'/></a></li>
              <li><a href='#'><img class="gray" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoINEJRMNEMBA4xroBECClAZk_2MooPjOMANM5i6_H-mwC5w7KWzfrIZcr5nZehsdtI4rtgsMKs6Ubxyr2sGARzuvjaiXs3xoy1FXUVQX4U-4io2kkm6DJBvjObfKZT9yPp7JJIeQuj0g/s1600/deviantart.png" title='+Watch'/></a></li>
              <li><a href='#'><img class="gray" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimoqBPDkzWB_ZpAQ6H8SpHWIyswLUaxrT34IwqoWvjbd_v3so9jpdssOauwIDAtnzr5oPy1jem9Dt8hOL4iy8WEVdfAnlw68YnnvRDOzG22LKtf12AlB609ivC-Qu4fIYTWqFyXfntFx4/s1600/heart.png" title='Love'/></a></li>
              <li><a href='#'><img class="gray" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzfjvOAaV9YVSrof2A3XzJF-Cb6SWURdWPThoe3YDVpCaLzGYAyCcN_GujB5OrAnIuFC5eJUMDhqdiSOv-g-3fuE8yV2ZRmrS3wZ6YGgtQmNeeexFLNtm1fje2g1RpxnCMaY66RFvOtYo/s1600/email.png" title='Contato'/></a></li>
   </ul>
  </nav>