22/06/2015

Menu horizontal {Japan}

|| ||
Hey, nekos!  ヾ(◠ ▽ ◠) Como vão? Eu estou muito bem, tirando o fato de que ainda tenho uma semana e meia de aula antes das férias... O pior é que quando queremos que os dias passem rápido, eles se arrastam né? Mas ok, paciência. Então, vocês têm acompanhando tudo o que vem rolando pela blogosfera? Eu prefiro não ficar remoendo o assunto, pois acho que esse negócio de hackers e plágios já deu o que tinha que dar, mas fico triste que várias blogueiras que eu goste tenham se afastado por conta disso. Mas enfim, hoje resolvi trazer um modelo de menu horizontal parecido com o daqui pra vocês, espero que gostem.

Vá em Modelo > Editar HTML > dê Ctrl+f e busque por </b:skin> e então cole o seguinte código:
.menu {
border: 4px solid #c3d7df;
text-transform: uppercase;
padding: 5px;
background: #d6e0e4;
text-align: center;
width: 694px;
font: 10px arial;
color: #fff;
word-spacing: 10px;
-webkit-transition-duration: .80s;
}
.menu a {
color: #abc1d9;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 5px;
padding-right: 6px;
-webkit-transition-duration: .80s;
}
.menu a:hover {
color: #abc1d9;
-webkit-transition-duration: .80s;
}

Salve e agora vá em Layout > Adicionar um Gadget > HTML/JavaScript e cole o código abaixo:
<div style="position: absolute; margin-top: -0px; left: -0px;"><div class="menu">
<a href="LINKDAPÁGINAINICIAL"  onmouseover="this.innerHTML='Home'"
onmouseout="this.innerHTML='ホーム'">ホーム</a><a href="LINKDAPÁGINASOBRE"  onmouseover="this.innerHTML='About'"
onmouseout="this.innerHTML=''"></a>
<a href="LINKDOMAPA"  onmouseover="this.innerHTML='Map'"
onmouseout="this.innerHTML='写像'">写像</a>
</div></div> 

Entenda os códigos: Os números "0" podem ser mudados de acordo com a posição que você quer que seu menu assuma. Em "margin-top" quanto maior o número, mais para cima o menu vai e em "left" quanto maior o número mais para esquerda o menu vai.
 Você pode adicionar/mudar as páginas, não esquecendo é claro de mudar os títulos.

 Então é isso, pessoal. No blog de previews os links estão dando umas bugadinhas, mas eu testei em outro blog e deu certinho, ok? Não esqueçam de creditar ao blog, se usar e jya ne!

