Tutorial: Menu Xadrez

Hai!Hai!

Ola! Trazendo de volta tutoriais, e esse menu e muito fofinho e facil, vou usar ele no meu layout futuro(estou fazendo)ele se chama Menu Xadrez.A Web Novela que eu disse que estava fazendo já esta pronto o primeiro capitulo e o nome dela vai ser Katie, na proxima postagem vou falar sobre ele. Uma vez por semana vai ter um capitulo, então, fiquem de olho aqui.Ele vai ter um cantinho só para ele: vou fazer um blog dele , mais agora só vai ter um pequeno cantinho aqui no blog.É para visualizar o menu: Clique Aqui

1. Vá em: Modelo > Editar HTML > Expanda a primeira setinha. Dê Ctrl+F ou F3 e procure por ]] . Acima dessa tag, cole:

.menu{float: left; width:300px; margin-top: 15px; text-align: left; margin-left: 5px; position:relative;text-shadow:none;}.menu1 {float: left; margin-right: 1px; display: inline-block; width:70px; letter-spacing: 0px; font-family: tinytots; font-size: 8px; text-align: center; margin-bottom: 1px; background-color: #e3a1a1; color: #fff; text-decoration: none; text-transform: uppercase; height:15px; line-height: 15px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; padding: 4px;opacity:0.8;text-shadow:none;}.menu1:hover {font-weight: none;z-index:auto;color: #fff;opacity:1;text-shadow:none;-moz-animation:aninha 0.5s;-webkit-animation:aninha 0.5s;}.menu2 {float: left; margin-right: 1px; display: inline-block; width:70px; letter-spacing: 0px; font-family: tinytots; font-size: 8px; text-align: center; margin-bottom: 1px; background-color: #937284; color: #FFFFFF; text-decoration: none; text-transform: uppercase; height:15px; line-height: 15px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; padding: 4px;opacity:0.8;text-shadow:none;}.menu2:hover {font-weight: none;z-index:auto;color: #fff;opacity:1;text-shadow:none;-moz-animation:aninha2 0.5s;-webkit-animation:aninha2 0.5s;}@font-face {font-family: "tinytots";src:url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');}

2. Salve e vá em: Layout > Adicionar Gadget > HTML/Javascript. E coloque o código abaixo:

<center><div class="menu"><a class="menu1" href="/" >Titulo</a><a class="menu2" href="/" >Titulo</a><a class="menu1" href="/" >Titulo</a><a class="menu2" href="/" >Titulo</a><a class="menu1" href="/" >Titulo</a><a class="menu2" href="/" >Titulo</a></div></center>