Blog: Anime Shoujo ✦ Sigla: AS ✦ Dona: Thays Ramos(On)
Desde: 30/03/2012 ✦ Tema: Kaichou Wa Maid Sama
Post: 2247 ✦ Comentários: 8783 ✦ Visualizações: 4.025.230

1.6.17

Tutorial - Menu Sho(menu do blog)


Oiee amores ♥
Viim ensinar a vocês como colocar o menu que eu uso aqui no blog no blog de vocês.
Esse menu é super fácil e fica bem bonito, né? Eu sempre uso ele por ser bem fácil de editar no html e por ficar do jeitinho que eu sempre quero mesmo rs.
Enfim, continue com a postagem para aprender o tutorial e qualquer coisinha só comentar.
Obs.: Se vocês quiserem eu faço um lay de teste para ir adicionando os tutorais daqui.
E quem for reblogar não esquecer de da os créditos.

Em sua pagina do blogger(já logado rs) vá em Tema > Editar HTML > Clicando dentro da área de editar os código, aperte ctrl+f e procure por ]]></b:skin>.
Em cima dele cole o código abaixo:
.Sho {
float:center;
}
.Sho a {
color: #ffffff; /*Cor do menu*/
margin-left: 8px; /*Espaço entre o menu*/
font: 16px play; /*Tamanho da letra*/
font-family: 'Comic Sans MS', cursive; /*Fonte da letra*/
-webkit-transition-duration: .90s
}
.Sho a:hover {
text-shadow: 0 0 0.1em #fff; /*Cor do menu por baixo da cor original, tipo uma sombra*/
color: #4F4F4F; /*Cor do menu depois que passa o mouse*/
}

Se quiser o menu igual a do blog(cores, letra,tamanho e etc) não precisa mudar nada e salve.
Se quiser diferente só editar do seu jeito. Coloquei o que significa cada coisa no próprio código e depois salve.

Agora vá em Layout > Adicionar um gadget(de preferencia embaixo do cabeçalho do layout) > HTML/JavaScript e cole o código abaixo:
<div class="Sho">
<a href="LINK">NOME</a>
<a href="LINK">NOME</a>
<a href="LINK">NOME</a>
<a href="LINK">NOME</a>
<a href="LINK">NOME</a>
<a href="LINK">NOME</a>
</div>

Troque os LINK pelo link da pagina e NOME pelo nome que quer que apareça no menu e depois salve.

Se você quiser colocar mais algum menu só colocar no link antes de </div> essa linha:
<a href="LINK">NOME</a>
Se quiser centralizado só acrescentar <center> no inicio, antes do <div>

Prontinho!!! Ver se ficou tudo direitinho, digo, se apareceu na parte em que você quer que ele apareça em seu blog , caso não só ir trocando na parte de layouts rsrs.
Espero que gostem... Bjinhos :**

Nenhum comentário:

001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020

Postar um comentário

Deixe os seus comentários mais parecido com o seu jeito,use os emoticons do AS e se divirta comentando...

Bjinhos :**