Menu Transparente Rosa Personalizado No Topo do Blogger - Versão #2

Já havia mostrado em tutoriais passados um menu semelhante a esse, porém, de cor preta também fixado no topo da página e de acordo com o descer do mouse o menu o acompanha descendo a página. Isso facilita muito um destaque de alguns links. Se por exemplo você quer destacar no menu "parceria" por exemplo ficará mais fácil a visualização do link, isso porque o menu irá descer de acordo com o mouse.

Torne-se membro do site, basta clicar no botão abaixo e clicar em Seguir:

Veja uma demonstração do menu: http://teste3dicashot.blogspot.com.br/

Para coloca-lo no blogger.... é bem simples mesmo... Entre em "Modelo" - "Editar HTML" e procure pela tag

]]></b:skin>

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

/*************** MENU DO CABEÇALHO BY DICASHOT ***************/
.menux{background: url(http://static.tumblr.com/8buytvw/BIxlyewab/backtrans.png); height:50px; position: fixed;
top: 0px; left: ; display: block; width:100%; z-index:1; border-bottom: 1px solid #fff ; -webkit-box-shadow: 0 4px 5px -5px #b1b1b1;-moz-box-shadow: 0 4px 5px -5px #73b6aa;box-shadow: 0 4px 5px -5px #b1b1b1; text-align:center}
#menudicashot{ width: 1100px; float: center; font-family: joanajoanaa;
font-weight: normal;  text-align: center; text-transform: normal;
font-size: 20px; margin: 15px 0px 0px 130px; -webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear;-webkit-transition-duration: .40s;}
#menudicashot  a {
margin: 0;
color: #222;
box-shadow: none !important;
text-shadow: none !important;
font-family: joanajoanaa;
padding: 6px;
text-align: center;
background: none;
text-decoration: none;
display: inline-block;
letter-spacing: 1px;
-webkit-transition: all 0.35s ease;
-moz-transition: all 0.35s ease;
-o-transition: all 0.35s ease;
transition: all 0.35s ease;
padding-bottom:10px;
border-bottom:3px solid transparent;
}
#menudicashot  a:hover {
color: #CF335E !important;
background: none !important;
text-decoration: none !important;
box-shadow: none;
-webkit-transition: all 0.35s ease;
-moz-transition: all 0.35s ease;
-o-transition: all 0.35s ease;
transition: all 0.35s ease;
padding-bottom:10px;
border-bottom:3px solid #CF335E;
}

Agora, procure pela tag

</head>

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

<div class='menux'>
<div id='menudicashot'>
<a href='/' title='DicasHot'> EDITAR </a>
<a href='#' title='DicasHot'> EDITAR</a>
<a href='#' title='DicasHot'> EDITAR </a>
<a href='#' title='DicasHot'> EDITAR </a>
<a href='#' title='DicasHot'> EDITAR </a>
<a href='#' title='DicasHot'> EDITAR </a>
<a href='#' title='DicasHot'> EDITAR </a>
</div>
</div>

Faça as modificações nas partes destacadas do código.

Tendo colado o código, basta salvar e pronto!!!

Deixe seu comentário.