Códigos para seu blog: Menu responsivo com caixa de pesquisa para usar no blog

CÓDIGO DAS VARIÁVEIS

(colar abaixo de /* Variable definitions
====================)

<Variable name="menu.font" description="Font" type="font"

default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

<Variable name="submenu.font" description="Font submenu" type="font"

default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

</Group>

</Group>

CÓDIGO CSS

(cole acima de ]]></b:skin>)

/* MENU RESPONSIVO COM CAIXA DE BUSCA- by elainegaspareto.com
----------------------------------------------- */
.conteudo-menu { background: $(menu.background.color); font: $(menu.font); }
.menu-fixo { z-index: 9999; position: fixed; top: 0; width: 100%; height: 50px;}
#menu {
background: $(menu.background.color); /* COR DE FUNDO DO MENU */
color: $(menu.font); /* COR DA FONTE DO MENU */
height: 50px; /* ALTURA DO MENU */
width: 100%;
position: relative;
z-index: 999;
}

#menu-left {
float: left;
width: 100%;
max-width: 700px;/* ÁREA ÚTIL DO MENU, AUMENTE OU REDUZA PARA CENTRALIZAR */
}

#menu-right {
float: right;
width: 100%;
max-width: 300px;
text-align: right;
}

#menu ul, #menu li {
font: $(menu.font); /* TIPO FONTE DO MENU */
text-transform: uppercase; /* Todas as fontes maiúsculas, se não quiser, apague esta linha */
margin: 0 auto;
padding: 0 0;
list-style: none;
}

#menu ul {
width: 100%;
}

#menu li {
float: left;
display: inline;
position: relative;
font-weight: 700;
}

#menu a {
display: block;
line-height: 50px;
padding: 0 14px; /* DISTÂNCIA ENTRE AS CASAS */
text-decoration: none;
color: $(menu.text.color); /* COR DA FONTE DO MENU */
}

#menu li a:hover {
color: $(menu.selected.text.color); /* COR DO TEXTO AO PASSAR O CURSOR */
background: $(menu.selected.background.color); /* COR DE FUNDO DO MENU HOVER */
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

#menu-left input {
display: none;
margin: 0 0;
padding: 0 0;
width: 80px;
height: 50px;
opacity: 0;
cursor: pointer;
}

#menu label {
background: url("http://i.imgur.com/Cx8HQMd.png") center no-repeat;
-moz-background-size: auto 50%;
-webkit-background-size: auto 50%;
background-size: auto 50%;
display: none;
width: 50px;
height: 50px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

#menu ul.menus {
padding-top: 5px;
height: auto;
overflow: hidden;
width: 200px;
background: rgba(255,255,255,0.95);
position: absolute;
z-index: 99;
display: none;
box-shadow: 0 0 1px rgba(0,0,0,0.2);
}
#menu ul.menus li {
display: block;
width: 100%;
text-transform: none;
text-shadow: none;
}
#menu ul.menus a {
color: $(submenu.text.color);
line-height: 35px;
}
#menu li:hover ul.menus {display: block;}
#menu ul.menus a:hover {
background: $(submenu.selected.background.color); /* COR DE FUNDO DAS SUB ABAS HOVER */
color: $(submenu.selected.text.color); /* COR DO TEXTO DAS SUB ABAS HOVER */
padding-left: 20px;
}
#search {
margin-top: 0px;
color: $(menu.text.color) !important;
}
#search input[type="text"] {
background: url("http://i.imgur.com/WsHNC7P.png") no-repeat 20px 15px;
border: none;
color: #fff !important;
font-size: 13px;
width: 0px;
height: 38px;
padding: 6px 5px 6px 50px;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
cursor: pointer;
}

