Olá! Seja bem-vindo ao meu blog!

Aqui você dá as boas vindas aos seus leitores, fala sobre você e seu blog, contato:

E aqui você deixa os links de suas redes sociais, com ícones de sua preferência:

Menu

Faça um tour pelo blog ;3

Menu colorido =))


BFF,aquela menina que sempre quando você chora,Ela sempre estará do seu lado pelo que o destino der e vier.

Haha trouxe um tutorial para BLOGGER,MENU COLORIDO

~By : reino Kawaii~


Ele é assim: (salve o html do seu blog antes)
Primeiro vá em Design, Editar HTML e cole esse código entre as tags <head> e </head>:
/***************** MENU NAVI *****************/
#nav{
color:#A8DEE7;
display: block;
padding-bottom: 1px;
font-weight:bold;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 100%;
font-size:9px;
font-family: Tahoma;
margin-bottom: 2px;
background-color:#E3FBFF;
border-top:1px solid #E3FBFF;
border-left:1px solid #E3FBFF;
border-right:1px solid #E3FBFF;
border-bottom:1px solid #E3FBFF;
padding:0px;}

#nav:hover{
color:#FFBADD;
display: block;
padding-bottom: 1px;
font-weight:bold;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 100%;
font-size:9px;
font-family: Tahoma;
margin-bottom: 2px;
background-color:#FFEFF7;
border-top:1px solid #FFEFF7;
border-left:1px solid #FFEFF7;
border-right:1px solid #FFEFF7;
border-bottom:1px solid #FFEFF7;
padding:0px;}
#nav2{
color:#88E2A6;
display: block;
padding-bottom: 1px;
font-weight:bold;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 100%;
font-size:9px;
font-family: Tahoma;
margin-bottom: 2px;
background-color:#E7FFF1;
border-top:1px solid #E7FFF1;
border-left:1px solid #E7FFF1;
border-right:1px solid #E7FFF1;
border-bottom:1px solid #E7FFF1;
padding:0px;}
#nav2:hover{
color:#FFBADD;
display: block;
padding-bottom: 1px;
font-weight:bold;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 100%;
font-size:9px;
font-family: Tahoma;
margin-bottom: 2px;
background-color:#FFEFF7;
border-top:1px solid #FFEFF7;
border-left:1px solid #FFEFF7;
border-right:1px solid #FFEFF7;
border-bottom:1px solid #FFEFF7;
padding:0px;}

Vamos entender algumas partes importantes do código:
*#nav{ e #nav:hover{ se referem ao link; se quiser adicionar outro link deverá sempre colocar um número que irá se referir ao link, link2, link3 e assim por diante;
*color se refere a cor da fonte; 
*font-family = tipo de fonte;
*font-size = tamanho da fonte;
*background-color = cor de fundo de cada link
Outras partes se referem a bordas, margens...como vcs devem ter percebido neh; é só editar cada um dos códigos para cada link.
Feito isso, agora salve o modelo, vá em Design, Adicionar gadget, HTML/JavaScript e cole isso no local em que vc quer que o menu apareça:
<div id="nav"><a title="descreva o link e a descrição aparece quando passa o mouse" href="URL DO SEU LINK">NOME DO SEU LINK</a> – e aqui vc escreve alguma coisa mais</div>
<div id="nav2"><a title="descreva o link 2 e a descrição aparece quando passa o mouse" href="URL DO LINK 2">NOME DO LINK 2</a> – e aqui vc escreve alguma coisa mais</div>
E substitua por seus links e palavras. Pronto. Fica fofo não é?
***Uma dica para os códigos de cores é vc usar o Design do Modelo do Blogger (Design, Design do Modelo)*** 


Nenhum comentário:

Postar um comentário

Olá pessoal,bem vindos!
bem,aqui é onde você comenta e troca opiniões com nosco;
estou muito feliz por estarem comentando akiie ;)
por favor seja educado (a)

Kisses ;*

Brightness Girl Copyright 2013. Editado por: Roberta. Créditos dos recursos utilizados em: Reino Kawaii.
up