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

Destaque na primeira letra do post

No layout atual do Caixa de surpresas estou a usar um efeito que permite destacar a primeira letra do post, permitindo aumentá-la e ficar com alinhamento à esquerda, ou seja, a primeira linha começa a ser escrita a partir do topo da letra inicial, daí diferindo de como ficaria se aumentássemos apenas a fonte. É um efeito bastante intuitivo, mas eu tive a ideia graças ao antigo Cherry Bomb, agora chamado Jingimon: www. Aqui está o tutorial, personalizem como quiserem, vou também divulgar o meu modelo:

Alterar a vírgulas dos marcadores por qualquer símbolo

Com um bocado de sorte, terão tutoriais todos os dias até ao fim desta semana, pelo menos um por dia. O de hoje é bastante simples, e é daquelas coisas pequenas que fazem toda a diferença e que eu trataria de implementar mal começasse um novo layout: basicamente, vou ensinara a tirar aquela vírgula horrorosa que aparece a separar os marcadores/tags/etiquetas/assuntos do post, trocando-a por outro símbolo ao gosto. Créditos: www

Data em forma de calendário

Este é um "efeito" que eu já queria ter aprendido há bastante tempo, mas só consegui encontrar um tutorial que funcionasse comigo recentemente, e portanto decidi trazê-lo. O tutorial é do Mundo Blogger, neste post vou dizer basicamente as mesmas etapas, mas irei apresentar-vos o meu modelo. Claro, podem alterar tudo o que vos apetecer. Apesar de isto se chamar "formato calendário", só se parece com um calendário porque o dia, mês e ano aparecem em linhas diferentes e só estão escritas as 3 letras iniciais do mês - o fundo só é um calendário se quisermos. De qualquer forma, eu acho bonitinho. Prévia: www

Comentários com google+ e blogger

Ohayou, minna ^^ 

O tutorial  de hoje é baseado num tuto do Bunny Crazy, só com ligeiras alterações para ficar um modelinho meu, ou seja este: www. O processo que vou mostrar é idêntico, mas o balãozinho atrás é uma imagem minha e vou explicar à minha maneira, assim como sugerir modelos de comentários que já publiquei aqui. O blogger, por omissão, apresenta sempre uma forma própria de comentar - algumas pessoas optam por colocar o modelo do google+, contudo, até agora sempre tinha julgado que necessariamente se tinha de optar por um ou outro. Contudo, graças ao tutorial da Wendy, descobri que dá para conjugar as duas formas, pelo que os leitores podem comentar pela maneira que lhes agrada mais - e agradar aos leitores é a melhor forma de fazer o blog crescer.

Modelo para comentários #uvas e laranjas

Sim, eu estou a despachar modelos para comentários antigos. O deste vez pode ser visualizado no meu blog abandonado, Forever Sapo, e é dos modelos mais complexos, embora para vocês não vá fazer diferença - só me deu trabalho a criar porque incluir animações. Chamei-lhe uvas e laranjas porque... as cores predominantes são roxo e laranja >.< Mas sintam-se à vontade para mudar as cores, assim como as fontes. Cá vai:

Modelo para comentários #kawaii

Eu não tenho qualquer assunto para dizer na intro, então estou só a enrolar e a tentar escrever frases longas. Já tinha este tutorial nos rascunhos há séculos, é só um modelinho típico de comentários, que eu achei particularmente kawaii e que nem sei em que layout usei. Espero que gostem ^^

Personalizar mensagem de erro

Trago o tutorial mais simples do século. Não terão sequer de mexer no html do blog, mas terão de editar a vossa própria imagem - a não ser que só queiram usar texto. O objetivo é criar uma mensagem de erro estilo "error 404", eventualmente acompanhado de instruções extra, para substituir a mensagem de erro padrão do blogger: "A página que estava a procurar no blogue não existe". Ficará algo assim: www

Como criar layouts responsivos

Ohayou, minna! Mais vale tarde do que nunca, certo?  Eu tinha prometido uma base responsiva e um tutorial a ensinar como fazer layouts assim, e cá está tudo, após o ler mais. O post deu bastante trabalho, pois muitos tutoriais que encontrei não funcionavam nas bases do blogger que eu usava, e nem tutoriais em inglês resolveram 100% o meu problema. Blogger é uma plataforma mesmo bizarra >.< Ainda há coisas que gostaria de aprender a fazer e, se entretanto descobrir, aviso, mas pelo menos o essencial já está.

