Blogueiras: Como fazer menu de categorias com ícones fixo

êeee \o/ tanto vocês pediram que eu finalmente vim aqui ensinar como faz o bendito menu de categorias na lateral do blog! Desde que eu troquei de layout que esse menu e o cabeçalho do blog com duas cores é a sensação e todo mundo pede pra ensinar!
 como logo trocarei de layout, resolvi ensinar tudo que todo mundo sempre acha lindo nele! então por favor se quiserem que eu ensine algo a mais comentem aqui em baixo, nessa postagem mesmo que eu acompanho todos os comentários!
O menu ficará bem parecido com esse:
Para descobrir como se faz é só continuar lendo!


1º esse código exige bastante atenção para que não aconteça nenhum erro, portanto use um blog de testes, principalmente se você não tiver costume de fazer modificações em html. 
é um código grande dividido em duas partes então caso não tenha paciência desista! ou você pode me contratar para fazer para você (use a aba de contato)
3º não me responsabilizo por erros causados por falta de atenção! (porem se precisar de ajuda me mande um e-mail!)
4º utilize programas de edição de textos para alterar o que for necessário no código e cole no blog depois de tudo configurado 
5º gostaria de dizer que os créditos por esse código é todo meu! fiz ele usando meus conhecimentos e observando códigos de redes sociais na lateral do blog (que por sinal é uma das únicas utilidades que as pessoas dão as laterais) Porem deixo livre o uso por designers, blogueiras e quem mais quiser e precisar
Também gostaria de dizer que aceito sugestões de melhoria, por exemplo um efeito houver, falem comigo quem descobrir please :)
1º  você precisará ter em mãos todos os ícones e todas as tags que vocês quiserem, e também precisará organizar todas as postagens da história do blog com tags! por favor, não pule para a parte de personalização sem organizar todos os posts pois lá na frente você precisará do link que une todas as postagens em um mesmo local, e muitas postagens do blog podem se perder pelo caminho, portanto organize com atenção, e crie o abito de utilizar 1 só tag para cada post

Como organizar:

No seu Painel do blogger, procure por Postagens > Todas > Editar >Configurações de postagem > Marcadores > defina uma ou duas palavras para cada postagem de acordo com o assunto que ela aborta > conclua > atualize o post 
Repita o processo até que todos os posts possuam um marcador/tag 
2º HTML: ainda no seu painel vá em modelo > editar html > clique dentro do código e aperte CTRL+ F na barra pesquise por:
 </b:skin> 
 e acima dele cole:
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 40px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 80px;
    height: 70px;  
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;

   
}
ul#navigation .NOMEEXATODATAG a{
    background-image: url(LINK DIRETO DO ÍCONE DO MENU);
 Deixei marcado em vermelho tudo que pode ser modificado de acordo com seu blog e necessidade, e agora explicarei o que cada coisa pode fazer:
*esse código está adaptado de acordo com as necessidades da minha página e pode ser que precise de ajustes*
position: fixed; --> faz com que o menu fique parado exatamente onde você estabeleceu e role com a página exatamente naquele local
top: 40px; --> faz com que o menu suba ou desça em relação ao topo da página (números positivos sobem e números negativos descem
left: 0px; --> faz com que o menu vá para a esquerda ou direita em relação a página do blog (números positivos vão para a direita e números negativos voltam a esquerda 
background-color:#CFCFCF; --> Cor de fundo do menu (oque eu fica por trás dos ícones)
border:1px solid #AFAFAF; --> Borda do fundo do menu (fica nas laterais)

já toda essa parte faz com que as bordas fiquem arredondadas, não mecha se não souber, e apague se quiser que as bordas fiquem quadradas:
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;        
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;        
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
Onde está escrito NOMEEXATODATAG você deve trocar pelo nome usado na categoria do blog, letras maiúsculas e minusculas diferenciam, assim como espaço entre as palavras faz com que o código não seja lido
e onde está escrito LINK DIRETO DO ÍCONE DO MENU você deve trocar pelo link dos ícones já hospedados com o tamanho e cor já escolhidos aqui no blog eu uso 55x55 px e cabem 8 ícones (igual a 8 categorias diferentes) e o ultimo fica bem espremidinho essa parte do código deve ser repetida por 8x como cada nome e cada link com as imagens, caso use tamanhos menores que 55x55 px claro, caberão mais ícones
Ex: }
ul#navigation .NOMEEXATODATAG1 a{
    background-image: url(LINK DIRETO DO ÍCONE DO MENU1);
}
ul#navigation .NOMEEXATODATAG2 a{
    background-image: url(LINK DIRETO DO ÍCONE DO MENU2);


até aqui, ainda não será possível notar nenhuma modificação!

2º Parte do código Essa é a parte onde será possível notar o menu no blog!

Ainda no seu painel do blog vá em: Layout > na parte de Crosscol ou Footer-1 > Adicionar um Gadget >
HTML/JavaScript Adicionar
 e cole o seguinte código:
<ul id="navigation">
<li class="nome exato utilizado no html"><a href="link onde encontra-se as postagens de ada categoria" title="titulo a ser exibido ao passar o mouse"></a></li>
</ul>
repetindo o que está em negrito por 8x ou mais de acordo com o que foi definido no html, não se esqueça que o nome da categoria utilizado no html deve ser exatamente igual ao utilizado nessa parte do código sem espaçamentos e acentos também aconselho que seja tudo minusculo. Para procurar seus ícones, utilize sites como o freepik e configure-os no seu photoshop de costume

Eai conseguiu ? caso não, não existe em me enviar um e-mail!(utilize a aba de contato) responderei o mais breve possível. Caso tenha gostado por favor, siga o blog, e não deixe de dar suas opiniões e sugestões 
Obrigada.
Blogueiras: Como fazer menu de categorias com ícones fixo Blogueiras: Como fazer menu de categorias com ícones fixo Reviewed by Eu Vaidosa on 9.2.16 Rating: 5

Nenhum comentário: