9.12.15

Personalizando o rodapé da postagem



Oi, Lírios! Como estão?

Hoje vou ensinar a vocês como personalizar o rodapé da postagem, aquela parte que nos mostra o número de comentários, quem postou e que horas foi postado. Vamos lá?

29.11.15

Playlist: Hora de Dormir



Olá, Lírios! Como estão?

Queria apresentá-los a essa playlist maravilhosa que encontrei no Spotify. No aplicativo, ela está com o título Hora de Dormir, mas ela se encaixa também perfeitamente para um dia chuvoso ou para a hora da leitura.

Depois me contem se gostaram, ok?


 

Até mais!

20.11.15

Personalizando menu do Blogger



Olá Lírios! Como estão?

Hoje trago a vocês um tutorial de como personalizar o próprio menu do Blogger. Eu particularmente acho que fica muito mais estiloso e beeeeeeem menos trabalhoso do que ficar colocando menus na sidebar. E é super fácil, vai por mim!

Antes de começarmos, deixa eu só explicar um pouquinho como esse menu foi criado para você não ficar a ver navios durante o tutorial.

O menu do blogger, assim como em qualquer site, é construído usando uma lista. Para criá-la, são necessários no mínimo dois elementos: um para indicar qual o tipo de lista que está sendo utilizado (ordenada ou não ordenada) e outro para indicar os itens pertencentes a essa lista. Mas não se preocupe, você não vai precisar ser um expert no assunto para editar seu menu. Vou dando mais detalhes sobre o assunto durante o tutorial, para que vocês possam entender melhor, ok?

Vá em Modelo > Editar HTML. Clique dentro da caixa de edição do HTML e aperte CTRL+F para abrir a caixa de pesquisa. Procure por /* Tabs

Seu HTML estará assim:


E o menu assim: 



Vamos começar editando a primeira parte do código. Procure por .tabs-inner { . Essa parte estará assim:

.tabs-inner {
margin: 1em 0;
  padding: 0;

Substitua a primeira linha por margin-top: 50px; . Ficará assim:

.tabs-inner {
margin-top: 50px;
  padding: 0;
}

Nessa parte, você edita a posição do seu menu. Você pode movê-lo para cima ou para baixo. Quanto maior o valor, mais baixo ele fica. Você também pode usar números negativos para subir ainda mais seu menu. Por exemplo, nessa imagem eu estou usando margin-top: -10px; enquanto na segunda imagem da postagem estou usando margin-top: 50px; .

Ah, mas por que estou editanto esse .tabs-inner? Bem, esse é o nome da div que o blog usou para criar o menu. Ela é uma tag usada para alterar o estilo em partes específicas de uma página e posicionar os objetos. É por causa dela que conseguimos mudar a posição do menu e iremos personalizá-lo ao nosso gosto, entenderam?

Vamos mudar a cor do fundo do seu menu. Procure por .tabs-inner .widget ul { . Seu código estará assim:

.tabs-inner .widget ul {
padding: 0;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
}

Substitua o que está depois de background:  por um código de cor, não esquecendo de colocar um ponto e vírgula (;) no final. Assim:

.tabs-inner .widget ul {
  padding: 0;
background: #fa215d;
}

Nosso menu ficará assim:



 Lembra quando expliquei que são necessários no mínimo dois elementos para criar uma lista? o Blogger está usando o ul, a representação da lista não ordenada, nessa parte do código. Aqui nós só editamos o fundo mesmo. Se mexermos em mais coisas, nosso menu não ficará com um aspecto legal. Mas se quiser saber o que acontece se colocarmos outras características nessa parte do menu, fiquem à vontade. Para aprender HTML você precisa fuçar mesmo! Só salve seu layout antes de fazer isso para não perder nada do que já fez, ok?

Abaixo dessa tag que você acabou de editar, você encontrará essa: .tabs-inner .widget li { . O li é o segundo elemento que toda lista precisa ter para se criar o menu, como citado antes. Ele é a lista em si. Porém, o nosso menu está com links, então tudo o que você editar aqui não irá funcionar. Isso por que a tag de link sobrepõe a tag li - digamos que uma é "maior" que a outra, em consequência disso, você não consegue mexer na "menor".

Então vamos editar a próxima div. Procure por .tabs-inner .widget li a { . Ela estará assim:

.tabs-inner .widget li a {
  display: inline-block;
  padding: 1em 1.5em;
  color: $(tabs.text.color);
  font: $(tabs.font);
}

Aqui, você irá mudar o valor de padding e color.  Eu já expliquei sobre como funciona o padding nesse tutorial. Passe por lá para entender e aproveite para conferir o tutorial também! ;) Mas, resumindo, ele irá definir o tamanho do espaçamento interno do link, ou seja, o tamanho do seu menu. Coloque um valor em pixels para alterar. Eu deixei com 10px. Display permite que você defina como o elemento será renderizado, mas não vamos mexer nele. Color muda a cor da letra do seu link e font muda o tipo da fonte. Isso você pode editar no próprio Personalizar do Blogger ou, se preferir, colocar uma fonte personalizada da internet. Eu optei em deixar como está.

O código ficará assim:

.tabs-inner .widget li a {
  display: inline-block;
  padding: 10px;
  color: #fff; 

  font: $(tabs.font);
}
Seu menu ficará assim:


Por último, vamos editar o hover do menu. Tem uma explicação do que é esse efeito nesse tutorial aqui, passe por lá também, ok?

Procure por .tabs-inner .widget li.selected a,

Seu código estará assim:

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  position: relative;
  z-index: 1;
  background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center;
  color: $(tabs.selected.text.color);
Essa primeira tag deixa com que a página em que você está fique selecionada. Por exemplo, na imagem anterior, a página Início está selecionada, mostrando ao visitante que ele está na Home do blog naquele momento. Eu não gosto dessa opção, então eu sempre apago essa primeira parte.

As únicas coisas que você irá alterar aqui são o background e o color. Escolha uma cor e coloque os valores das cores.

.tabs-inner .widget li a:hover {
  position: relative;
  z-index: 1;
  background: #a22b4c;
  color: #fff;
}
O resultado final do menu será esse:



E todo o código editado do menu ficará dessa forma:

/* Tabs
----------------------------------------------- */
.tabs-inner {
margin-top: 50px; /* posição do menu */
  padding: 0;
}
.tabs-inner .section {
  margin: 0;
}
.tabs-inner .widget ul {
  padding: 0;
background: #fa215d; /* cor do fundo do menu */
}
.tabs-inner .widget li {
  border: none;
}
.tabs-inner .widget li a {
  display: inline-block;
  padding: 10px; /* espaçamento interno/tamanho do menu */
  color: #fff; /* cor da letra */
  font: $(tabs.font);
}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  position: relative;
  z-index: 1;
  background: #a22b4c; /* cor do fundo ao passar o mouse */
  color: #fff; /* cor da letra ao passar o mouse */
}

