como fazer uma barra de navegação para o seu blog usando uma maneira muito simples

 

Hoje vamos aprender como fazer uma barra de navegação para o seu blog usando uma maneira muito simples para realçar as ligações actuais automaticamente. Este método é muito simples e utiliza apenas tags condicionais do Blogger, por isso não há necessidade de JavaScript.

Vou explicar aqui o método e como fazer um estilo simples para a sua barra de navegação, eu quero dizer muito simples. Cabe a você do jeito que você quer o estilo deles, eu não irei vale o básico de CSS, mas se você seguir este tutorial com cuidado você vai ter a idéia e ser capaz de fazê-lo em qualquer blog.

O que estamos fazendo

Confira aqui a demonstração ao vivo do resultado que vamos alcançar, este é um exemplo muito simples usando o Blogger Template Minima, só para você entender o método.

Passo 1 - Preparação

Como eu disse, eu não vou básico através de CSS e tudo isso, que vamos explicar aqui é o método para obter o resultado necessário, se você entende isso, você será capaz de fazer em qualquer blog.

Vamos aplicar o método em um blog geral usando Minima template, tão rapidamente vá para o Dashboard,criar um novo blog, escolha Minima modelo e fazer 2 posts Chamado de "About" e "Contacto" com alguns dentro Lorem Ipsum. Você deve obter algo semelhante à demonstração ao vivo.

Passo 2 - Ajustando A Cruz Coluna Seção

Este passo não é muito importante para o método, mas como estamos indo adicionar o widget em nossa seção crosscol, vamos ajustá-lo de modo que fique disponível para receber widgets.

Ir para o Dashboard do seu Blog> Layout> Editar HTML> Hit CTRL + F> Encontre class = 'crosscol', e você deve começar assim:

  <Div id = 'estilo crosscol-wrapper' = 'text-align: center'> 
  <B: section class = 'crosscol' id = 'showaddelement crosscol' = 'no' /> 
  </ Div> 

Como você pode notar que você tem essas duas partes em seu código: style = "text-align: center 'eshowaddelement =' não ', o primeiro fazer a nossa widgets alinhar no centro, ea segunda tornar indisponível para adicionar qualquer widget sua seção Page Elements. Portanto, para corrigi-lo, vamos substituir todo o bloco de código para um presente:

  <Div id = 'crosscol-wrapper'> 
  <B: section class = 'crosscol' id = 'showaddelement crosscol' = 'sim' /> 
  </ Div> 

Passo 3 - Adicionando a lista de links Widget

Agora que nós mudamos a seção transversal da coluna, devemos ser capazes de adicionar um novo widget para ele, para isso, vá para a seção Elementos de página, clique em Adicionar um Gadget na seção abaixo de seu cabeçalho.

Escolha lista de links do painel, agora adicionar os seus links aqui, como você pode ver na foto acima, em Novo Site URL inserir o link para seu post, no exemplo eu usei o link para o meu Sobre o post, e em Novo Site nome, o texto que você quer em seu menu. Link Basta clicar em Add para confirmar. Você pode adicionar tantas como ligações como desejassem.

Passo 4 - Dando estilos básicos para o menu

Como eu disse que não vai vale o básico de CSS aqui, então vá para Layout> Editar HTML, e adicionar o código abaixo, à direita antes de ]]></ b: skin>.

  / * Navigation 
  ------------------------------------------------ * / 
  . crosscol. LinkList ul (padding: 0px;) 

  . crosscol. LinkList ul li ( 
  float: left; 
  list-style-type: none; 
  - Margem direita: 1px; 
  ) 

  . crosscol. LinkList ul li a ( 
  border: 1px solid # CCCCCC; 
  padding: 5px 10px; 
  ) 

  . crosscol. LinkList ul li a: hover,. crosscol. LinkList ul li um. actual ( 
  background: # ccc; 
  ) 

Basicamente ele irá fazer suas ligações alinhar horizontalmente, dê uma borda cinza agradável para eles, e fazer o passe e as ligações atuais têm um fundo cinza.

Passo 5 - Ajustando o widget Link List

Agora precisamos fazer o widget Link List comportar-se automaticamente em ligações destacando atual, ao fazer isso, vá para Layout> Editar HTML> Verificar Expand Widget Templates e procure o seguinte código:

  <Div id = 'crosscol-wrapper'> 
  <B: section class = 'crosscol' id = 'showaddelement crosscol' = 'yes'> 
  Bloqueado </ b: widget id = 'LinkList1' = 'false' title =''type = 'LinkList'> 
  <B: includable id = 'main'> 

  <B: if cond = 'data: title'> </ h2> <dados: título> </ h2> </ b: if> 
  <Div class = 'widget de conteúdo'> 
  </ Ul> 
  <B: loop values = 'data: var links' = 'link'> 
  <Li> <a expr: href = 'data: link. Alvo'> <dados: link. / Nome> </ a> </ li> 
  </ B: loop> 
  </ Ul> 
  </ B: include name = 'quickedit' /> 
  </ Div> 
  </ B: includable> 
  </ B: widget> 
  </ B: section> 
  </ Div> 

e substituir o seguinte:

  <Div id = 'crosscol-wrapper'> 
  <B: section class = 'crosscol' id = 'showaddelement crosscol' = 'yes'> 
  Bloqueado </ b: widget id = 'LinkList1' = 'false' title =''type = 'LinkList'> 
  <B: includable id = 'main'> 
  <B: if cond = 'data: title'> </ h2> <dados: título> </ h2> </ b: if> 
  <Div class = 'widget de conteúdo'> 
  </ Ul> 
  <B: loop values = 'data: var links' = 'link'> 
  <B: if cond = 'data: blog. Url! = Dados: link. Alvo "> 
  <Li> <a expr: href = 'data: link. Alvo'> <dados: link. / Nome> </ a> </ li> 
  </ B: else> 
  <Li> <a class = expr 'atual': href = 'data: link. Alvo'> <dados: link. / Nome> </ a> </ li> 
  </ B: if> 
  </ B: loop> 
  </ Ul> 
  </ B: include name = 'quickedit' /> 
  </ Div> 
  </ B: includable> 
  </ B: widget> 
  </ B: section> 
  </ Div> 

Salvá-lo, e está feito.

Alguns créditos

Eu encontrei a solução para este tutorial, quando eu estava indo fazendo uma pesquisas e, perguntei ao meu amigo e ele me ajudou com ele, graças a meu camarada muito obrigado.

Palavras finais

O truque é realmente útil, especialmente quando nós começamos a utilizar o recurso de páginas estáticas.Isso ajudará a melhorar a usabilidade do seu blog e dar aos visitantes um indício de que página eles estão olhando.

 

Technorati Marcas: como,fazer,uma,barra,de,navegação,para,o,seu,blog,usando,maneira,muito,simples