Menu responsível: softy

Ohayou! 

Não tenham grande esperança para que este blogue volte a ficar ativo, mas volta e meia eu continuarei sempre a aparecer por aqui com tutoriais novos. Neste momento vim partilhar um menu que criei para um dos meus layouts mais recentes, um layout minimalista (falando nisso, tenho layouts para disponibilizar no [blue design]. É um modelo responsivo, suave, e que de qualquer forma podem personalizar se não gostarem do estilo.

Pŕevia: www

Menu pendente

Tal como prometido, segundo post de hoje ^^ Os restantes demorarão um pouco mais a ser postados, ainda os estou a preparar, mas o que importa é que até ao fim do dia o blog receberá várias atualizações. Trago 4 modelos que utilizam uma imagem como fundo, mas sintam-se livres para colocar cor sólida e fazer as alterações que desejarem - o menu pedente é um menu que suporta vários links comprimidos/ocultos numa única barrinha, e que os mostra ao clica nela, apresentando-os na vertical. Enfim, a prévia está aí para mostrar. Não retirei o tutorial de exatamente lugar nenhum, apenas peguei [neste layout free] e usei Ctrl + U para ver a base, e inventei personalizações que ficariam feiosas se aplicadas diretamente no gadget HTML/javascript, como estavam no tutorial original. É por isso que acho razoável ficar com os créditos.

Menu de natal

Sim, eu sei que o natal já passou, e este menu baseia-se essencialmente em dois tutoriais que já postei aqui: o {push} e o {change}. Contudo, houve quem gostasse dele e me pedisse para trazer o modelo, pelo que o faço. Não darei grandes explicações - estão à vontade para mudar as imagens, e não se esqueçam de subtituir os títulos. Cada uma das imagens pode ser encontrada no código dos gadgets, e deve ser editada uma a uma. Tenham cuidado com as margens.

Menu "locão"

Agora trago um menu com 2 modelos diferentes, e não me refiro à alteração de cores - refiro-me de facto à forma. O código original é um dos modelos, e se não me engano, é do {gnmh} - contudo, como não voltei a encontrá-lo, posto aqui de qualquer modo. Já a segunda versão foi criada quase que acidentalmente por mim, quando queria deixar a organização mais à minha maneira, e comecei a trocar "left: ---" por "margin-left: ---". A forma como o menu era revelado tornou-se distinta, e o meu menu "saltou" para a esquerda, mas a base é extremamente semelhante, como poderão ver na prévia. Além disso, é um excelente menu para economizar espaço, e ainda comporta imagem, portanto espero que gostem.

Dropdown raro

Há quanto tempo não postava aqui, não era? Bem, creio que irá compensar, pois embora não vá conseguir deixar muitos tutoriais prontos hoje, já comecei a adiantar várias deles, a sua maioria relativa a menus e afins. Anyway, o que trago hoje é um menu dropdown - daqueles em que cada aba contém vários sublinks - extremamente peculiar e distinto. Fica colocado no topo do blog, como se fosse parte da navbar, e tem imensos hovers, para além de que as sub-abas surgem com um desalinhamento propositado. Já vão ver na prévia. Eu achei a base do tutorial [aqui: www] mas tive de modificar muita coisa e descobrir por conta própria onde colocar os códigos, então agradeceria que me creditassem. E de qualquer forma, achei este menu magnífico para quem tem muitas páginas para organizar mas gosta de economizar espaço.

Menu fixo retrátil (menu escondido)

Eu realmente poderia ter passado muito tempo sem postar, simplesmente deixando acumular tutoriais, mas não é que milagrosamente estou a conseguir não o fazer? 

O que trago hoje são dois modelos para um menu fixo retrátil, acompanhado de menus e um efeito engraçadinho para não deixar isto tão oco. O primeiro modelo é uma adaptação nem tão modificada (a não ser pelos extras) do "menu escondido", que podia ser achado aqui e sei lá porquê que agora a página está a dar erro [créditos]: www. Portanto, o primeiro modelo tem espaço para texto, coisa que o segundo, no topo do blog, não tem, mas o segundo é feito por mim e integra o menu colchete e o fundo é editado como imagem, então usem a imaginação ;) 

Menu double [adaptado]

