Menu ocultável No Topo do Blogger

► +A +/- -A




Olá Prezados Leitores, no artigo de hoje venho ensinando como colocar um menu ocultável no topo do seu blogger, bem, o menu possui um efeito de transição juntamente com a propriedade Hover. E por isso que ele é ocultável.
Então irei ensinar como Instala-lo em Seu Blog. 


Instalando o Javascript

1. Faça o login no Blogger
2. Depois vá na opção Modelo
3. Depois em Editar HTML
4. E Procure pela seguinte tag:

</head>

5. E Cole o código abaixo, antes da tag que citei acima:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {(function() {//settingsvar fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;var topbarME = function() { $(&#39;#menuopacity&#39;).fadeTo(fadeSpeed,1); }, topbarML = function() { $(&#39;#menuopacity&#39;).fadeTo(fadeSpeed,fadeTo); };var inside = false;//do$(window).scroll(function() {position = $(window).scrollTop();if(position &gt; topDistance &amp;&amp; !inside) {//add eventstopbarML();$(&#39;#menuopacity&#39;).bind(&#39;mouseenter&#39;,topbarME);$(&#39;#menuopacity&#39;).bind(&#39;mouseleave&#39;,topbarML);inside = true;}else if (position &lt; topDistance){topbarME();$(&#39;#menuopacity&#39;).unbind(&#39;mouseenter&#39;,topbarME);$(&#39;#menuopacity&#39;).unbind(&#39;mouseleave&#39;,topbarML);inside = false;}});})();});</script>

Aplicando o Estilo CSS

1. Vá na opção modelo
2. Em seguida na opção Editar HTML
3. E Procure por:

]]></b:skin>

4. E Cole o código abaixo logo acima da tag que citei (]]></b:skin>):


#menuopacity {
border-bottom:1px solid #ECF1EF; /*--Edite borda--*/
background:#151715; /*--Edite cor de fundo--*/
padding:10px 20px;
position:fixed;
top:0;
left:0;
z-index:2000;
width:100%;
}
#menuopacity a:link {
color:#fff;  /*--Edite cor--*/
padding:3px 3px 3px 3px;
border:1px solid #666; /*--Edite borda--*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

5. E Edite as partes que estão de vermelho!

Inserindo o código HTML

1. Vá na opção Modelo
2. Depois na opção Editar HTML
3. Em seguida procure por:

<div id='header-wrapper'>

4. E cole o seguinte código abaixo dele:


<div id='menuopacity'>
<a href='SEU-LINK'>TITULO 1</a>
<a href='SEU-LINK'>TITULO 2</a>
<a href='SEU-LINK'>TITULO 3</a>
</div>

5. Edite as partes de Verde pelo link da página do menu.
Também Edite as partes de Vermelho pelo o titulo do link da página.


6. Caso Queira adicionar mais de uma página, basta adicionar o seguinte código:


<a href='SEU-LINK'>TITULO 3</a>

Tudo Pronto, espero que gostem, qualquer duvida basta comentar. 
► Postagens Relacionadas:

4 Comentários

André disse...

Esse menu é ótimo. Bom demais da conta, ainda mais com o efeito transitório que tem, show. obrigado pelo tuto.

23 de fevereiro de 2012 às 09:25
Caio Vinicius disse...

Concordo com você André. Obrigado você! Até mais.
Abraços.
Caio Vinicius - Tecnoblog

23 de fevereiro de 2012 às 12:29
Gustavo disse...

Tem algum exemplo pra mim ver como é este menu?

11 de agosto de 2012 às 16:36
Caio Vinicius disse...

Olá Gustavo, irei produzir um DEMO do menu, aguarde! :D

11 de agosto de 2012 às 19:23

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!