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

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLLBrjVCSPXJuc6lviDw9LiIeQIBCXo7CjvKp5aStaoZPTe_SXMrNyGfB5bVTHJgtQ-mB39H_I63XVS98Q53q0xQvrZTI1ZH41qo5L5a3BhyphenhypheniqspFlFAe9rDc_dwGXb5_u8T6Of1hrxIs/s1600/search.png');
width:20px; /*Largura do botão*/
height:20px; /*altura do botã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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW5a2KTpShe1tF-R5AqxTxlM-NJd4NFtwkpSKoJth6PNcDwbQCkPGyl_f6PFfXAD8xQUSHbyBh4ofZkR3AupJLl7hpoFjxHN1eYji-qHkeMzTTz3M-a1RLAPRyVAjOhq5MHbdt4uHFVg3c/s49/menu_line.png") 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1CVNP_JEV-s0lAGg9eO4lp9ga1zTYrgqCYPekoP_9Eoh1w8WLwVaFcOfX9vqgtlRSOV9qpENN_YhubEqeF3JqBvm4qEeoKG8lwbuHrjh64OFAuG1JWG199MtSi91R5p1W7b1hCdVQB_65/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.