Layout grátis

Oi, docinhos de coco, hoje eu trouxe um layout pra vocês baixarem, grátis! Acontece que eu não sei fazer aquele tipo de template que você baixa, coloca no Blog e já está pronto pra usar, sinto muito. Ainda tem algumas coisinhas que vocês terão de fazer antes de postar: "Troquei meu layout", ou qualquer porcaria do tipo. Depois que você baixar, o cabeçalho não estará lá. Isso meio que é uma vantagem, por que daí você pode colocar o seu próprio cabeçalho, com o nome do seu Blog e tudo mais. Outro detalhe importantíssimo: o gadget "oi, amiguinho :3". Esse gadget corresponde a um menu que eu preparei pra vocês, e vocês podem ativar. Como? Clicando na ferramenta ao lado do nome. Lá, você cola o seguinte código:

<center><a id="menucp" a="" href="http://link1.com.br/">1</a>
<a id="menucp" a="" href="http://link2.com.br/">2</a>
<a id="menucp" a="" href="http://link3.com.br/">3</a>
<a id="menucp" a="" href="http://link4.com.br/">4</a>
<a id="menucp" a="" href="http://link5.com.br/">5</a>
<a id="menucp" a="" href="http://link6.com.br/">6</a>
</center>

E aí você modifica trocando os links pelos links do seu Blog, que você quer que apareça. Não altere o restante. E eu acho que depois disso o lay já está prontíssimo pra ser usado :) bom proveito, docinhos

BAIXAR / VISUALIZAR

Negrito, itálico e sublinhado personalizados

Ok, todos sabem que é muito legal destacar uma coisinha ou outra na postagem, tem gente que destaca colorindo a letra ou colocando um fundo coloridinho a palavra, como se fosse marcado por grifa-texto. Mas há um jeito melhor de fazer isso, isto é, usando as ferramentas do Blogger (facílimas de usar) que são o negrito, o itálico e o sublinhado. "Não, Mirajane, apesar do efeito a letra continua da mesma cor das outras palavras!": Não. Há uma maneira de deixar o seu negrito o seu itálico e o seu sublinhado automaticamente personalizados, com uma cor padrão pra cada um, e isso se torna vantagem ao trocar o layout. Por que, por exemplo, se antes a cor tema do seu Blog era verde e você destacava as palavras com verde, a trocar seu design pra algo mais rosa iria ficar muito - me desculpem - feio. Já mudando as cores por HTML esse problema não existe; Sem mais delongas, vamos aos tutoriais? Sim, aos tutorias. Por que há dois jeitos de fazer isso, mudando normalmente ou mudando e mudando de novo quando passa o mouse. Primeiro o mais simples (embora ambos sejam fáceis): que é o do que não tem o efeito de quando passa o mouse. Vá no seu HTML, aperte Ctrl+f e busque por (]]></b:skin>) - sem os parênteses. Depois de encontrar, cole acima dele o seguinte código:

