.

sexta-feira

Textual description of firstImageUrl

Menu Black Personalizado Com Caixa de Pesquisa No Topo do Blogger - Exclusivo

ACESSOS:
Deixe seu comentário


Já soube de muitas pessoas que queriam um menu preto que acompanhasse a rolagem do blogger. E, com um pouco de trabalho, desenvolvi este menu. Coloquei uma caixa de busca no canto da barra para ficar mais fácil para o leitor. Espero que gostem!!!




Você pode ver uma demonstração do código, clicando no botão abaixo:



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

]]></b:skin>

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

/*************** MENU DO CABEÇALHO BY DICASHOT ***************/
#DicasHotMenu {
width: 100%;
height: 60px;
font-size: 15px;
font-family: PT Mono, Arial, Tahoma, Verdana;
margin-top: 0px;
padding: 0;
background: #000;
position:fixed;
z-index:2000;
text-shadow: 1px 1px 1px #ccc;
}
#NavbarMenuleft {
float: left;
margin: 10px;
padding: 0;
}
#NavbarMenuright {
width: 270px;
font-size: 10px;
float: right;
margin: 10px;
text-align: right;
padding-top: 6px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
.search{
float: left;
text-align: center;
font-family: Century Gothic !important; /* Fonte do campo de texto*/
}
.searchbar{
border-radius:4px;
border: 2px solid #4c4c4c;
background:#2c2b2b;
text-align:center;
color:#6e6e6e;
font-size:12px;
width: 220px; /* largura caixa de pesquisa */
height: 20px;/* altura caixa de pesquisa */
margin-top: -10px;
margin-right: 5px;
}
.searchbut{
background: url(&#39;http://1.bp.blogspot.com/-dnlnbeL27eo/UalfyAz3Y_I/AAAAAAAAF-c/6AOP0094RpM/s1600/search.png&#39;);
width:20px; /*Largura do botÃ&#163;o*/
height:20px; /*altura do botÃ&#163;o*/
border: 0;
padding:2px;
cursor: pointer;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #fff;
display: block;
font-size: 15px;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 10px 15px 8px;
text-transform: uppercase;
}
#nav li a:hover, #nav li a:active {
color: #000;
margin: 0;
padding: 10px 15px 8px;
text-decoration: none;
text-shadow: 1px 1px 1px #fff;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
width: 150px;
color: #FFF;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 7px;
border-bottom: 1px solid #959595;
border-left: 1px solid #959595;
border-right: 1px solid #959595;
background-color: #1c7bbb;
}
#nav li li a:hover, #nav li li a:active {
color: #FFF;
padding: 7px 10px;
background-color: #1c7bbb;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
.logo {
background: url(&quot;https://lh6.googleusercontent.com/-1AnCUXwg5Wo/UAtMzUmxe1I/AAAAAAAACaw/xY2wKiAIQ-Q/s49/menu_line.png&quot;) no-repeat scroll right 5px transparent;
float: left;
height: 44px;
overflow: hidden;
padding: 5px 15px 0 0;
}

Agora, procure pela tag


</head>

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


<div id="DicasHotMenu">
<div id="NavbarMenuleft">
<ul id='nav'>
<a class='logo' href='http://dicashot.blogspot.com.br/'><img alt='DicasHot' src='http://1.bp.blogspot.com/-7qbz1PfWCwU/UpTUFhiMGSI/AAAAAAAABm0/dlKjoiRoLV4/s1600/DicasHot.png'/></a>
<ul id="nav">
<li><a href="#">EDITAR</a></li>
<li>
<a href="#">EDITAR</a>
</li>
<li>
</li>
<li><a href="#">EDITAR</a></li>
<li><a href="#">EDITAR</a></li>
<li><a href="#">EDITAR</a></li>
</ul>
</div>
<div id="NavbarMenuright">
<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Pesquisar&quot;;}" onfocus="if (this.value = &quot;Pesquisar&quot;) {this.value = &quot;&quot;}" size="25" type="text" value="Pesquisar" />
<input class="searchbut" type="submit" value="" /></form>
</div>
</div>

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

Deixe seu comentário.

Cursos On-line 24 Horas - Educação a Distância de Qualidade
Valeu por Sua Visita, volte sempre!!!


 
.