Aviso que o tutorial é MUITO longo, tem imensas etapas, e todas são relevantes. Portanto, se não quiserem ter trabalho a modificar tudo, tudo o que afirmo aqui já está numa base 100% modificável que eu fiz - é semelhante às bases que eu dantes fazia onde dou permissão para alterarem por inteiro, com a diferença de que esta é responsiva. Só peço que creditem a base ou este tutorial. Aqui está: www

Cursor do blog

E aqui está mais um post. Esta coisa é tão básica que nem sei como é que não ensinei mais cedo - basicamente, ensino a personalizar o cursor/mouse do blog, através de 2 tutoriais diferentes e ambos simples, um que pode ser aplicado em qualquer área, e outro que só pode ser aplicado nos hovers dos links. Também trago diversos modelos, assim poupo-vos o esforço de procurar ou criar os vossos, a não ser que não gostem de nenhum dos que eu trouxe >.< Enfim, aqui vai.

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.

Lightbox personalizada

Ohayou, minna-san ^^ O blog não morrerá tão cedo, apesar das minhas ausências constantes, e caso alguém não tenha notado, sempre que eu volto trago mais de um tutorial de uma vez. Então, hoje faremos assim: vou ensinar a personalizar a lightbox, trarei alguns menus e efeitos, vou fazer um post que ensina a editar vídeos no SonyVegas, e se sobrar tempo ainda ensino a dominar perfeitamente os básicos. 

Este tutorial é sobre a lightbox - tirei o tuto [daqui], mas eu juntei os vários códigos e coloquei as explicações no próprio, assim podem adicionar tudo de uma vez. Também fiz pequenas alterações no modelo, e podem ver o resultado [aqui] - sintam-se livres para mudar as cores. Quem precisar de botões diferentes, pode criar os seus, ou tirar destes links: www www

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.

Modelo para mensagens antigas, home e recentes

Para segundo tutorial de hoje, trago algo totalmente exclusivo e que me deu um orgulho imenso de inventar: Um modelo totalmente mirabolante (mas alinhadinho, don't worry) para a navegação do blog. O tutorial será dividido em 3 passos simples, nos quais disponibilizo o próprio modelo que criei - caso queiram usar como base - e remeto para links de outros tutoriais. Sim, porque aqui eu misturei dois tipos de tutoriais para personalizar a navegação, e milagrosamente deu certo. A PRÉVIA está {aqui}, no canto inferior esquerdo.

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.

Tooltip com efeito hover

Segundo e último tutorial de hoje, ok?

Achei este tutorial num blog que credito pouco à frente, e embora tenha adaptado grande parte das explicações, a Melodie merece reconhecimento porque eu NEM SABIA que era possível a tooltip ter hover, ninguém usa, embora faça todo o sentido. Eu tenho usado muito nos meus layout ultimamente, acho que fica engraçado, e decidi dar uma ajudinha a divulgar este efeito giríssimo. Sem mais delongas...

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 ;) 

Geradores e sites úteis para blogueiras

Ora, vamos lá começar: alguém sabe o que são geradores? 

Também conhecidos por generators, são sites que ajudam quem trabalha com html por providenciarem combinações de cores, bordas, margens, e coisas do género. São basicamente uma ferramenta útil para quem não percebe muito de html ainda, ou tem preguiça de estar a pensar, mas não quer depender demasiado dos modelos disponibilizados por outras blogueiras, preferindo criar algo só seu. Pessoalmente, eu dou explicações sobre os "básicos" - porque sim, geradores ajudam a dar conta só disso - no blog, como podem ver pelo {mapa} usando Ctrl + F para procurar pela área "básicos". O que trago é uma lista de geradores ordenados por função que eu mesma testei e que acredito que poderão gostar. Aliás, não só trago geradores como uma lista infinita de sites úteis, fazendo os devidos comentários. E eu aposto que vocês vão adorar esta lista gigante ;)

Páginas do blog com layouts diferentes entre si

Este é provavelmente o último tutorial de hoje, e já postei uns quantos.

Usei recentemente um tuto que permitia dar às várias páginas do blog um layout diferenciado. Tive de procurar imenso para conseguir achá-lo, pois a maioria que encontrava explicava apenas o que eram as páginas e como funcionavam, e ainda tentei organizar e acrescentar as minhas próprias coisas - ou seja, permiti que essa diferença se desse ao nível do fundo, da área de postagem, e ainda ocultar a sidebar. Claro, isso significa ter trabalho duplo a editar o layout, mas pessoalmente eu até achei prático e simples. A segunda parte do post, mais explicativa, retirei de um site, então está creditada lá.