E é isso! Gostaram? Se tiverem dúvidas, é só perguntar. E me mostrem o resultado de vocês!

Até mais!

12.11.15

Conheça o Just Lays!



Olá Lírios! Como vão?

Gostaria de apresentá-los ao Just Lays!, um blog focado apenas em layouts para blog. Ele foi criado por mim no ano passado, tem lays para você que quer investir financeiramente no seu blog ou que sabe o básico de edição em HTML e quer deixar seu blog com a sua cara. Também tem alguns lays prontos para baixar totalmente de graça!

Que tal dar uma passada por lá?


Clique aqui e visite o Just Lays!

Até mais!

7.11.15

Playlist: Músicas de Animes em Português

Olá, Lírios! Tudo bem?

 Bom, sei que grande parte dos meus seguidores é otaku, e assim como eu, devem amar ouvir as aberturas e encerramentos de seus animes favoritos <3 Pois bem, eu trouxe aqui uma playlist de algumas das músicas que eu mais gosto, mas em versões em Português. Ouçam e depois me contem se gostaram, ou se já conheciam os Youtubers que apareceram nessa playlist, ok?

Até mais!


2.6.15

Fanfictions - Dicas Básicas I



Para começar, nada melhor do que citar algumas dicas básicas de como criar uma fanfiction. Vamos lá!

Primeiramente, você não deve plagiar. Não importa o quanto sua criatividade seja fraca, sua preguiça te impeça, seu tempo esteja curto ou o quanto você goste daquela fic, NÃO PLAGIE! Entendeu? Jamais! Nunca! Never! Plágio é crime e pode muito bem te levar à cadeia.

