Blogger: Menú de Etiquetas

Boas pessoal! Vamos começar uma nova série aqui em The Katniss Wall com o título Blogger. Com ela vamos tentar mostrar o que aprendemos com a utilização da plataforma blogger para criação e desenvolvimento deste blogue. Espero que gostem e que vos ajude também.



A dica que vos apresento hoje é como fazer um menu horizontal utilizando as Etiquetas (Tags em inglês) como podem ver como exemplo o menú logo abaixo do nome do nosso blogue - The Katniss Wall.

1º Passo: Criação do Widget

Antes de mais nada devemos criar um widget padrão do blogger e só depois o vamos editar a nosso gosto. Então vamos ao menú do blogger e em esquema vamos adicionar uma mini aplicação onde pretendemos que apareça o menú. Então dessa lista escolhemos etiquetas. Agora, temos várias opções a escolher:

 Título - colocamos um título; 

Mostrar - aqui podemos escolher todas as etiquetas ou seleccionar as mais importantes, neste ponto é bom escolher as etiquetas que são mais importantes para que se possa criar um menú resumido com os temas principais do blogue. ATENÇÃO: Estas etiquetas são definidas quando na criação de cada post e são colocadas na opção Etiquetas que aparece do lado direito quando estamos a escrever conteúdo;

Ordenação - Aqui podemos colocar por ordem alfabética ou por ordem de frequência. Aqui é escolher como preferirem.No nosso aparecem por ordem alfabética.

Apresentar - Podemos escolher aqui o modo de apresentação das etiquetas em lista ou em nuvem, no entanto vamos escolher a opção lista para poder fazer um menú.

2º Passo: Colocação do Código Html

Neste passo vou fornecer um código que devem colocar logo abaixo de /* Tabs no modelo do vosso código html. Para isso no menú do blogger vão a modelo (não esqueçam de fazer sempre uma cópia de segurança do vosso modelo html, sempre que não consigam editar bem, voltem a carregar o modelo anterior e voltem a tentar) e escolham editar HTML. 
Agora pressionem no teclado do computador ctrl + f para abrir uma caixa de procura e escrevem: /* Tabs
Logo abaixo dessa linha estará um código que começa por .tabs-inner { o que vão fazer é substituir esse código por este abaixo:


.tabs-inner {
margin: 1em 0 0;
padding: 0;
margin-top: -10px; /*para subir ou descer o menu troque o número*/
margin-left: 0px; /*para afastar o menu para esquerda ou direita troque o número*/
}

.tabs-inner .section {
margin: 0;
}

.tabs-inner .widget ul {
padding: 0;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
}

.tabs-inner .widget li {
border: none;
}

/*Estado normal do menu*/
.tabs-inner .widget li a {
display: inline-block;
padding: 1em 1.5em;
color: #fff; /*cor da fonte*/
font: $(tabs.font); /*fonte*/
border-radius: 5px; /*bordas arredondadas, apague a linha se n quiser*/
line-height: 5px;
padding: 12px;
background: #BA55D3; /*cor do fundo normal*/
margin-left: 21px; /*espaço entre os botões*/
}

/*Estado hover e selecionado*/
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;
background: #FF1493; /*cor do fundo hover/selecionado*/
color: #fff; /*cor da fonte*/
border-radius: 5px; /*bordas arredondadas, apague a linha se n quiser*/
line-height: 5px;
padding: 12px; /*espaçamento interno*/
}

Façam Pré-Visualizar antes de gravar as alterações para ver como ficou, caso dê erro, escolham Limpar edições e voltem a tentar. Certifiquem-se que quando substituem o código não substituem algo que não o código abaixo de /* Tabs

3º Passo: Editar a aparência

Como devem ter verificado o menú que aparece agora no vosso blogue tem as cores e aparência iguais aqui ao nosso, o que podem fazer agora é ir ao código e alterar a forma e cores. Para isso é só ir mais uma vez ao menú do blogger, modelo, editar HTML (não esquecer de gravar um cópia de segurança do modelo Html) procurar(ctrl +f) por /* Tabs e onde tem umas frases em português podem alterar desde o espaçamento, tipo de letra, cor de fundo, arredondamento, etc. É só experimentar e ir vendo com o Pré-Visualizar.

Espero que o texto vos seja claro e vos ajude a melhorar o vosso blogue. Se precisarem de ajuda escrevam nos comentários, estaremos disponíveis para vos esclarecer. Até à próxima!