. Mundo das meninas: Tutorial: personalizando o menu do blog

13 de março de 2014

Tutorial: personalizando o menu do blog

Oii lindinhas!

A pedido de uma leitora muito querida do blog, hoje vim fazer um tutorial de como colocar o menu do blog e como personalizar ele! vamos começar

Como colocar!


1º - Vá no Layout e do seu blog. e no lugar que você quer que fique o menu, clique em *Adicionar gadget* e na pequena aba que vai abrir escolha o Gadget de "paginas"






2º - Quando você clicar no "+" vai aparecer assim (como mostra a imagem) e é você clica em "Salvar"





3º - Agora vá em "Páginas"





4º - Quando você clicar vai aparecer assim:  agora é só clicar em "Nova página" e escrever


Pronto agora você já tem o Menu no seu blog! agora vamos aprender a personalizar!



Vá  em Modelo>> Editar HTML>> e presione Ctrl+F e na caixa de pesquiza que vai aparecer cole:
/* Tabs
E ele vai localizar o código! e logo abaixo dele vai ter algo parecido com isso:

/* Tabs
----------------------------------------------- */
.tabs-inner {
margin: 1em 0 0;
padding: 0;
}
.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;
color: $(tabs.text.color);
font: $(tabs.font);
}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;
background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center;
color: $(tabs.selected.text.color);
}


Apague esse código e substitua por esse:

/* Menu do blogger personalizado by Go Imagine - goimagines.blogspot.com
----------------------------------------------- */
.tabs-inner {
margin: 1em 0 0;
padding: 0;
margin-top: 0px; /*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: 50px; /*bordas arredondadas, apague a linha se n quiser*/
line-height: 5px;
padding: 12px;
background: #BFCED5; /*cor do fundo normal*/
margin-left: 8px; /*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: #8BC2C9; /*cor do fundo hover/selecionado*/
color: #fff; /*cor da fonte*/
border-radius: 50px; /*bordas arredondadas, apague a linha se n quiser*/
line-height: 5px;
padding: 12px; /*espaçamento interno*/


Agora é só fazer as alterações necessárias.


4 comentários:

  1. Muito bom esse tutorial, e o legal é que ele fica bem fofinho, haha :3

    Já segui aqui, se gostar do meu blog, me segue também? | www.quirky-tree.com | ♥

    ResponderExcluir
    Respostas
    1. Obrigada fofa!
      Claro que sigo o seu blog!
      Beijocas

      Excluir
  2. Eu já usei um parecido com esse e acho tão fofinhooo ♥ Adorei!
    beijos
    sim senhorita (clique aqui ou no perfil)

    ResponderExcluir
    Respostas
    1. Eu ainda não fiz no meu por que estou tendo alguns probleminhas com o HTML!

      Excluir

*Obrigada por visitar meu cantinho!
* se retribuo? claro que sim, deixe o link do seu blog!
*Comente sobre o post
*Sem grosserias ou conteúdo inadequado
*O brigado por comentar♥♥