Elegante Menu Rolante Para Blogger

Nesta postagem venho compartilhar com vocês este menu bem simples. Este menu, alem de ter um efeito bem interessante quando passamos o mouse, também desce conforme vamos rolando à página para baixo, o que torna o menu muito mais indicado para quem gosta de um bom Design.

Para coloca-lo no blogger... Entre em "Modelo" - "Editar HTML", dê um Ctrl + F e procure pela tag

]]></b:skin>

Tendo encontrado a tag, ACIMA dela, cole o seguinte código

#navbar-iframe{height:0;visibility:hidden;display:none}
body{background:#f8f8f8;color:#444;height:100%;font-family: 'Open Sans', sans-serif, Segoe UI,Arial,Tahoma;font-size:13.6px;font-weight:400;line-height:22px;text-decoration:none;margin:0;padding:0}
a,a:link,a:visited{color:#0088b2;text-decoration:none}
a:hover,a:active{color:#666;text-decoration:none}
b{font-weight:600}
h2.date-header{display:none}
.header-wrapper{width:1100px;color:#777;min-height:150px;overflow:hidden;position:relative;z-index:999;margin:0 auto;padding-left:5px;padding-top:48px;}
#header{max-width:330px;float:left;width:auto;overflow:hidden;z-index:999;min-width:260px;margin:0;padding:0}
#header-inner{margin:50px 0 10px;padding:0}
#header h1,#header p{font:42px Open Sans;line-height:24px;color:#484848;padding-bottom:10px;margin:0;font-weight:700}
#header h1 a,#header h1.title a:hover{color:#f07468;text-decoration:none;}
#header .description{color:#aaa;font:12px Open Sans;text-shadow:none;}
#header img{border:0 none;background:none;width:auto;height:auto;margin:-13px auto}
#top-menuwrapper{background: #0088b2;margin-bottom: 8px;-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);box-shadow: 0 0 5px rgba(0,0,0,0.2);height:48px;width:100%;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;}
#top-menuwrap{width:1100px;margin:0 auto;}
#top-menu{width:100%;font-family:'Oswald', Arial, sans-serif;font-size:14px;letter-spacing:.1em;}
#top-menu ul{list-style: none;display:inline}
#top-menu ul li{float:left;}
#top-menu ul li a{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOoQ9gBdsslIR-x7jNSKnl1G6nJ5A-tCYCxZ8RJ3a6q5PHmK0cFZDYe4ZYD9vKZ53RfbtFIKx9TOM0quvB6b4T4X5mDI8h1bq7zGHGydw-ywVl6-YcLo9KLBMdbnxUrJTOnr2otQvjfOM/s10/nav-divider.png) repeat-y right;line-height:20px;padding:15px 20px;color:#c7e4ee;text-transform:uppercase;display:block;text-decoration:none;text-shadow: 0 1px 0 rgba(0,0,0,0.2);-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}
#top-menu ul li a:hover{background:#007a9f;color:#fff}

Agora, procure pela tag

</body>

Tendo encotrado a tag, cole ABAIXO dela o seguinte código

<div id="top-menuwrapper">
<div id="top-menuwrap">
<div id="top-menu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Ajuda</a></li>
</ul>
</div></div></div>

Tendo feito isto, está pronto!!!

Caso queira adicionar mais botões no menu, basta repetir o seguinte trecho antes da tag </ul>

<li><a href="#">NOME</a></li>

Caso queira também modificar a cor do menu, basta modificar o código da cor que está destacado de azul no primeiro código.

Qualquer dúvida, não deixe de perguntar nos comentários abaixo.