22/06/2015

Menu horizontal [Japan]

| |
Oi! Como vão? Eu estou muito bem, tirando o fato de que ainda tenho uma semana e meia de aula antes das férias aguentando matemática, colegas chatos e os dramas escolares. O pior é que quando queremos que os dias passem rápido, eles se arrastam né? Mas OK, paciência, me consolo com a ideia de que em breve terei bastante tempo para fazer o que mais gosto: nada. Então, vocês têm acompanhando tudo o que vem rolando pela blogosfera? Eu prefiro não ficar remoendo muito o assunto, pois acho que esse negócio de hackers e plágios já deu o que tinha que dar, mas tinha que me posicionar para dizer que fico triste que várias blogueiras que eu goste tenham se afastado por conta disso. As pessoas sempre acham um jeito de estragar coisas boas e eu só quero que tudo se acerte no final das contas e esta volte a ser uma comunidade de apoio e criatividade como sempre foi. Mas enfim, hoje trouxe um modelo de menu horizontal para layouts pequenos como os que uso no ek. Espero que vocês curtam e se usarem, creditem. Let's go. ミ☆

☆ preview
No painel de controle do Blogger, clique em Tema e vá nas três bolinhas, escolhendo Editar HTML. Dê um clique dentro da área de código para localizar seu cursor, aperte Ctrl+F no teclado, pesquise por ]]></b:skin> e dê enter. Depois de ter encontrado, cole acima/antes 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;
}

No painel de controle do Blogger, clique em Layout, adicione um gadget HTML/JavaScript e cole o seguinte código:

<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" devem ser mudados de acordo com a posição que você quer que seu menu assuma. Em "margin-top" números negativos levam o menu para cima e em "left" números negativos levam o menu para a esquerda. Você pode adicionar/mudar as páginas, não esquecendo é claro de mudar os títulos em japonês e em inglês. Use o google tradutor para isto.

Então é isso, pessoal. Nos vemos em uma próxima postagem. Fiquem bem, se cuidem.

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.
Proibido comentários apenas com divulgação.
Comente seu pedido ou sugestão.