Personalizando menu no topo com imagem e caixa de pesquisa

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://4.bp.blogspot.com/-hiZQvzUAyEw/VzyGvwSYolI/AAAAAAAAHbw/KpR6ZaMm9Zgl_KfWyn46rIfVs30rhmcyQCLcB/s1600/house-outline%2B%25282%2529..png'/></a></li><li><a href='/'>INÍCIO</a></li>
<li><a><img src='https://2.bp.blogspot.com/-nei4Ptu2ja4/VzyGvqdS00I/AAAAAAAAHbk/EgjZw0wJ550F3qKjjoJe2ouc26C6sIelACLcB/s1600/chat%2B%25282%2529..png'/></a></li>
<li><a href='LINK DA PÁGINA_SOBRE'> Sobre </a></li>
<li><a><img src='https://3.bp.blogspot.com/-ycySYaemf2k/VzyGvqZo8vI/AAAAAAAAHbs/h-saXrVyXYkX5ZTyh7YpMgaIopfDO9-mACLcB/s1600/high-heel%2B%25282%2529..png'/></a></li>
<li><a href='LINK DA PÁGINA_DICAS'> Dicas </a></li>
<li><a><img src='https://2.bp.blogspot.com/-4kLcALzupRg/VzyGvnexa3I/AAAAAAAAHbo/CnIv-inu3WsNNasOo6Qr39MEFmZqP46OgCLcB/s1600/envelope%2B%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 !!!

8 comentĂĄrios

  1. Reeeeeeh, que liindoo! Até eu usarei <3


    www.oablogueira.com

    ResponderExcluir
    Respostas
    1. Jaque sua lindaa, fico tao feliz em te ver por aki... curto seu blog demais <3 hahaha eu sei que vc ja sabe pq eu ja disse antes neh rsrs
      Bjao lorah... seu blog eh show!!!

      Excluir
  2. Eu ameei o Lay e agradeço demais!! Porém, não estou conseguindo mudar a fonte do título do blog. Como faço?

    ResponderExcluir
    Respostas
    1. A font do titulo do blog vc muda abaixo do codigo:

      */ Header

      Excluir
  3. no meu crosscol nao tem opção de adicionar =(

    ResponderExcluir
  4. Este comentĂĄrio foi removido pelo autor.

    ResponderExcluir

Mande seu comentårio, criticas, elogios ou sugestÔes.
Responderei o mais rĂĄpido possĂ­vel.
Um forte abraço.