teste

Início » Blogger » Inserir Menu Horizontal – Linkbar – no seu Blog 62 Inserir Menu Horizontal – Linkbar – no seu Blog Por: Marcos Lemos | Marcadores: Blogger, Layout, Templates 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. Siga o @FerramentasBlog no Twitter e ganhe um E-book GRÁTIS. ATUALIZAÇÃO: O Blogger disponibilizou um sistema completo para editar e modificar templates. Recomendo que veja também: Como criar Template para Blogger – Designer do Modelo 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. Backup no Blogger – seu Blog seguro 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. Template (8) Ferramentas Básico 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: /* Variable definitions ==================== */ 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: 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:

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

E clique em “Salvar Modelo” para que as modificações sejam aplicadas e você possa inserir os links de sua nova barra de links. salvar-modelo-blogger 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”. linkbar-configurar-blogger 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: Mudar cores e fontes do Layout do 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.