#search input[type="text"]:focus {
color: #fff !important;
width: 245px;
background: url("http://i.imgur.com/WsHNC7P.png") no-repeat 20px 15px rgba(0,0,0,0.2);
outline: none;
cursor: text;
}
centro {
display: block;
margin: 0 auto;
width: 100%;
max-width: 1000px;
}
/* MEDIA QUERIES DO MENU (DEFINE A RESPONSIVIDADE)
----------------------------------------------- */
@media screen and (max-width: 1024px){
.menunope { display: none;}
#menu { position: relative;
}
#menu ul {
background: rgba(0,0,0,0.9);
position: absolute;
top: 100%;
right: 0;
left: 0;
z-index: 3;
height: 1000px;
display: none
}
#menu ul.menus {
width: 100%;
position: static;
padding-left: 20px;
}
#menu li {
display: block;
float: none;
width: auto;
background: #666; /* COR DE FUNDO DO MENU RESPONSIVO */
}
#menu-left input, #menu label {
position: absolute;
top: 0;
left: 0;
display: block;
}
#menu-left input { z-index:4;}
#menu-left input:checked + label {
background: url("http://i.imgur.com/yNRYwBD.png") no-repeat center;
-moz-background-size: auto 50%;
-webkit-background-size: auto 50%;
background-size: auto 50%;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#menu-left input:checked ~ ul { display:block;}
#menu ul.menus {
width: 100%;
background: $(menu.background.color); /* COR DE FUNDO DO MENU RESPONSIVO */
z-index: 99;
display: none;
box-shadow: 0 0 1px rgba(0,0,0,0.2);
margin-top: -5px;
margin-left: -20px;
padding-top: 0;
border:none;
}
#menu ul.menus li {
display: block;
width: 100%;
font-weight: 100;
text-shadow: none;
background: rgba(0,0,0,0.5);
}
#menu ul.menus a {
color: #ccc; /* COR DA FONTE DO MENU RESPONSIVO */
line-height: 35px;
}
#menu li:hover ul.menus { display: block;}
#menu ul.menus a:hover {
background: $(submenu.selected.background.color); /* COR DE FUNDO DO SUBMENU */
color: $(submenu.selected.text.color); /* COR DO TEXTO DO SUBMENU HOVER */
padding-left: 20px;
}
}

CÓDIGO JAVASCRIPT

(colar acima de </head>)

CÓDIGO HTML

(colar abaixo de </header> para ficar abaixo do cabeçalho ou cole abaixo de <body expr:class='"loading" + data:blog.mobileClass'> para ficar fixo desde o começo)

<div class='conteudo-menu'>
<nav id='menu'>
<centro>
<div id='menu-left'>
<input type='checkbox'/>
<label/>
<ul>
<li><a href='/'>Início</a></li>
<li><a href='LINK AQUI'>Aba simples</a></li>
<li><a>Aba com submenu</a>
<ul class='menus'>
<li><a href='LINK AQUI'>Sub aba 1</a></li>
<li><a href='LINK AQUI'>Sub aba 2</a></li>
<li><a href='LINK AQUI'>Sub aba 3</a></li>
<li><a href='LINK AQUI'>Sub aba 4</a></li>
</ul>
</li>
<li><a href='LINK AQUI'>Aba simples</a></li>
<li><a>Aba com submenu</a>
<ul class='menus'>
<li><a href='LINK AQUI'>Sub aba 1</a></li>
<li><a href='LINK AQUI'>Sub aba 2</a></li>
<li><a href='LINK AQUI'>Sub aba 3</a></li>
<li><a href='LINK AQUI'>Sub aba 4</a></li>
<li><a href='LINK AQUI'>Sub aba 5</a></li>
</ul>
</li>
<li><a href='LINK AQUI'>Aba simples</a></li>
</ul>
</div>
<div id='menu-right'>
<form action='/search' id='search' method='get'>
<input autocomplete='off' name='q' placeholder='Digite sua busca e tecle Enter' type='text'/>
</form>
</div>
</centro>
</nav></div>

Códigos para seu blog

Menu responsivo com caixa de pesquisa para usar no blog

Formulário de contato

Formulário de contato