Nesse post vou mostrar como inserir a navbar (barra de navegação) acima (do template Revolution Church) no seu blog. Ela ja possui recursos formatados como a caixa de pesquisa e o menu suspenso. Além disso é uma navbar dupla (duas navbars junta, uma em cima e outra em baixo).
Então, mãos a obra!
1 - Primeiramente, vá o código HTML do seu template. Clique em "expandir modelo de widget".
Copie o código CSS abaixo e cole-o no CSS do seu template; antes da tag de fechamento ]] ></b:skin> (local onde aparece a formatação visual do blog) :
1.1 - Se seu template não possui navbar pode colá-lo abaixo de;
#outer-wrapper {
font: $bodyFont;
}
1.2 - Se ja possui navbar, substitua o código CSS da sua navbar pelo código CSS da nova navbar dado abaixo.
#NavbarMenu {
background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgH29MbyHRloaXG11GW345h3-YTJMZakIiS4WM-_0hiPXgDccxX4uaMF5YyflArhOHucuHKfcc_L32nTws-W5QclMfIwchC_ua3i2iBFJkaAL5QN06QorLbSrHmGlxh5CBaDlTtKKAAdQ/s1600/navbar.png);
width: 960px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0;
padding: 0;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#NavbarMenuright {
width: 280px;
font-size: 11px;
float: right;
margin: 0;
padding: 6px 0 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#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: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
}
#nav li a:hover, #nav li a:active {
background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkm1SzUivbJ8SAdGmiHZlksmbGAGxQoLsSNqIPRQQmkIdPrvgqtLHMbqNE6pq61gWXQGm0n5W-A4iWRqwMxxQiFkScRfZ5s4caJRu-b5GQ3uqF21sZg84OivCnc1V26vUxbok0HU8Ec3o/s1600/navhov.png);
color: #FFF;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #555;
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 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
background: #777;
color: #FFF;
padding: 7px 10px;
}
#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;
}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE !important;
width: 220px;
color: #202020;
font-size: 12px;
font-family: Georgia, Times New Roman, Trebuchet MS;
font-weight: normal;
margin: 0;
padding: 4px 0 3px 5px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;
}
#searchbutton {
background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3TZXRgJrkxbhCc0X8UUUUvLixKdzxhWI3t65PXEh4dX7mIAECQsAGXDsavk6napVW1UKXl9eyCl6J-Zj7lCKftH3x9GD8ktygmO5zfUv4neN3Rux_6EHldwIQm7-1m3jdqYtX45owedo/s1600/topnav.png);
color: #FFF;
font-size: 11px;
font-family: Georgia, Times New Roman, Trebuchet MS;
margin: 0 0 0 5px;
padding: 3px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
#subscribe {
margin: 0;
padding: 5px 0 0;
overflow: hidden;
}
#subbox {
background: #EEE !important;
width: 200px;
color: #202020;
font-size: 12px;
font-family: Georgia, Times New Roman, Trebuchet MS;
font-weight: normal;
margin: 5px 0 0;
padding: 3px 0 3px 5px;
border-top: 1px solid #666;
border-right: 1px solid #DDD;
border-left: 1px solid #666;
border-bottom: 1px solid #DDD;
display: inline;
}
#subbutton {
background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3TZXRgJrkxbhCc0X8UUUUvLixKdzxhWI3t65PXEh4dX7mIAECQsAGXDsavk6napVW1UKXl9eyCl6J-Zj7lCKftH3x9GD8ktygmO5zfUv4neN3Rux_6EHldwIQm7-1m3jdqYtX45owedo/s1600/topnav.png);
color: #FFF;
font-size: 11px;
font-family: Georgia, Times New Roman, Trebuchet MS;
margin: 0 0 0 7px;
padding: 3px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
#name, #email, #url {
background: #EEE !important;
width: 250px;
color: #202020;
font-size: 12px;
font-weight: normal;
margin: 5px 0 0;
padding: 3px 0 3px 5px;
border-top: 1px solid #666;
border-right: 1px solid #DDD;
border-left: 1px solid #666;
border-bottom: 1px solid #DDD;
display: inline;
}
#submit {
background: #7B7B7B;
color: #FFF;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
margin: 0;
padding: 3px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
#words {
background: #EEE;
width: 460px;
color: #202020;
font-size: 12px;
font-weight: normal;
margin: 5px 0 0;
padding: 3px 0 3px 5px;
border-top: 1px solid #666;
border-right: 1px solid #DDD;
border-left: 1px solid #666;
border-bottom: 1px solid #DDD;
display: inline;
}
#subnavbar {
background: #666;
width: 960px;
height: 24px;
color: #FFF;
margin: 0;
padding: 0;
}
#subnav {
margin: 0;
padding: 0;
}
#subnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#subnav li {
list-style: none;
margin: 0;
padding: 0;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFF;
display: block;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
margin: 0 5px 0 0;
padding: 6px 13px;
}
#subnav li a:hover, #subnav li a:active {
background: #888;
color: #FFF;
display: block;
text-decoration: none;
margin: 0 5px 0 0;
padding: 6px 13px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #666;
width: 140px;
float: none;
margin: 0;
padding: 6px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#subnav li li a:hover, #subnav li li a:active {
background: #888;
margin: 0;
padding: 6px 10px;
}
#subnav li {
float: left;
padding: 0;
}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#subnav li ul a {
width: 140px;
}
#subnav li ul ul {
margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover {
position: static;
}
2 - Agora, a partir da tag <bady> encontram-se os códigos na posição em que aparece no blog . Ou seja, é a estrutura do seu blog.
Aqui, vamos procurar (Ctrl+F) por:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Gestor Empreendedor (Cabeçalho)' type='Header'/>
</b:section>
</div>
E colar abaixo do código acima, o seguinte código (As marcações em vermelho estão em inglês, representam o nome do link. Formate da maneira como desejar):
* Lembre-se de adequar a id da sua antiga navbar à nova. Ex.: Se, depois de bady, a navbar era identificada por <div id="navbar"> , substitua pela nova identificação da navbar <div id='navbarmenu'>. Ou, simplesmente, cole a nova navabar inteiramente em cima do código da antiga.
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='#'>Sample Page</a>
<ul>
<li>
<a href='#'>Sub Page #1</a>
<ul>
<li><a href='#'>Sub Sub Page #1</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul>
</li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
<li><a href='#'>Sub Page #4</a></li>
<li><a href='#'>Sub Page #5</a></li>
</ul>
</li>
<li><a href='#'>Sample Post</a></li>
<li><a href='#'>Blog Page</a></li>
</ul>
</div><div id='NavbarMenuright'>
<form action='/demo/church/index.php' id='searchform' method='get'> <input id='searchbox' name='s' onblur='if (this.value == '') {this.value = 'Search this website...';}' onfocus='if (this.value == 'Search this website...') {this.value = '';}' type='text' value='Search this website...'/> <input id='searchbutton' type='submit' value='GO'/></form>
</div>
</div><div style='clear:both;'/>
<div id='subnavbar'>
<ul id='subnav'>
<li>
<a href='#'>Community Events</a>
<ul>
<li>
<a href='#'>Sub Category #1</a>
<ul>
<li>
<a href='#'>Sub Sub Category #1</a>
</li>
<li>
<a href='#'>Sub Sub Category #2</a>
</li>
<li>
<a href='#'>Sub Sub Category #3</a>
</li>
</ul>
</li>
<li>
<a href='#'>Sub Category #2</a>
</li>
<li>
<a href='#'>Sub Category #3</a>
</li>
</ul>
</li>
<li>
<a href='#'>Conferences</a>
</li>
<li>
<a href='#'>Get Connected</a>
</li>
</ul>
</div><div style='clear:both;'/>
Pronto. Agora você tem no seu blog, uma navbar personalizada e cheia de recursos igual a do Dicas Plugins.
Dúvidas? Pergunte nos comentários.
38 comentários:
muito bom o tutorial, tava procurando já tinha um bom tempo
Vlw pela ajuda
Amigo sei que aqui não é lugar certo..
Tem como vc ajudar? Como colocamos widgets dos mais acessados do nosso blog
Abraços
Amigo, os mais acessados é manual e depende de você mesmo ir atualizando.
Não existe ainda uma widget para mais acessados, pelos menos não conheço. No UsuárioCompulsivo, por exemplo, ele faz os mais acessados manualmete conferindo quais posta são mais acessados através do Adsense e colaca uma widget na forma de lista de links.
As suas dicas são sempre boas! Passa lá no blog, tem um selo pra ti.
Sempre uso teu blog pra tirar algumas dúvidas sobre algo que quero fazer. Agora estou necessitando de submenus em minha navbar ja colocada, queria apenas colocar submenus ou na minha própria. Fui tentar entender e nào entendi como fazer isso no 1o passo em: "Copie o código da caixa de texto abaixo e cole-o no CSS (local onde aparece a formatação visual do blog".
E outra coisa, preferia o outro template. Este é meio confuso e complicado. Muito poluído. O primeiro era mais simples.
Valeu, abraços!
Em breve vou criar um post separado somente de como adicionar submenus à navbar.
amigo, nao entendi nada dessa barra, aonde fica o lugar pra por os links ? o.o
existem navbars automáticas em que vc adiciona uma lista de links em elementos de páginas, mas esta você deve adicionar através do código HTML do seu template.
No tutorial acima é onde tem Subpage #1 etc... e Smaple page, etc...
Pedido: cara tem como colocar a linkbar do template debaixo do cabeçalho?
por exemplo: a minha la no layout ela fica em cima do cabeçalho, nao tem como por para baixo né?
Tem sim. Você deve fazar as alterações a partir de (body).
Exemplo:
se no seu template a div navbar vem antes da div header na parte de estrutura do blog (a partir da tag body), recorte-a e cole depois.
Para visualizar melhor a estrutura, NÃO expanda modelos de widgets. Vc vai identificar mais facilmente do que é que estou falando.
sorry amigo mais essa navbar dupla não funciona.
veja um exemplo nesse site:
www.blogtestejb.blogspot.com
debaixo do cabeçalho :o
A sim. Aquele código CSS da caixa de text estava com problemas.
Já substituí e testei. Utiliza o novo código CSS que coloquei. Funcionou corretamente.
Looollll aqui vai como editar esta barra, você não soube colocar.
Antes de cada palavra que aparece tem a tag href='#'
No lugar de # você coloca o link para onde a palavra vai redirecionar...
espero ter ajudado hein ;D
lembrando: Sou o Equipe! :o
Infelizmente essa navbar eh muito fraca, ela não aceita letras maiusculas nem acentos
da uma olhada de como ela fica linkada
www.blogtestejb.blogspot.com
;D
OBS: o link pra download desse template n funca
Link atualizado para o template Revolution Church
JakRed, isso tudo é uma questão de personalizar o código CSS do navbar. Existem várias alterações que podem ser feitas.
Por exemplo, procure por text-transform: uppercase; e delete-o que será possível aterar as letras na subnavbar (a de baixo). Altere todos os text-transform.
Ow me tira uma duvida ai
como tira o sublinhado????
;D
Encntre esse código:
#topnavbar a:hover {
text-decoration: underline;
}
E delete-o por completo. Hover, em html, significa quanto mause está sobre o link.
Ou procure, simplesmente por:
a:hover {
text-decoration: underline;
}
e delete-o, é o hover do blog em geral.
não achei essas tags
#topnavbar nao tem
e a:hover { seguido de text-decoration n tem tbm
achei um site com o teu template revolution
fã site oficial de habbo
www.habboact.net
me ensina a tirar o adsense do banner?? nesse template???
akele do habboact ta todo editado muito bom...
consegui, ow como coloca imagens do lado de cada nome nessa barra???
veja um exemplo nesse site que usa o msmo template:
www.HabboAcT.net
agraeço se souber
Simples amigo. Veja:
(img src='linkdaimagem' width='largura' height='altura'/) Sample PageAssim a imagem tbm será um link, mas pode colocar também antes de (a href...
Simples amigo. Veja:
(a href='#')(img src='linkdaimagem' width='largura' height='altura'/) Sample Page (/a)
Assim a imagem tbm será um link, mas pode colocar também antes de (a href...
Sobre o adsense do banner, é só vc procurá-lo no código html do template e deletá-lo.
Como eu coloco adsense nakeles banners que ja vem pronto no template revolution??
Agradeço
Olá amigo
utilizo o template Revolution Church em meu blog (http://eldersacalcunha.blogspot.com)
e gostaria de saber como configurar o menu suspenso da navbar. Gostaria de efetuar a mudança dos títulos e como linkar as postagens?
Grato
Elder
Olá amigo tudo bem?
Tenho uma dúvida, Na hora de configurar a Busca do blog ele não encontra a pagina o que devo fazer ? Obrigado e parabéns pelo Blog ;)
Exilia, para configurar a busca, vc deve copiar e colar um código de busca de blogs no local apropriado. Para isso, vá na categoria "Caixa de Busca" do Dicas Plugins e copie e formate o código que desejar. Após isso, cole no local da navbar.
(div id='NavbarMenuright')
---código de busca aqui----
(/div)
ahh ta é porque esse template vem com uma caixa de busca padrão neh ? vou fazer o que você disse muito Obrigado Willian e desculpe a demora a responder....
Uma outra coisa aqui, nesse template tem como tirar esse preto encima e colocar uma banner do tamanho dele ? exemplo.
http://img134.imageshack.us/img134/9211/imagemkpz.jpg
Como pode ver na imagem eu coloquei uma bannerzinha só pra tapa o buraco ali mais eu queria colocar uma banner grande do tamanho da faixa mesmo entendeu ? =/
Exilia, respondido em Template Revolution Church.
Confere lá. Obrigado.
Titio da pra falar a nossa lingua?nao entedi bulhufas!
BB, acerca de quê você não entendeu?
queria saber onde coloco os links. num to dando conta de arrumar ele. alguem ai me ajuda?
como faz pra editar a cor ou adicionar imagem no titulo do gadget?
e também como muda edita essa imagem (B) do navbar?
cara, como eu faço para tira o sublinhado, eu tentei o que você falo lá no comentário do outro, mais o que eu apago com hover? tudo ?.
e tbm queria saber, como faço pra navbar pega o Maiusculo e acentos ?
OI não consegui fazer isso não deu certo no meu blog, faz tempo que quero colocar menus e submenus e não consigo edutá-los depois
cara arruma esse seu blog,postagem de + na pagina início e fica pesado, e tenho net de 1mb.
Postar um comentário
Envie um comentário!