Para quem tinha prometido postar ontem, nem dei as caras, não foi? Ah, e comentadoras recentes - eu tenho lido tudo, só ainda não respondi, mas fico contente por estarem a gostar do meu trabalho e vou já visitar os vossos blogs ;) O menu de hoje, estou também a usar no meu blog principal. Para fazer misturei o menu double do Diário de uma otome - cliquem no nome para ir ao tutorial original - e um modelo que não consegui achar de novo, mas tenho quase a certeza que era do The moon reverse ou do GNMH. Então quem eventualmente reconhecer o modelo (adaptei ligeiramente, porém), por favor avise-me para colocar os créditos devidos :) Trago dois modos de ele ser usado no gadget, um mais elaborado e que é a graça do menu, e um outro muito mais simples. O código para adicionar no HTML do blog é igual para ambos

Menu colchete

Já há muito tempo que andava à procura deste tutorial, mas mesmo não o tendo encontrado em lado nenhum, consegui retirá-lo de um blog (que já não recordo) utilizando Ctrl + U. Menu colchete - ou chaveta, como são chamadas em Portugal: Consiste num menu simples em que as palavras/itens estão pousadas em cima de uma imagem de fundo ou de uma barrinha, e em que, ao passar o mouse, aparece uma chaveta de cada lado das palavras. A chaveta aparece vinda por trás das mesmas, e vai adquirindo maior opacidade. É um menu que trabalha com as palavras-chave before e after, portanto talvez seja melhor não mudarem nada além das cores e da largura do menu.

[adicionado mais tarde: CRÉDITOS AO GNMH! Não sabia quando postei, gómen! Parece então que só o modelo final é meu]

Agendas de outros blogs

Olá ^^ Sim, cá estou de novo, e agora vim trazer alguns tutoriais que adoro ver, mesmo usando tão pouco. Fiz recentemente um post com modelos exclusivos de agendas, mas os que trago hoje são de certa forma reblogados e tirei, por ordem, dos blogs The moon reverse, Garotas no mundo HTML e Kawaii world. PORÉM, antes que reclamem, eu alterei algumas coisinhas para ficarem mais organizadinhos e menos "cópia", nada que torne os modelos irreconhecíveis, mas para mostrar um mínimo de trabalho. Achei boa ideia fazer isto pois estes modelos são bastante conhecidos, ou já foram e é uma pena deixá-los cair em desuso, então aproveitei para reunir todos num lugar só e com um CSS mais uniforme, mais semelhante. Também podem ser usados facilmente como status ou menu, isso é com vocês. Espero que gostem, mesmo assim demorei um bom tempo a fazer este post. [NOTA] As minhas previews do TMV ficaram um bocado afastadas (ao visualizar vão perceber), mas ficam direitinhos num gadget.

Menu galaxy

Ohayou ^^

Sem perder grande tempo com desculpas, vamos ao que interessa: aqui está um menu muito simples, prático, belo e que se tem visto em vários layouts recentemente. Normalmente é chamado de galaxy, e tem várias opções de cores, mas eu modifiquei ligeiramente o tutorial de forma a que seja fácil a qualquer pessoa personalizá-lo, pois basta trocar a url do fundo. Se, por outro lado, quiserem a versão original, eu disponibilizo os links da imagem em baixo. Créditos ao Miki Candy por me ter relembrado que o menu existe ;)

Menu sidebar pixel

Ohayou, pessoal!

Então, depois de uma grande ausência, eu retorno com mais um menu que acho muito bonitinho - sidebar pixel - exclusivo do blog Black Words, que tem tutos bastante originais, na verdade. Como sempre, adaptei-o, e tive aquele trabalho desnecessário a mudar as cores, organização e a passar tudo para minúsculas, porque eu gosto dos meus tutos assim. Mas, claro, cada pessoa que personalize à sua maneira. Desta vez, a prévia com hover e tudo está no próprio post, basta clicar em ler mais para a ver. O tutorial está a seguir.

Menu coração

Ohayou! (de novo)

Este foi um efeito que tirei do blog Garotas no mundo html, mas tem as suas diferenças: a cor dos ícones e o tamanho. Isso seria irrelevante, se no final do post não ensinasse a fazer uma certa adaptação para o tutorial ficar mais original (e trabalhoso, mas compensa). Foi por isso que postei, para atender o pedido de uma leitora e ensinar a usá-lo como usei no layout de halloween. Para quem quiser cores diferentes, terá de substituir a url das imagens no código que é adicionado no htm do blog, mas basta alterar isso.

Modelo para afiliados

Imitando uma blogueira que conheço: bom dia, lasanhas ;)

