Menu Colorido (Horizontal) (Vertical)

Oie...Meninas bom hoje vou ensinar a colocar menu colorido  vertical e horizontal

Veja o resultado :

Facebook Twitter Tumblr Google+

Vamos lá!

1. Adicione o código abaixo em seu HTML, antes de ]]></b:skin>: 

copiar sourceprint?

01

a.mc {

02	width: 100px;

03	height: 100px;

04	color:#ffffff;

05	background: #FFD6E3;

06	box-shadow: 3px 3px 3px #fee;

07	border-radius:5px;

08	font-size:12px;

09	text-align:center;

10	text-shadow: 1px 2px 3px #fff;

11	padding-left:5px;

12	padding-right:5px;

13	padding-top: 2px;

14	padding-bottom: 2px;

15	-webkit-transition:2s;

16

}

17	a.mc:hover {

18	text-decoration: none;

19	background: #fcc;

20	-webkit-transition:2s;

21

}

22

a.mc1 {

23	width: 100px;

24	height: 100px;

25	color:#ffffff;

26	background: #C1E3F2;

27	box-shadow: 3px 3px 3px #fee;

28	border-radius:5px;

29	font-size:12px;

30	text-align:center;

31	text-shadow: 1px 2px 3px #fff;

32	padding-left:5px;

33	padding-right:5px;

34	padding-top: 2px;

35	padding-bottom: 2px;

36	-webkit-transition:2s;

37

}

38	a.mc1:hover {

39	text-decoration: none;

40	background: #fcc;

41	-webkit-transition:2s;

42

}

43

a.mc2 {

44	width: 100px;

45	height: 100px;

46	color:#ffffff;

47	background: #E3AAD6;

48	box-shadow: 3px 3px 3px #fee;

49	border-radius:5px;

50	font-size:12px;

51	text-align:center;

52	text-shadow: 1px 2px 3px #fff;

53	padding-left:5px;

54	padding-right:5px;

55	padding-top: 2px;

56	padding-bottom: 2px;

57	-webkit-transition:2s;

58

}

59	a.mc2:hover {

60	text-decoration: none;

61	background: #fcc;

62	-webkit-transition:2s;

63

}

64

a.mc3 {

65	width: 100px;

66	height: 100px;

67	color:#ffffff;

68	background: #E1F5C4;

69	box-shadow: 3px 3px 3px #fee;

70	border-radius:5px;

71	font-size:12px;

72	text-align:center;

73	text-shadow: 1px 2px 3px #fff;

74	padding-left:5px;

75	padding-right:5px;

76	padding-top: 2px;

77	padding-bottom: 2px;

78	-webkit-transition:2s;

79

}

80	a.mc3:hover {

81	text-decoration: none;

82	background: #fcc;

83	-webkit-transition:2s;

84

}

2.Salve. Onde desejar que o menu apareça, cole o seguinte código:

copiar sourceprint?

1	<a class="mc" href="URL-LINK-1">NOME DO LINK</a>

2	<a class="mc1" href="URL-LINK-2">NOME DO LINK</a>

3	<a class="mc2" href="URL-LINK-3">NOME DO LINK</a>

4	<a class="mc3" href="URL-LINK-4">NOME DO LINK</

4	<a class="mc3" href="URL-LINK-4">NOME DO LINK</a>

Menu vertical

