Como Inserir Menu Horizontal - Link Bar

Muitos gostariam de aprender a modificar seus templates (layouts) do Blog ou mesmo como fazer pequenas modificação para melhorar o modelo que já usam e gostam. Uma coisa muito importante em um blog é a sua navegabilidade e o destaque para os links principais de seu conteúdo e Marcadores. Uma forma muito eficaz para facilitar a vida de quem visita seu blog é usar um menu horizontal (linkBar) no topo da página, bem próximo ao cabeçalho.

Não costumo colocar aqui no [ Ferramentas Blog ] tutoriais tão avançados para fazer modificações no template. Sempre prezo pela praticidade de recomendar o mínimo de alterações e que todos os blogueiros vasculhem a internet atrás de um layout o mais próximo do desejado. Fazer certas modificações no HTML de seu blog pode ser trabalhoso e o resultado nem sempre é satisfatório quando não se conhece muito desse tal HTML e suas linhas de código.

Por isso, antes de seguir com esse tutorial para aprender a inserir um menu horizontal no seu blog (caso ele não tenha), é fundamental tomar duas medidas de segurança. Essas medidas valem para tudo o que você for fazer em seu blog, mesmo as pequenas modificações:

1. Tenha sempre um blog de testes. Crie um blog só para fazer testes de layout, para aprender e entender o HTML e saber como usar novos gadgets, modificar cores, entre outras necessidades que podem surgir. Com este blog você pode ver os resultados antes de aplicar em seu blog original e aprende um pouco mais, sem se arriscar a perder um trabalho já bem feito.

2. Faça backup de seu layout e artigos. Uma prática pouco comum entre os blogueiros é salvar uma cópia de segurança de seus blogs. Por isso aprenda como fazer isso e faça backups regularmente de todas as partes de seu blog. É bem simples e temos aqui um tutorial completo que conta até mesmo com um vídeo-tutorial.

Feito isso, agora vamos aprender como inserir um menu horizontal em seu blog. O que vem a seguir é um modelo pronto e que pode ser adaptado à maioria dos templates. Tem as cores personalizáveis pelo painel do Blogger, sem precisar mexer nos códigos e as suas dimensões (largura e fontes) também podem ser remodeladas.

Obs.: Não vou explicar para que serve cada código – até porque nem sei explicar bem para que serve tudo. É importante só modificar o que for indicado e seguir os passos corretamente. O objetivo desse tutorial não é ensinar a criar templates, nem como fazer modificações. É apenas para acrescentar melhorias objetivamente.

Inserindo um Menu Horizontal (Linkbar) no Template.

O Menu Horizontal é também conhecido por Linkbar ou barra de links linear e para começar, veja o resultado final no template que temos aqui e que você pode baixar para o seu blog. Lembrando que as cores e fontes são modificáveis, bem como a largura do menu.

Agora, vá no painel do seu blog, para “Design” ~> “Editar HTML” e clique em “Expandir modelos de widgets”, conforme a figura.

Primeira Parte: Inserindo as Variáveis.

Esse código vem logo no início de seu blog e é o que determina a configuração de cores e fontes. Procure pelo seguinte linha, logo no início:

Se isso existe em seu código, será logo abaixo da marcação “/* Variable definitions” que você vai inserir os códigos das variáveis do menu horizontal. Aí já devem existir outras variáveis de seu template que devem permanecer. Assim, insira as linhas abaixo, por inteiro, sem o que estiver indicado em vermelho.

/* Variable definitions

====================

<Variable name="linkbarbgColor" description="Linkbar Cor de fundo"

type="color" default="#C94093" value="#cccccc">

<Variable name="linkbarBorderColor" description="Linkbar Cor do separador"

type="color" default="#9D1961" value="#ffffff">

<Variable name="linkbarTextColor" description="Linkbar Cor do Texto"

type="color" default="#ffffff" value="#333333">

<Variable name="linkbarHoverBgColor" description="Linkbar Cor de fundo Hover"

type="color" default="#ffffff" value="#ffffff">

<Variable name="linkbarHoverTextColor" description="Linkbar Cor do Texto Hover"

type="color" default="#9D1961" value="#333333">

<Variable name="linkbarTextFont" description="Linkbar Fonte do Texto"

type="font"

default="normal normal 77% Verdana, sans-serif"

value="normal bold 88% Arial, sans-serif">

<Variable name="contentBorderColor" description="Linkbar Cor da borda"

type="color" default="#9D1961" value="#ffffff">

*/

