12 de ago. de 2012

Personalizar o menu padrão do blogger

Hello pessoas vivos :0 . Tudo na paz? Hoje eu trago um tutorial bem procurado e pedido pelo o Léo do blog Waverly Place, que é o de como personalizar o menu padrão do blogger! Eu aburra que não sabe mecher sem tutoriais que as pessoas inteligentes fazem dessa vez eu agradeço e dou os créditos ao blog Go Imagine e a Any donadoblog por terem me ajudado, eu procurei esse tutorial e nunca consegui achar.

Bem o resultado será semelhante a este:
fiquei com preguiça de fazer um print do meu e copiei a imagem dela- desculpa-



Entre no seu html é procure por /* Tabs, abaixo você encontrará algo parecido a isso:
Click aqui para ver o print
Feito isso, substitua todo esse código 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*/
}
Lembrando que no margin-top números positivos descem e negativos sobem. Já no margin-left números negativos vão para a esquerda e positivos para a direita.

Em font se você manter como está no código a fonte será aquela que você estabeleceu -ou que veio com o template- no designer do modelo, mas você pode mudar colocando o nome da fonte que preferir, assim:font: nome da fonte (ex: font: calibri;)

Testado somente no template TRAVEL!

Faça as alterações necessárias, visualize e se curtir salve, caso não goste é só deletar as alterações feitas!

Já participou do nosso sorteio? Não e o que etá esperando? Ganhe um anel e um par de brincos lindos!
    Beijos!

13 idiotas perfeitos me amaram (::

Letícia Faria disse...

Que lindo o menu, amei muito o tutorial!!

http://garotavertigem.blogspot.com.br

Fernanda Valois disse...

Nossa ameei o tutorial *--*
--->sonhossemsaida.blogspot.com.br

Sophia ♡ disse...

Eu adoro esses tutus de menu,acho que dá um efeito bem demais no blog,e deixa bem organizado,mas as vezes tenho preguiça de fazer..haha...
Beijos~>Seguindo =**
http://www.cotidianodeumabarbie.blogspot.com.br/

Victória disse...

Olá tudo bem?
Amei seu blog de paixão! ele é super fofo e feminino!
Já estou seguindo! você pode visitar o meu e se gostar segue?
Beijos...

http://mundopinkvicky.blogspot.com.br/

Fernanda Valois disse...

Aiin ameei o seu blog, acheei tudo lindo principalmente o lay *--*
-- sonhossemsaida.blogspot.com

Letícia Faria disse...

Ótimo tutorial! Amei muito!!

http://garotavertigem.blogspot.com.br/

Ingrid ~ disse...

Ótimo tutorial *-* Ameei!
Beijo
candygirl-blog.blogspot.com

Ana Luiza (Anne) disse...

Yoo! Está rolando um grande concurso no Menina Blogueira! Você concorre a afiliação (opcional), divulgação por um mês e uma caricatura original feita a lápis da sua cara em estilo mangá (será enviado por sedex)!

http://meninablogueiratutoriais.blogspot.com.br/2012/08/concurso-de-uma-caricatura-personalizada.html

Unknown disse...

amei seu log o layout apezar de simples é muito lindo é disso q eu gosto! ah estou divulgando blogs se quiser que eu divulgue o seu se cadastra la no meu blog

http://glamourdocupcake.blogspot.com.br/

(lu)ly. disse...

Super fofo e personalizável!

Seguiindo

#Nhaac -> http://blog-pinkberry-oficial.blogspot.com.br/

Anônimo disse...

mt massa mesmo eu ja sabia esses, é mt fácil dar estilos ao menu do blog, basta ter criatividade, gostei !!



BEIJÃO, IANA PAULINHA
http://ianapaulinhaaaa.blogspot.com.br/

Bafos da Blogsfera disse...

ótimo tutorial, até porque o do blog é muito feio, né?
candyces.blogspot.cfom

Larissa disse...

Que fofo, adorei o tutorial <3

Seguindo o blog!!

Postar um comentário

Tem até regra para comentar é? Não é assim.. é que eu não gosto muito de coisas que pessoas falam ou fazem!

✓ Logico que pode dar opiniões, dicas de posts.
✓ Fale sempre o que você mais gosta e o que você não gosta aqui no blog!
✓ Pode deixar o link do seu blog eu seguirei se gostar!
✗ Não xingue e nem ao menos discuta pelos comentários do blog.
✓ Quer ajuda para fazer o lay do blog? Claro que ajudo mais terá que ao menos divulgar o blog pelo menos uma vez!
✗ Os comentários falando mal do blog serão imediatamente excluídos!
✓ Retribuirei todos os comentários!
✓ Não entendeu algo? Pode perguntar!
✗ Não aceito parceria com blogs.
✓ Aceito somente parceria com lojas!
✓ Quer se afiliar? Vai nas categorias e procura por Afiliados-Inscrições!


Muitíssimo obrigada por comentar! ♥