#nav{
color:#ffffff;
display: block;
padding-bottom: 1px;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 200px;
font-size:12px;
font-family: 'Kavoon';
margin-bottom: 2px;
background-color:#FFABAB;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
padding:0px;
}
#nav:hover{
color:#ffdbdb;
display: block;
padding-bottom: 1px;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 200px;
font-size:14px;
font-family: 'Kavoon';
margin-bottom: 2px;
background-color:#FFEFF7;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
padding:0px;
}
#nav1{
color:#ffffff;
display: block;
padding-bottom: 1px;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 200px;
font-size:12px;
font-family: 'Kavoon';
margin-bottom: 2px;
background-color:#FFDAAB;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
padding:0px;
}
#nav1:hover{
color:#FFDAAB;
display: block;
padding-bottom: 1px;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 200px;
font-size:14px;
font-family: 'Kavoon';
margin-bottom: 2px;
background-color:#ffffdb;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
padding:0px;
}
#nav2{
color:#ffffff;
display: block;
padding-bottom: 1px;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 200px;
font-size:12px;
font-family: 'Kavoon';
margin-bottom: 2px;
background-color:#DDFFAB;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
padding:0px;
}
#nav2:hover{
color:#DDFFAB;
display: block;
padding-bottom: 1px;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 200px;
font-size:14px;
font-family: 'Kavoon';
margin-bottom: 2px;
background-color:#edffbd;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
padding:0px;
}
#nav3{
color:#ffffff;
display: block;
padding-bottom: 1px;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 200px;
font-size:12px;
font-family: 'Kavoon';
margin-bottom: 2px;
background-color:#ABE4FF;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
padding:0px;
}
#nav3:hover{
color:#ABE4FF;
display: block;
padding-bottom: 1px;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 200px;
font-size:14px;
font-family: 'Kavoon';
margin-bottom: 2px;
background-color:#dbffff;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
padding:0px;
}
#nav4{
color:#ffffff;
display: block;
padding-bottom: 1px;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 200px;
font-size:12px;
font-family: 'Kavoon';
margin-bottom: 2px;
background-color:#D9ABFF;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
padding:0px;
}
#nav4:hover{
color:#D9ABFF;
display: block;
padding-bottom: 1px;
text-decoration:none;
line-height:15px;
vertical-align:middle;
width: 200px;
font-size:14px;
font-family: 'Kavoon';
margin-bottom: 2px;
background-color:#ffdbff;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
padding:0px;
}

Visualize e salve. Você ainda não verá nada.
2.Acesse seu Layout - Adicionar Gadget HTML/JavaScript ou qualquer lugar que aceite HTML e cole isso:
<div id="nav"><a href="URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTCCDHdZYWNjOeDDo6wItWYp-bYWCpXE54b9RirkC8Rj8dCObXpb1VrorV5snJ-BtEyaU3-9xqYLcLl12XVQCOKjprfh8Djw7dMjtTJAbs1XYhNJw6FUTgjN6oifYcqMmTeLR32unkTI8/s1600/tumblr_lmsr7tpd9H1qcfn0j.gif"/>NOME DO LINK</a></div>
<div id="nav1"><a href="URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTCCDHdZYWNjOeDDo6wItWYp-bYWCpXE54b9RirkC8Rj8dCObXpb1VrorV5snJ-BtEyaU3-9xqYLcLl12XVQCOKjprfh8Djw7dMjtTJAbs1XYhNJw6FUTgjN6oifYcqMmTeLR32unkTI8/s1600/tumblr_lmsr7tpd9H1qcfn0j.gif"/>NOME DO LINK</a></div>
<div id="nav2"><a href="URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTCCDHdZYWNjOeDDo6wItWYp-bYWCpXE54b9RirkC8Rj8dCObXpb1VrorV5snJ-BtEyaU3-9xqYLcLl12XVQCOKjprfh8Djw7dMjtTJAbs1XYhNJw6FUTgjN6oifYcqMmTeLR32unkTI8/s1600/tumblr_lmsr7tpd9H1qcfn0j.gif"/>NOME DO LINK</a></div>
<div id="nav3"><a href="URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTCCDHdZYWNjOeDDo6wItWYp-bYWCpXE54b9RirkC8Rj8dCObXpb1VrorV5snJ-BtEyaU3-9xqYLcLl12XVQCOKjprfh8Djw7dMjtTJAbs1XYhNJw6FUTgjN6oifYcqMmTeLR32unkTI8/s1600/tumblr_lmsr7tpd9H1qcfn0j.gif"/>NOME DO LINK</a></div>
<div id="nav4"><a href="URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTCCDHdZYWNjOeDDo6wItWYp-bYWCpXE54b9RirkC8Rj8dCObXpb1VrorV5snJ-BtEyaU3-9xqYLcLl12XVQCOKjprfh8Djw7dMjtTJAbs1XYhNJw6FUTgjN6oifYcqMmTeLR32unkTI8/s1600/tumblr_lmsr7tpd9H1qcfn0j.gif"/>NOME DO LINK</a></div>
Onde estiver escrito URL troque por um link e em NOME DO LINK dê um título a ele. A cor do link vai ficar de acordo com a que você definiu em seu template. 
3. Vocês devem ter visto que nó código há uma fonte diferente chamada Kavoon não é? Para usá-la, encontre <head> e cole abaixo: 

<link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css'/>

É isso. Espero que tenham gostado e beijus...:3

Creditos : Candylland & Reino Kawaii

Comente porfavor