Agora, se o seu código-fonte não tem a marcação indicada, copie todo o código acima, até com o texto em vermelho, e cole abaixo da seguinte linha que está no início do código:

<b:skin><![CDATA[

Se não é o caso, então, agora siga para o segunda parte.

Segunda Parte: Inserindo o Código CSS.

Essa parte de seu código-fonte é que determina como cada parte vai funcionar em conjunto com as outras e qual o lugar e função de cada. Então já estamos agora inserindo a Linkbar.

Procure por:

]]></b:skin>

E imediatamente ANTES disso, cole essas linhas:

/* -----   LINKBAR   -----  */

#linkbar {

margin: 6px 0px 0px 0px;

padding: 0px 0px 0px 0px;

width: 100%;

position: relative;

background: $linkbarbgColor;

border: 1px solid $contentBorderColor;

border-bottom: 0;

}

#linkbar ul {

margin: 0px 0px 0px 0px;

padding: 5px 5px 7px 5px;

text-align: left;

list-style-type:none;

}

#linkbar li {

display: inline;

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

}

#linkbar h2 {

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

display: none;

visibility: hidden;

}

#linkbar a {

clear: both;

margin: 0px -4px 0px 0px;

padding: 3px 20px 3px 20px;

width:100%;

text-decoration:none;

font: $linkbarTextFont;

color: $linkbarTextColor;

border-right: 1px solid $linkbarBorderColor;

}

#linkbar a:hover {

color: $linkbarHoverTextColor;

background: $linkbarHoverBgColor;

}

Aqui é que está determinada a largura do menu e isso é automaticamente feito, pois esse código se molda à largura padrão do seu blog. Por isso, não há nada que mexer nessa parte e mantenha a marcação, pois ajuda a encontrar o código, se for preciso.

Terceira Parte – O código HTML

Nessa que já é a última parte, é preciso encontrar o local onde o Menu Horizontal deve aparecer em seu blog. Recomendamos aqui que seja colocado abaixo do cabeçalho. Dessa forma, procure por algo semelhante a isso em seu código-fonte:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=Nome do seu blog (Cabeçalho)' type='Header'/>
</b:section>
</div>

Essas linhas são o cabeçalho do seu blog e pode ser um pouco diferente; abaixo disso, colo o seguinte:

<!-- Linkbar início -->
<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'/>
</b:section>
</div>
<!-- Linkbar final -->

Adicionando Links, modificando cores e fontes e vendo o resultado.

Para ver tudo funcionar perfeitamente é preciso que você insira os links que deseja que apareçam no novo Menu Horizontal de seu blog. Para isso, basta ir em “Layout” ~> “Elementos da página” e você já verá a Linkbar adicionada, semelhante ao indicado na imagem, então, clique em “Editar”.

Na janela que abrir, quando se clica em “Editar”, basta adicionar os links com o nome e a URL que deseja que apareçam neste novo menu horizontal. Podem ser adicionados quantos links quiser, mas sempre observando o limite de largura de seu blog. Por fim, clique em “Salvar”.

Já pra modificar cores e fontes é bem simples e basta clicar no menu “Layout” ~> “Fontes e Cores”, seguindo os passos básicos. Se você não está familiarizado com esta função do Painel do Blogger, veja o seguinte tutorial que mostra passo-a-passo como fazer tais mudanças em seu blog:

Tudo isso feito e percorrido todo este caminho, basta verificar o resultado em seu blog. Como disse no início, é fundamental fazer testes e ter um backup de seu blog para evitar sustos e se familiarizar com os códigos e as modificações necessárias. Não faça nada correndo e tenha paciência. Essa é uma modificação complexa para seu blog e precisa muita atenção.

Espero que ajude os blogeuiros a fazer tal melhoria em seus blogs e tentarei colocar mais artigos com modificações como essa para templates.

Posted in: Dicas Para Blog,Tutoriais