Personalizando menu no topo com imagem e caixa de pesquisa

Ola meus amore, tudo bem com vocês?
Aproveitando que o clima esta otimo aqui na italia ~~(estamos na primavera)~~, nao esta fazendo tanto frio... me inspirei para compartilhar um super tutorial... e os creditos é claro vai para Jaque Ferreira do Blog Ó a Blogueira, gente, ela simplesmente arrasa!

Ela disponibilizou um tutorial do menu com imagens, porem eram tipo separador... dai eu dei uma modificada e no lugar dos coracoes que serviam de separador coloquei uma imagem para cada categoria: Home / Sobre / Dicas ou Look / Contato

Gente, ficou a coisa mais fofa, como voces podem conferir na imagem abaixo:

Bom, entao vamos aos codigos...

Va em Modelo > Editar HTML , dê Ctrl+F e procure por /* Tabs

Feito isso selecione todo o codigo abaixo dele até /* Headings

E substitua por:

/* Menu Fixo - Por Jaque Ferreira www.oablogueira.com
-------------------------------------------------------------------------------------*/
#menufixo {
background: url('http://static.tumblr.com/wlnblxn/gHNo41ioh/menufixo.png') repeat; /* Imagem do menu fixo */
padding-left: 200px;
padding-top: 10px;
width: 100%;
height: 47px; /*Altura do menu fixo */
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
#menu {
font-family:'Open Sans Condensed'; /* Fonte */
font-size: 19px; /* Tamanho da Fonte */
text-transform: none;
margin-top: -3px;
}
#menu li {
list-style-type: none;
display: inline;
float: left;
padding: 0em 1.0em;
}
#menu li a {
color: #979797; /* Cor da fonte */
text-transform: uppercase;
padding-right: -2px;
line-height: 15px;
}
#menu a:hover {
color: #000; /* Cor da Fonte quando passar o mouse */
text-transform: uppercase;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
background: #fff;
margin-left: 40px;
}
#menu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 100%;
padding-left: -40px;
}
#menu li ul a {
font-size: 12px;
line-height: 24px;
}
#menu li:hover ul ul,
#menu li:hover ul ul ul,
#menu li.sfhover ul ul,
#menu li.sfhover ul ul ul {
left: -999em;
}
#menu li:hover ul,
#menu li li:hover ul,
#menu li li li:hover ul,
#menu li.sfhover ul,
#menu li li.sfhover ul,
#menu li li li.sfhover ul {
left: auto;
}
#menuright {
float: right;
color: #fff;
}
.search{
float: left;
font-family: 'Open Sans Condensed'; /* Fonte da Barra de pesquisa */
margin-top: -13px;
}
.searchbar{
height: 28px;
width: 210px;
border: 0px solid #fff;
margin: 12px;
background: url('http://static.tumblr.com/wlnblxn/B7Fo41ir1/barra_de_pesquisa.png'); /* Imagem da barra de pesquisa */
text-align:center;
font-size: 12px;
}
.searchbut{
background: url('http://static.tumblr.com/wlnblxn/3xao41iqv/search.png') no-repeat;
width:24px;
height:24px;
border: 0;
padding: 17px;
margin-left: -42px;
}
/* Fim Menu Fixo - Criado Por Jaque Ferreira www.oablogueira.com */

Feito isso, vá em Layout > no crosscol clique em Adicionar um Gadget > HTML/JavaScript e cole o seguinte codigo:

<div id='menufixo'>
<div id='menu'>
<li><a><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgulBlwNjdjBupQ4xxqVn6tkCcUKJlFbai05pV4-z2Vcy20wF1OfQsmFsYZHq5FNvJ6Xh9ukTyCnX_rwKmA5yTx2JLIWWMP4yF9Qmkl1QVpvjcH71LcKFf83J5dCW-VqUEp1Q98tYtTu44/s1600/house-outline+%25282%2529..png'/></a></li><li><a href='/'>INÍCIO</a></li>
<li><a><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXCIuWsJyU58kyvOnoqQOOyLW36mgv6_ubTBqrh3yKKFoFN4ESnD51K3hyphenhyphenGOIA0P1bRwufyMqn_VYORJBTk0ZpmzAyasP-cd7CZTg3FFynYFvAvJ0xc1WaeQMAVcIxRfJW-vT-0Hh1nEw/s1600/chat+%25282%2529..png'/></a></li>
<li><a href='LINK DA PÁGINA_SOBRE'> Sobre </a></li>
<li><a><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuvEIk7XqDuLkZGC3qeemR5Jjpy39g9i8l_dtPr1SGVy1UJCMxEgeJyDXWGp_W_jJhmG-0loX8DFewaQq3crLAc3uYy7kZZXZqJnTFcOueBzl2iYjYUU7na58rnihhX1pjEsLEI6pePaI/s1600/high-heel+%25282%2529..png'/></a></li>
<li><a href='LINK DA PÁGINA_DICAS'> Dicas </a></li>
<li><a><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ-kkUs46Dy9TDiA4ZRc56Ww0psWaDjnax0LjKaDr0qGiioNurmn9Hk5if0rjQfMcoYUajuFHEMhSYkpxfECHwFCDUym3-am6SzIym7ZSlxhqYf5ZHI9rgIuCv8r0ySek-2YxiGx_UwZ8/s1600/envelope+%25282%2529..png'/></a></li>
<li><a href='LINK DA PÁGINA_CONTATO'> Contato </a></li>
</div>
<form action='/search' class='search' method='get'>
<input class='searchbar' id='s' name='q' placeholder='Pesquisar' type='text' value=''/>
<input class='searchbut' type='submit' value=''/>
</form>
<div id='menuright'>
</div></div>

Onde está com a font VERMELHO você substitue pelo link de suas respectivas páginas!

Bom, espero que voces tenham gostado, nao esqueçam de deixar um comentario ok?

Se porventura, nao funcionar no seu blog, faça um teste ao invez de colocar o codigo abaixo de /* tabs , tente colocalo acima de ]]></b:skin>

Um forte abraço !!!