Mais outro tutorial. Este aqui foi uma combinação de efeitos que me deu imenso trabalho, tudo pelo meu gadget de afiliados. Então, o código é extenso o suficiente para fazer algumas pessoas desistir de o usar, mas como eu já tratei dos alinhamentos e já organizei tudo, não será tão complicado para vocês usá-lo como foi para mim. Sei que a maior parte das pessoas não precisa de... quê? 30 afiliados? É algo por aí, mas por favor não apaguem nenhuma linha nem troquem a ordem, ou acabarão por perder imenso tempo a alinhar tudo à vossa maneira. Eu misturei um menu adaptado do blog garotas no mundo html com um efeito exclusivo meu, o efeito mixture, e um efeito exclusivo criado por mim que até já postei aqui, o confused. 

Menu "ganhando vida"

Segundo tutorial de hoje ^^

Não me perguntem porquê que chamei isto ao menu, creio que foi apenas porque a cor inicial é um cinza meio transparente e depois fica com uma cor mais avivada, e não consegui pensar em nada melhor. Para quem gosta de nomes em inglês, lamento ;) Sintam-se à vontade para, caso usem, lhe darem um nome mais aceitável, só não quero que retirem os créditos, pois é inteiramente meu. Uma coisinha simples e fácil de arrumar nos gadgets, mas espero que gostem.

Setas de navegação

Okaeri :)

Para segunda postagem de hoje, dediquei-me a fazer setinhas de navegação. São aquelas imagens que substituem os links de "postagens antigas", "home" e "postagens recentes". Antes que alguém pergunte, ensinei o tutorial aqui: www. Enfim, são muitas imagens, em 11 cores cada, e como deu imenso trabalho, creditem se usarem. Tentei escolher alguns símbolos diferentes dos que se vêm por aí, ou seja, nada dos típicos corações, casinhas ou setas muito vulgares. Vejam vocês»

Efeito push

Ohayou ^^

Este efeito na verdade não é assim tão simples e conhecido, mas eu adoro-o. Tirei do Kawaii World, a diferença está apenas na organização, e ter mudado as imagens - porque eu sinto um carinho especial em deixar tudo "à minha maneira". Mas enfim, os créditos estão aí, mas se reblogarem ou pegarem o tuto do meu blog, então por favor creditem-me a mim, tá? O efeito consiste em imagens que se deslocam, basicamente. Entenderão melhor pela prévia.

Menu lateral oculto

Okaeri ^^

Para hoje, trago um menu que adaptei do blog Reino Kawaii. Esse blogs tem tutoriais muito interessantes, que não se encontram em quase mais lado nenhum, e embora por vezes a personalização seja um pouco exagerada e "kawaii" demais, dá para inventar códigos incríveis. Foi por isso que eu criei o meu próprio modelo de um menu lateral, oculto, que só aparece quando as pessoas clicam num coração ou outro tipo de item. E é clicar mesmo, não apenas passar o mouse. Bem, quem estiver interessado, a prévia e o tutorial está abaixo.

Menu slide open heart para redes sociais

Ohayou!

Este deve ser um dos poucos tutoriais que terei de facto de reblogar, porque ele estava bastante perfeito: agradeçam ao Bunny Crazy. É um menu para redes sociais, como leram pelo título, que consiste num coração que, ao passar o rato, abre e revela os icones das redes sociais. É um menu que originalmente ocupa pouco espaço mas, como vai alargar, indico que não usem na sidebar nem assim, talvez abaixo do cabeçalho. Além disso, a Bunny criou também um modelo mais neutro, para os rapazes poderem usar, que consiste num ovo. E eu própria tentei criar um modelo meu, mas não consegui >.<

Menu no topo do blog

Tadaima :)

Este menu popularizou-se bastante quando surgiu a moda dos blogs de ícones, onde se excluía a barra lateral e portanto o menu era colocado no topo do blog. Também ficou conhecido como "menu navbar". É simples de fazer, não ocupa gadgets desnecessários, e eu tentei acompanha-lo de explicações rápidas, para o personalizarem mais facilmente. Podem visualizar, por exemplo, no topo deste meu blog de testes: www

Menu esconde-esconde

Bom... Sem muito a dizer, acabei agora mesmo de nomear este menu e confesso que acho o nome terrível, mas a única coisa que me veio à cabeça é uma pessoa escondida - que neste caso é uma imagem em link, ligeiramente oculta no topo do blog - a ser encontrada, como no jogo das escondidinhas, ou como se diz no brasil, esconde-esconde. Daí o nome >.< 

Coloquei muitas abas, mas podem retirar ou acrescentar facilmente, repetindo o código padrão do gadget. A aparência é muito delicada, mas se acharem que conseguem mudar o modelo, estejam à vontade.