Tutorial Menu fixo no topo do blog

17:06


  • 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('http://4.bp.blogspot.com/-yCzhuvWH6Bc/Vaa9_DyvS6I/AAAAAAAAAwQ/vF3c-qxLFIM/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="http://1.bp.blogspot.com/-dLwtqsJBFQs/VaaugKsDFYI/AAAAAAAAAvU/e67NlbFdnYc/s1600/face.png" /></a><a href="LINK FEED" imageanchor="1" ><img border="0" src="http://2.bp.blogspot.com/-Hm9CaoDtO14/VaaugOxrDaI/AAAAAAAAAvI/fxbBJA4kh8o/s1600/feed.png" /></a><a href="LINK GOOGLE PLUS" imageanchor="1" ><img border="0" src="http://1.bp.blogspot.com/-rVq4KWO67t4/VaaugGBCTEI/AAAAAAAAAvM/M7WTLtgjo4M/s1600/gplus.png" /></a><a href="LINK INSTAGRAM" imageanchor="1" ><img border="0" src="http://1.bp.blogspot.com/-OLZj6iHxhUY/Vaaugr1JAdI/AAAAAAAAAvY/f7z8rzmM6nY/s1600/insta.png" /></a><a href="LINK TWITTER" imageanchor="1" ><img border="0" src="http://3.bp.blogspot.com/-LwZztdNHgaw/Vaaug3NCE3I/AAAAAAAAAvc/k8oXi4XbG7w/s1600/tter.png" /></a><a href="LINK YOU TUBE" imageanchor="1" ><img border="0" src="http://2.bp.blogspot.com/-AtKJmNaNRkY/VaauhDc4gJI/AAAAAAAAAvg/ZDAOw7ijhFE/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

You Might Also Like

0 comentários