12 comentários

  1. Que lindo esse modelo!!! É muito lindo, estou fazendo um lay free e com certeza vou usar esse lindo modelo, nunca vi esse modelo em nenhum blog? Foi feito por você? AAin quando é que você vai postar icons da Kpopp de novo?
    Bye:: • P a n d a s Bright •

    ResponderExcluir
    Respostas
    1. Thanks! ♥ Espero mesmo que use. Este é modelo que eu uso no blog, levemente modificado e sim, foi feito por mim. Bom, se isso for um pedido, em breve. >.<

      Kissus ~

      Excluir
  2. Oii flor <3 Tudo bem?
    Eu também ainda tenho uma semana e meia de aula :'C é horrivel HAUEHA fazer o que né.
    Adorei o tutorial, esse menu é lindo. Usarei no próximo layout <3
    xoxo *3*
    Candy Bomb

    ResponderExcluir
    Respostas
    1. Oie, linda! Tudo bem sim, espero que você também. ♥
      Graças a Deus, agora sou uma garota livre. Até mês que vem, que eu espero que não chegue nunca mais. Haha!
      Aww, que bom que gostou. Espero que use. <3

      c h u ~

      Excluir
  3. HELLO JHEEEEENI, eu estou ótima. Me, bem nessas, sempre quando quero que passa rápido, demora uma década ç-ç. E os melhores momentos sempre passam correeeeeeeeeeeendo. Semanas passadas foram tensas, ouvi falar de vários casos de blogs hackeados e plágios também, apenas espero que isso pare logo de uma vez.

    Sobre o menu, achei ele bem kawaii desu *~*, ele é bom para quem tem blogs com conteúdo japonês. Super amore ele <3

    Guria, amo tanto os teus tutoriais! *-----*
    Beijos e até a próxima.

    ResponderExcluir
    Respostas
    1. HELLO NANDAAA! ♥ Fico feliz que esteja bem. O tempo realmente não é amigo de ninguém. Eu pisquei e minhas férias já eram. >3< Pois é, essa blogosfera já foi menos polêmica... É triste ver o quão fútil esse meio se tornou, então espero que tudo melhore mesmo.

      Aww, obrigado. <3 Quem fala de cultura asiática pode fazer a festa. xzkpskdwq

      Me faz realmente feliz que gostem do que eu trago. Me faz querer continuar sempre e sempre. *w*

      Beijinhos doces.

      Excluir
  4. Os tutoriais daqui são um máximo.

    Amei o menu, super kawaii e sobre os plágios sempre existiram, deve ser mesmo difícil lhe dar com eles...sei disso mais ou menos nunca vi grandes plágios sobre meus blog nem nada, uffa.

    E fala sério, a semana se arrasta mesmo quando queremos férias, mas realmente não estou esperando-as, por ser meu 2º ano, quero aproveitar mais (não as aulas) mas os colegas, cada minuto com eles é massa.

    Adolescente Nerd // Oficial [] 彡

    ResponderExcluir
    Respostas
    1. Caraca, isso vindo de você é algo bem grande pra mim, já que sempre foi uma influência pra mim quando se tratava de HTML. ♥

      Obrigado. ^-^ Antigamente as pessoas eram mais tolerantes em relação à isso. A maioria dos blogs de HTML em 2009/2010 tiravam seus tutos de um famoso blog por aí e nem por isso cabeças rolavam, sabe? As vezes sinto falta daquela época, mesmo que não aprove os plágios né?

      Por mim, as férias podiam ser eternas, sabe? Tem dias que podiam se repetir todos os dias e eu ficaria feliz revivendo-os um atrás do outro. *w* Mas é bom que pense assim, eu é que sou egoísta mesmo. Haha!

      Beijos.

      Excluir
  5. Estou quase entrando de férias, e realmente parece que o dia não passa, mas quando entrarmos de férias, vai ver como o dia passa em um segundo '-'
    O menu é fofinho, adorei <3

    Leadership ~

    ResponderExcluir
    Respostas
    1. Acho a vida injusta por isso. Como assim as férias já acabaram? Eu não estava com a mínima pressa. u3u
      Fico contente que o menu tenha lhe agradado. ♥ Beijinhos.

      Excluir
  6. QUE FOFO! Salvei no meu bloco de notas rs.
    falaaeblog.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Arigatou! ^-^ Espero que use. ♥

      c h u ~

      Excluir

하나 Não ofenda autores ou leitores.
Deixe o link do seu blog para que eu visite.
Não serão aprovados comentários apenas com divulgação.
Caso queira sugerir ou pedir algum post, faça isso por nossa Ask.

(⊙﹏⊙✿) (◕﹏◕✿) (◕‿◕✿) (◕︿◕✿) (◡‿◡✿) (◠△◠✿) (◕ω◕✿) (◠ω◠✿) (◠︿◠✿) (◠﹏◠✿) (◠‿◠✿) (ノ⊙ヮ⊙) (╯°□°)╯ಠ_ಠ ( ̄。 ̄)~zzz (°ロ°)ヽ (゜∇゜)ノ (ノ◕ヮ◕)ノ (▰˘◡˘▰) (︶▽︶) (。・_・。) (・ェ-) (。◕ ‿ ◕。) ʘ‿ʘ ╮ (─▽─)╭ ᕦ(ò_óˇ)ᕤ (≧ω≦) (^▽^) ( ̄□ ̄) (¬_¬) (╥_╥) (╯3╰) (¬‿¬) (◣_◢) (≧o≦) (⋋▂⋌) (॓_॔) (─‿‿─) (∩︵∩) (⊙_◎) (。♥‿♥。) (~ ̄▽ ̄)~ ★~(◠‿◕✿) (∩˃o˂∩) ~ヾ(^∇^) (づ。◕‿‿◕。)づ (ノ◕ヮ◕)ノ*:・゚✧ (;一_一) (¬_¬) (¬‿¬) (∩︵∩) (◕ ‿ ◕)/