editar e personalizar o menu padrão do blogger

Oi gente , como está os sentimentos today ? Eu to bem , preguiça de editar alguns vídeos e criar as capas das redes sociais para o blog , mas ENFIM vou me encorajar a fazer isso amanhã ( aproveitando que não tem aula , amo muito tudo isso ) . Eu parei a este mês inteiro , porque sei lá estava sem inspiração e o blog não estava funcionando. Assim como as redes sociais não eram mais atualizadas , enfim voltei com tudo.

Parando as enrolações , no post de hoje eu estarei ensinando como programar o menu padrão do blogger. Vou confessar que , quando criei meu primeiro blog não sabia mexer em nada na interface , então resolvi vim fazer este post ensinando tintim por tintim . Para os mais casca grossa , role a página um pouco mais a baixo e vá direto para a parte CSS coisa. Enfim vamos lá ?
ANTES DE COMEÇAR GOSTARIA DE AVISAR QUE ESTE É UM TIPO DE TUTORIAL QUE MEXE COM PARTES IMPORTANTES NO TEU LAYOUT , ENTÃO SEMPRE VISUALIZE ANTES DE SALVAR

Primeiro vá em Layout > Adicionar um Gadget > Páginas 

Depois selecione todas as páginas que você quer que apareça no gadget , e clique em salvar ( O próprio gadget explica tudo , dúvidas etc.. ) Demostração na imagem

Agora que o gadget está adicionado , vamos aprender há colocar páginas ? Há , antes que eu me esqueça , a parte + Adicionar Link Externo . Ali você pode colocar o link de por exemplo categorias. Criar páginas é muito simples. Com seu blog selecionado , vá em Páginas > Nova página. Coloque o título e o conteúdo , depois é só publicar e fazer o processo dito acima .

Depois de saber como adicionar o Gadget e as opções que eles fornecem seria mais interessante dar um estilo ao teu menu , personalizar é profissionalizar. O menu ficará igual ao dessa imagem abaixo :

Abra o editor HTML ( indo em Modelo > Editar HTML ) pressione as teclas Ctrl+F e procure por /* Tabs selecione todo conteúdo até a chavinha , e substitua pelo código abaixo :

/* Tabs
----------------------------------------------- */
/*menu feito pelo blog bigodeaparte.blogspot.com não tire os créditos*/
.tabs-inner {
  padding: 0;
  margin-top: -0px; /*para subir o menu*/
  margin-left: -0px; /*para virar para a esquerda ou direita*/
}
.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;
}
.tabs-inner .widget li a {
  display: inline-block; padding: 1em 1.5em; border-radius:55px;
  -moz-border-radius: 55px; -webkit-border-radius: 55px;
  background: #D6C0B3; padding: 12px; margin: 6px; color: #FFF;
  font-family: Arial; line-height: 6px; font-size:18px;
}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  color: #FFF; position: relative; font-family: Arial; border-radius:55px;
 -moz-border-radius: 55px; -webkit-border-radius: 55px; background: #359788;
  padding: 12px; line-height: 6px; font-size:18px;}

Entendendo o Código
Para ficar mais fácil de vocês mudarem de acordo com o layout do teu blog . Confira a legenda de cores :
Vermelho : Numero de arredondamento . Quanto maior , mas parecido com um círculo
Laranja : Cor de Fundo ( Em cima normal , embaixo hover e selecionado )
Amarelo : Nome da tua fonte
Verde : Espaçamento interno
Azul : Espaço entre cada 'icone'
Azul Claro : Tamanho da fonte
Roxo : Cor da Fonte

Ficou tudo bem explicado né ? Se colar alguma dúvida é só comentar , Abraços !