Tutorial Menu fixo no topo do blog


  • 1- Você pode conferir o menu online: MENU FIXO, nesse blog está sem a caixa de pesquisa e as redes sociais como na imagem acima, porem vou ensinar com esses elementos e se preferir podem retirar também, o tutorial é bem simples e eu me inspirei nesse tutorial que achei muito bacana, pode ver na imagem abaixo:
  • 2- Vá em " Layout">>Adicionar um Gadget e escolha HTML/JavaScript;
  • 3- Cole o seguinte Código:

<style>#mymenuda {background: #363636; /* Cor do background */border-left: 200px solid #363636; /* Tamanho e cor da borda - não retire pois ela centraliza o menu */width: 100%;height: 32px;position: fixed;top: 0;left: 0;z-index: 9999; }#mymenu {background: #fff; /* Cor da fonte */font-family: &#39;Arial&#39;, corsiva; /* Nome da fonte */font-size: 20px; /* Tamanho da fonte */text-transform: captalize; }#mymenu li {list-style-type: none;display: inline;float: left; /* Posicionamento do menu */padding: 0px;}#mymenu li a {color: #fff;text-decoration: none;padding-right: 24px;line-height: 37px;}#mymenu a:hover {color: #EED5D2; /* Cor da fonte em hover */}#mymenu ul {list-style: none;margin: 0;padding: 0; background: #fff;margin-left: 40px;}#mymenu li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 120px;padding-left: -40px;}#mymenu li ul a {font-size: 12px;line-height: 24px;}#mymenu li:hover ul ul, #mymenu li:hover ul ul ul, #mymenu li.sfhover ul ul, #mymenu li.sfhover ul ul ul {left: -999em;}#mymenu li:hover ul, #mymenu li li:hover ul, #mymenu li li li:hover ul, #mymenu li.sfhover ul, #mymenu li li.sfhover ul, #mymenu li li li.sfhover ul {left: auto;}#mymenuright {float: right;color: #fff;}/* BARRA DE PESQUISA */
.search{
float: left; /* Flutuando a esquerda */
font-family: Georgia, Tahoma; /* Nome da fonte */
}
.searchbar{
margin-top:7px;
height: 14px;
width: 240px;
color: #ccc; /* Cor da fonte */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo */
}
.searchbut{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjQ-c4mzrF2bCE2NUDawGWhiows0jf-fnq830Lu6-w_hydXM_ICCKJ_fvdT-sVRmRpII7OkvjLR7SeWfvUdbVK1qDJZSnCzrnsjzGEsnt1fWob48MerkFvnBZprcsW1TnNR7q1-wDbsWg/s1600/2evyidy.png'); /* Link da imagem do botão de pesquisar | tamanho: 20x20px */
width:20px;
height:20px;
border: 0;
margin:6px;
}
</style><div id="mymenuda">
<div id="mymenu">
<li><a href=" Link ">Texto Link</a></li>
<li><a href="Link ">Texto Link</a></li>
<li><a href=" Link ">Texto Link</a></li><li><a href=" Link ">Texto Link</a></li><li><a href=" Link ">Texto Link</a></li></div><form action="/search" class="search" method="get"><input class="searchbox" id="s" name="q" type="text" value="" /><input class="but" type="submit" value="" /></form><a href="LINK FACEBOOK" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3XazGOqXtoFhXFHpY-QqlEF-YjV8JcrUpWjh707M62gG-R2GvBYkQKc-I1SCmlTdg9jxrHYSwP8myaQwGgfFESL2y0P7Jlvhql7wMQUJdswJtNb0WoFARLAneU5g0GaY9y-zDrNbmL40/s1600/face.png" /></a><a href="LINK FEED" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghU3MxWbYLW2fGAHMG-W4n2i9K2J9qRc8IxUKrkteoy4M3qA2xLlo6reZkQrSpa14zedfJW49rhRQGIq9rXoVg6niTtxJEC9TCtuFnaQ7ulLn232cMJR0ESVpwenxMw-TgRkcGi78xLd8/s1600/feed.png" /></a><a href="LINK GOOGLE PLUS" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn9_bQA-yI2nKbpoqkz_htjwAtSt0K9dU7-HTkZ0yXnD9n3GFrYSnhHdMy2RMX3giU-r6E2ktJoi38infffNeZ3mYWw9JCQCE3pdDMYUoA3INZW9_QTXIlJ8hcDvzePL6e_MS_IwcOJI8/s1600/gplus.png" /></a><a href="LINK INSTAGRAM" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrDdXkSg1B_jbFz4m39l68I2u8Z1oufwlt2yNb6KnCW1HoidUsWV57DcS0GQFNHWLCOugZZAEpfojTiJiZ8dWRAjea3UWBYCdHlveXfvGDioJEr0evGEzJw_z8lzAHf0C1v37JZYpYsMo/s1600/insta.png" /></a><a href="LINK TWITTER" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWHzW_gyaHOnF2bPUknDLMWnwFVSli84w7UL6Ri3id6UNu4A0iXb4OFiuSBP4gyYDya_zdri3BjdRTUbmQB7yInPQR5UJ43RzJd5gNzl1hQmsikSYLCRp0KAY_opwi_RlpzeUbHLfZ3L8/s1600/tter.png" /></a><a href="LINK YOU TUBE" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIUOq9MPulLwlOJOfsdws3SrU-EwaNmcTOF0iXQ3NtQROMlezJtPBh0StzFQyP_E0zxqLoyJI916VQkymZ2iGyJEPudGrIDecHDpXV3MlSk8pWwAwEl8y7KmDoHrzxnXgkptYBlr5io6Q/s1600/yuo.png" /></a></div></div>

  • 4- Obs: Os lugares em vermelho é onde você deve modificar;
Ex:

  • Links do menu 
    Link: é o link do texto que será exibido ou da home do seu blog ou qualquer outra página.
    Texto Link: é o testo que será exibido no menu.

    Redes sociais  
    LINK FACEBOOK: é o link do seu perfil ou fanpage do facebook.


  • 5- Agora personalize do seu jeito! Beijos

Um comentário