Menu Black Personalizado Com Caixa de Pesquisa No Topo do Blogger - Versão #2 - Exclusivo
Nesta postagem compartilho com você este menu black diferente do que já havia mostrado em uma postagem mais antiga.
Espero que gostem!!!
Veja uma demonstração do menu.
Como você pode ver na demonstração, o menu é bem bonito.
Torne-se membro do site, basta clicar no botão abaixo e clicar em Seguir:
Para coloca-lo no blogger.... é bem simples mesmo... Entre em "Modelo" - "Editar HTML" e procure pela tag
<body>
Ou
<body expr:class='"loading" + data:blog.mobileClass'>
Tendo encontrada a tag, cole ACIMA dela o seguinte código
<style> #menudicashot { background: #000000; border-left: 200px solid #000000; /* tamanho da borda e cor- não retire pq ela centraliza o menu */ width: 100%; height: 35px; position: fixed; top: 0; left: 0; z-index: 9999; } #config { background: #fff; /* cor da fonte */ font-family: Georgia; font-size: 14px; /* titulo da fonte */ text-transform: uppercase; } #config li { list-style-type: none; display: inline; float: left; /* posicionamento do menu */ padding: 0px; } #config li a { color: #fff; text-decoration: none; padding-right: 24px; line-height: 35px; } #config a:hover { color: #646B36; /* cor do link da fonte em hover */ } #config ul { list-style: none; margin: 0; padding: 0; background: #fff; margin-left: 40px; } #config li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 120px; padding-left: -40px; } #config li ul a { font-size: 12px; line-height: 24px; } #config li:hover ul ul, #config li:hover ul ul ul, #config li.sfhover ul ul, #config li.sfhover ul ul ul { left: -999em; } #config li:hover ul, #config li li:hover ul, #config li li li:hover ul, #config li.sfhover ul, #config li li.sfhover ul, #config li li li.sfhover ul { left: auto; } #mymenuright { float: right; color: #fff; } /* BARRA DE PESQUISA */ .search{ float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */ font-family: Georgia, Tahoma; /* Fonte da letra que será escrita quando procurarmos por algo */ } .searchbar{ margin-top:7px; height: 15px; width: 240px; color: #ccc; /* Cor da fonte da letra que será escrita quando procurarmos por algo */ -moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde escrevemos */ } .searchbut{ background: url('http://cdn1.iconfinder.com/data/icons/Snow/Snow/snow/Search.png'); /* Link/Url da imagem do botão de pesquisar | tamanho: 30 x 30px */ width:30px; height:30px; border: 0; padding:7px; } </style> <div id="menudicashot"> <div id="config"> <li><a href="http://dicashot.blogspot.com/">EDITAR</a></li> <li><a href="http://dicashot.blogspot.com/">EDITAR</a></li> <li><a href="http://dicashot.blogspot.com/">EDITAR</a></li> <li><a href="http://dicashot.blogspot.com/">EDITAR</a></li> <li><a href="http://dicashot.blogspot.com/">EDITAR</a></li> <li><a href="http://dicashot.blogspot.com/">EDITAR</a></li> <li><a href="http://dicashot.blogspot.com/">EDITAR</a></li> <li><a href="http://dicashot.blogspot.com/">EDITAR</a></li> </div> <form action="/search" class="search" method="get"> <input class="searchbar" id="s" name="q" type="text" value="" /> <input class="searchbut" type="submit" value="" /> </form> <div id="mymenuright"> </div> </div> <div class="clear"> </div>
Tendo colado o código, basta salvar e pronto!!!
Deixe seu comentário.
