Personalizando menu no topo com imagem e caixa de pesquisa

09:06

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 !!!

Você pode gostar também

7 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

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possivel.
Um forte abraço a todos vocês!

Contrate o Blog

Meu blog faz parte do Modatrade


Renata Massa
Renata Massa
Modatrade | A vitrine dos blogs de moda
Modatrade | A vitrine dos blogs de moda