Em segundo, você deve escolher o site para postar suas fanfictions. Facebook, Twitter, Tumblr e afins estão fora da lista! Eles são apenas para divulgação, ok?! É óbvio que você irá optar por um site específico para fanfictions (o que não te impede de postar também em um blog). Faça uma pesquisa na internet para ver qual lhe agrada ou simplesmente escolha o primeiro que aparecer na lista do Google e pule para a próxima etapa: o cadastramento do site.

O cadastro é algo muito importante. Primeiramente você deve usar um e-mail válido, isso poderá te ajudar com contatos e notificações. Em seguida é necessário pensar em um bom nick. Claro que você poderá mudá-lo depois, mas isso te trará uma desvantagem: quando seus leitores te procurarem pelo nick antigo, não irão achar, e bye bye comentário novo! Também não é recomendado usar nicks difíceis de escrever, seu leitor não tem obrigação nenhuma de lembrar como se escreve. Ele desistirá na primeira tentativa. Por último, evite nomes ou sobrenomes de personagens famosos, afinal haverão muitos como você. Sua fic já irá se destacar por você ter um nick diferente dos demais.

 Após completar o cadastro, tente criar alguns laços com os usuários já existentes. Eles serão seus primeiros amigos que irão ler uma fanfic de sua autoria assim que você postá-la no site. Mas não faça amizades por interesse! Além de horrível, as pessoas terão um julgamento ruim de você, e fofoca em redes sociais se espalham ainda mais do que offline. Seja você mesmo, não importa com quem for. 

"Ok, eu já fiz tudo isso, e agora?" Agora vem a parte boa: postar a fanfiction!  

Não há muitos segredos à partir daqui. Apenas vá para a área de postagem do site e preencha tudo o que for pedido na página. Mas não se esqueça de antes ler todos os Termos de Uso e as regras do site antes de postar sua fanfiction e depois revisá-la para conferir se está tudo de acordo com as condições do site. E, após clicar no botão Enviar, apenas espere por seus comentários e favoritos.

Enfim, é isso! Espero que tenham gostado das dicas.

Até mais!

Postado também em Biblioteca de Fanfictions.
Esse é um antigo blog meu, e a postagem foi feita por mim.

20.5.15

Criando seu próprio menu para sidebar

Oi, Lírios! Como estão?

Sabe aquele menuzinho que todo blog tem na sidebar, como nesse layout?

Tenho certeza que você já teve vontade de colocá-lo em seu blog, mas parecia tão complicado que acabou desistindo, ou até chegou a encontrar como faz em algum blog por aí, mas no tutorial não explicava como a coisa funcionava e você ficou a ver navios. Bem, hoje eu vou ensinar como criar seu próprio menu e farei o possível para explicar cada detalhe de como ele funciona. É mais fácil do que parece, vai por mim.

Vamos lá?

8.5.15

Playlist "Let's Party!"



Olá, Lírios! Tudo bem?

Sexta-feira! Hoje é dia de ir badalar! Bem, pra mim não, por que vou trabalhar... Sim, eu trabalho em fim de semana :(

Mas para vocês que estão só começando a curtir o fim de semana, montei uma playlist com várias músicas para vocês irem ouvindo enquanto se arrumam para aquela festa que tanto estavam esperando, ou, se vai ficar em casa, apenar curtir o som.

Espero que gostem! Bom fim de semana para vocês!

1.5.15

[Social Spirit] Bordas com sombra no Fundo Base

Spoiler Alert!

Oi Lírios! Tudo bem?

À pedido da Louise Kayanuma, trago a vocês um tutorial de como deixar o fundoBase do Style com sombras. Antes de começar, é necessário um programa de edição. Eu vou usar o Photoshop Portátil, pois não estou no meu computador, mas vocês podem usar qualquer outra versão ou programa que preferir.

Bem, vamos lá!

27.4.15

Fanfic [Naruto] Always


Oi, Lírios! Tudo bem?

Para começar bem a semana, trouxe mais uma recomendação de fanfiction para vocês. Essa história é linda e me emocionou muito na época que li. Espero que vocês gostem tanto quanto eu gostei.


Fanfic Always escrita por Angelitsa
Related Posts Plugin for WordPress, Blogger...