Bem vindos + menu 3d no topo

quinta-feira, 22 de dezembro de 2016


Olá meus amores, como vão? Sejam muito bem-vindos ao meu novo blog, Vagalumes na Varanda. ❤ E com "novo" eu me refiro a "mais um na lista dos tantos blogs que já tive" há décadas atrás - mais precisamente, até janeiro desse ano. Comecei com um blog estilo "layouts de 2012, fase do orkut", essas coisas que deixam estampadas na sua cara que você não sabe nada sobre edição ou html, e desde então fui evoluindo até conseguir criar esse layout maravilhoso que eu estou  a m a n d o  de paixão, e inaugurar essa belezinha já que eu não consegui esperar até o ano novo para criar uma data mais que especial.

Juro, odeio tanto quanto vocês encheções de linguiça, mas mesmo assim espero que relevem por ser a primeira publicação do blog, me sinto obrigada a falar mais do que eu deveria. De qualquer forma, podem levantar das cadeiras e gritar um "amém senhor" que iremos ao tutorial.

Sei que deixar umas imagens descrevendo o efeito hover não vai satisfazer vocês, por que a gente tem uma mania insana de olhar com as mãos, então aí está:

⏩ P R E V I E W 

Esse menu combina muito com um layout dark, com tons de preto e branco e efeitos em 3d. Super gótico das trevas da menina vampira que bebe sangue durante a noite - me desculpem por essa *risos*. 

Não preciso nem dizer que fiquei extremamente orgulhosa de mim quando parei para ver o resultado e sinceramente espero que ele seja útil a alguém. Então por favor - faça sua última ação do ano e deixe uma garotinha feliz -, se você for usar, me avisa e manda o link do seu blog, que eu serei a pessoa mais feliz do mundo! Se tu não for usar pode mentir pra me fazer feliz que eu sou tão inocente quanto criança acreditando que o papai noel vai deixar presente pra ela esse ano, sério mesmo, me iludam - mentira.

Antes de prosseguir, um AVISO importante: Sugiro que com esse menu você mantenha a sua scroll padrão ou pelo menos não a diminua, já que o background do menu é uma imagem criada sob medida. 


Primeiro passo:

Clique dentro do seu código HTML e dê CTRL+F para pesquisar por "Variable definitions". 

Você irá notar que nós estamos no primeiro código do <b:skin>, que segue "![CDATA[/*...". Aqui no blog vocês verão tutoriais meus apenas usando o primeiro b:skin, já que além de ser mais prático e estar no início do template, o código que você talvez estava habituado a usar em tutoriais (b:skin fechado) pode parar de funcionar se colocado muitos códigos.