b {color: #9F79EE; text-decoration: none;} /* Estilo do negrito */
i {color: #FF6EB4; text-decoration: none;} /* Estilo do itálico */
u {color: #666666; text-decoration: none; border-bottom: 1px dashed #9F79EE;} /* Estilo do sublinhado */

Faça as alterações necessárias, visualize e salve. Agora o outro, que tem o efeito de passar o mouse (hover): Vá no seu CSS e cole o código abaixo:

b {color:#99CDDF; padding: 0 2px 0 2px;} /*negrito*/
b:hover {color:#1c1c1c;} /*Negrito quando o mouse passar por cima*/
i {color:#000000; line-height: 12px;} /* Itálico*/
i:hover {color:#FFA579;} /*Itálico quando passar por cima */
u {border-bottom: 1px solid #99CDDF; text-decoration: none;} /*Tracinho do sublinhado*/
u:hover {border-bottom: 1px solid #FFA579; text-decoration: none;} /*Tracinho do sublinhado quando o mouse passar por cima*/

TIPOS DE SUBLINHADO: ENTENDA!

Em ambos os códigos quando chega a parte do sublinhado tem um nome-chave que identifica o tipo de sublinhado que vai aparecer no seu Blog. No primeiro tutorial (sem hover) está lá: 1px dashed e no outro está 1px solid. Existem quatro tipos de sublinhado, você pode escolher o seu e modificar no seu HTML/CSS: solid (que é a linha reta), dashed (que é uma linha tracejada), dotted (que é uma linha formada por vários pontinhos) e double (que corresponde a duas linhas, uma acima da outra, para que o efeito saia como o esperado é necessário modificar o 1px pra 2px). É só isso mesmo, docinhos de coco. Créditos do Blog Chovendo em Paris e On The Fame.

Efeito de esconder a Navbar

Oi, eu tenho outro Blog!

Pra mim, Navbar sempre foi um saco. Então, o que eu fazia? Eu tirava ela de lá, e o meu atalho pra postar e editar o HTML ia pras cucuias. Até o dia que, vasculhando o On The Fame (de novo), achei um tutorial que ensinava a esconder a Navbar e mostrar quando passar o mouse. Eu olhei: "opa, que interessante! Vou colocar lá no Blog e tal"... Observando o código percebi que quando a Navbar estava "escondida" o número estava em zero, e quando ela surgia, puf! O número mudava pra um. Então eu decidi arriscar e alterei o um pra zero. Ou seja, eu aprendi a esconder a Navbar sem esconder seus efeitos (entenderam alguma coisa?)! De qualquer forma, vamos conferir o tutorial?
Vá lá no seu HTML, marque a caixinha expandir modelos de Widget, aperte Ctrl+f e procure por ]]></b:skin> e cole logo acima dele o código a seguir:

/* ----- Efeito e esconder a Navbar ----- */
#navbar-iframe {
opacity:0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#navbar-iframe:hover {
opacity:0;
} 

 Prontinho, agora visualize, e se tiver sumido mesmo, salve :D

Fonte diferente no título da postagem

O Blogger já disponibiliza muitas fontes pra o título da postagem, mas nenhuma delas me agrada. Vasculhando o On The Fame descobri como colocar uma fonte diferente no título - aliás, uma não. Duas, três, quatro, centenas de fontes, é só escolher!

Primeiro você deve entrar aqui e escolher uma delas, eu sei, a tarefa é árdua, mas valhe a pena. Depois de escolher clique em Quick-Use, vai abrir uma nova página, arraste essa página até você achar uma caixinha azul que diz: "3. Add this code to your website: (...)", assim que achar copie o código e cole acime de <head> no seu HTML. E depois de ter colado, acrescente </link> depois dele pra fechar. 

Clica que aumenta.

Agora clique em Ctrl + f e busque por <Variable name="post.title.font" description="Font"  type="font" Muita calma nessa hora. Volte no site e role a página mais um tantinho até achar a parte 4: "Integrate the fonts into your CSS", e copie só uma parte do código, como na imagem (clique aqui pra visualizar a parte que você deve copiar). Agora volte na janelinha lá do seu HTML e cole o que você copiou no nome da sua fonte antiga. Exemplo aqui. Espero que vocês tenham entendido, docinhos de coco. Lembrando que os créditos são todos do On The Fame.

Tirando bordinhas do modelo viagem e separando gadgets

Sim, eu vou ensinando tudo na ordem, desde coisinhas básicas como essa até detalhes como a personalização da data. 

TIRANDO BORDINHAS DO MODELO VIAGEM (travel)

Então, antes de qualquer coisa você deve ter o modelo viagem, por que ele é muito melhor pra edições. Mas, porém, contudo, todavia, ele tem algumas bordinhas chatas no cabeçalho, e eu vou ensinar a retirar. Primeiro vá em modelo > personalizar, nessa página você encontrará várias guias, e você deve selecionar a primeira, e clicar no viagem. Logo abaixo, você verá quatro quadrinhos menores, selecione o segundo. Depois vá na última guia (contadas pela vertical), que estará rotulada como Avançado. Então clique em planos de fundo e mude os dois para transparente (representados por quadradinhos cinza e branco), ops! "E agora, Mirajane, o fundo da postagem vai ficar assim?" não, bebê. Vá em plano de fundo da postagem e ajuste pra cor branca. Primeira parte pronta, clique em Aplicar ao Blog. Agora vem a parte chatinha, HTML. Clique em editar HTML e depois em prosseguir. Agora clique em Ctrl + f e busque por content-outer .content-cap-top { e apague o que estiver destacado por um retângulo vermelho, visualize e caso tenha sumido salve.

Clique para aumentar

SEPARANDO OS GADGETS

Certo, a primeira coisa a fazer é ir em Modelo > Personalizar > Avançado > Plano de fundo da Barra Lateral e depois alterar pra transparente e salvar. Depois de pronto, você deve ir no seu HTML e procurar por /* Widgets, acrescente isso aqui antes de fechar a chave: Background: #f7f7f7; /*Fundo do gadget */ vai ficar assim:

/* Widgets

----------------------------------------------- */

.sidebar .widget {

  border-bottom: 2px solid $(widget.border.bevel.color);

  padding-bottom: 10px;

  margin: 10px 0;

Background: #f7f7f7; /*Fundo do gadget */

}

Daí você muda a cor se quiser, visualiza e salva :3
P.S. Eu sei que era pra eu ter postado sexta e sábado, mas a preguiça impediu :C
P.P.S. Créditos do On The Fame e do Chovendo em Paris

Como fazer um layout?

Eu que tirei essa foto, hihi x3 (só que não)

Então, você quer um design bonito e exclusivo mas não entende nada de HTML? Calma, nem sempre a solução é comprar um pronto de uma Web Designer. Não, também não é encomendar em um Blog que distribua de graça, preguiçosa. Talvez seja um pouquinho de inspiração e tutoriais muito simples de fazer! Então, aproveitando o tempo livre de sobra que eu tenho nessas férias, decidi criar um Blog que posta tutoriais simples diariamente, e, semanalmente, um tutorial completo, isso é, aprender como fazer um design de uma vez em uma postagem só. Aguardem as novidades, por que a partir de amanhã você vai curtir uma super maratona de tutoriais que se estende até fevereiro - depois a gente vê como é que faz!