Cole acima de "Variable definitions"o seguinte código de personalização:
.menu3d {
font-family: 'Coming Soon', cursive;  /* Fonte */
font-size: 25px;  /* Tamanho da fonte */
padding: 5px;
background: url(https://2.bp.blogspot.com/-dq9gdDds3uU/WFsbI2SvmbI/AAAAAAAAAks/ZRG4Pb5gwiADxMa6pk_V5XaVN01o_Bx3wCLcB/s1600/ScreenHunter_104-Dec.-21-20.png);
text-align: center; /* Mude para right ou left para alinhar os itens */
height: 40px;
width: 100%; /* Caso o menu fique maior, troque para "valorpx" e ajuste de acordo com teu blog */
word-spacing: 25px; /* Espaço entre os itens */
letter-spacing: 1px;
-webkit-transition-duration: .90s;}
.menu3d a {
font-color: #d8d8d8; /* Cor da fonte*/
padding-top: 9px;
padding-bottom: 9px;
padding-left: 12px;
padding-right: 12px;
text-shadow: 2px 1px 1px #000;
outline: 1px solid #000;
outline-offset: -2px;
-webkit-transition-duration: .90s;}
.menu3d a:hover {
text-shadow: 0 -4px 0 #51bdb4, 0 -3px 0 #c52e45, 0 3px 0 #51bdb4, 0 4px 0 #c52e45, 0 6px 0 #c52e45, 0 6px 0 black;  /* Não mexa */
color: #fff;
outline: 1px solid #fff;
outline-offset: -5px;
background: url(https://3.bp.blogspot.com/-Q-CFglPyUMU/WFsddCbbpfI/AAAAAAAAAk4/S8Sx_xRAh58UpGPyGBX607bmG_N4II61wCLcB/s1600/fjfg.png);
-webkit-transition-duration: .90s;}

Último passo:
OPÇÃO UM: Depois de ter salvo seu modelo, é só ir no seu layout, adicionar um gadget "HTML/Javascript" entre o seu cabeçalho e o "Cross-Column 2", mais precisamente no "entre colunas". Se o menu não ficar centralizado e no topo do blog, adicione no gadget antes do código esse div:
<div style="position: absolute; margin-top: -valorpx; left: -valorpx;">
Depois no final do código, feche o div, colocando um </div>.

OPÇÃO DOIS: Se preferir - assim como eu -, colocar já dentro do seu código, basta Editar Modelo, clicar na caixa do código e pesquisar por "</head>", colando o código que irei dar abaixo dele.
<div class='menu3d'>
<a href='LINK'>Home</a>
<a href='LINK'>Sobre</a>
<a href='LINK'>Contato</a>
<a href='LINK'>Afilie-se</a>
<a href='LINK'>F.A.Q</a>
<a href='LINK'>Categorias</a>
</div>
É isso, espero que tenham gostado. Qualquer dúvida para achar códigos ou dificuldade que estiverem tendo, comentem aí em baixo que tentarei ao máximo ajuda-los. Se usarem, creditem no blogzinho de vocês para dar aquela força pra amiga e não esqueçam de comentar o que acharam do tuto ou do blog, adoro conversar e prometo que irei responder com muito carinho!

Até a próximaaaaaaaa ❤
Referências ao Fluffy





14 comentários. Comente também!

  1. Que maximo amei esse tutorial, que 2017 tudo mude na
    sua vida sucesso, desejo a você FELIZ NATAL, obrigado pela visita.
    Blog:https://arrasandonobatomvermelho.blogspot.com.br
    Canal:https://www.youtube.com/watch?v=DmO8csZDARM

    ResponderExcluir
  2. Oii! Obrigada pela visitinha ^_^
    Entendo você, o meu blog de hoje é o segundo que crio, mas não evoluí nada no layout HAHAHA acabo optando pelo básico e seja lá o que Deus quiser x)
    Beijooo
    http://tipsnconfessions.blogspot.com

    ResponderExcluir
  3. Seja bem vinda novamente na blogosfera
    Adorei o efeito, aliás, adoro essas coisas darks e góticas ofdfdlj. Quando for fazer um layout com esse tema com certeza vou usar esse tutorial
    Beijos
    https://b-adangel.blogspot.com.br/

    ResponderExcluir
  4. Oláa! Está desculpada pelo textão hahaha Até prefiro posts com um texto falando um pouco do autor, isso o deixa mais próximo dos leitores :3
    Adorei o efeito! Eu até usaria, mas meus layouts sempre tem uma paleta de tons pasteis. Tive um mais "dark" que combinaria, mas foi muitos anos atrás :c

    ~Abraços!
    ♡ Made by Lisa ♡

    ResponderExcluir
  5. Olá! Olha eu não posso nem falar sobre quantos blogs eu já tive, por que eu fico criando coisa toda hora ahahaha, de qualquer forma seja muito bem vinda a blogosfera novamente! (Seu layout é incrível).

    Eu gostei muito do menu, quando fizer um layout dark quero usa-lo.

    Até mais!
    vempraplutao.blogspot.com.br

    ResponderExcluir
  6. Eu detesto mexer no HTML - to até cansada de tanto repetir isso, auehaue - Justamente porque sou péssima nos códigos, não entendo praticamente nada, mas esse seu tutorial ficou muito bem explicadinho! Adorei a forma como você detalhou os passos. O menuzinho ficou lindo também :3

    ♡ { Barbie Pretty Sweet } ♡

    ResponderExcluir
  7. Olá!
    Adoro esse mundo de html e photoshop, por isso adorei esse tutorial de menu 3d. Achei esse menu muito bacana, só não coloco no meu blog porque mudei o visual recentemente.

    Tenha um ótimo natal :D
    Tudo Online

    ResponderExcluir
  8. Gente,que arraso!!!Adorei o layout do seu blog!E esse tutorial é super fácil e bacana,ainda mas pra mim que fico meio perdida no mundo do html,mas com calma vai dando certo hehe
    Muitos beijos ❥
    https://ummimoso.blogspot.com.br/

    ResponderExcluir
  9. Oi Caterine, tudo bem? Feliz natal e um próspero ano novo! Adorei o blog, o layout, tudo, e esse menu é lindo! Boa sorte com o blog <3

    Cinderela em transe ☯

    ResponderExcluir
  10. Que menu mais lindoooo, o acabamento fica super fofo! <3
    Obrigada pela visita no MM, foi agradável ^^
    Beijos e feliz ano novo <3


    http://mundo-mikas.blogspot.com.br

    ResponderExcluir
  11. Oi minha linda que bom, que você consiga conquistarbo que quer. Achei lindo menu, o design do blog tá perfeito. Beijos♡

    floordemandacaru.com

    ResponderExcluir
  12. Nossa sou péssima com HTML mais o menu 3d é muito legal

    wwww.descrevendonuvens.com ♥

    ResponderExcluir
  13. Uau, esse layout ficou muito bom. Eu usaria sem dúvida nenhuma, eu também evolui com o HTML, mas confesso que nem foi tanto fksdmfdsa.
    Seja bem vinda de volta com esse blog <3 Eu adorei o nome :)

    Sessão Proibida

    ResponderExcluir