Free Layout

 

Olá ~♥

Se você está por aqui é porque provavelmente tem interesse em usar esse layout, mas primeiro, vamos conversar um pouco:

Ele é free, e pode usar do jeito que está ou como base (pode modificar à vontade), mas peço que mantenha os créditos, seja na página principal, ou em qualquer outra. Todo o processo de design em si (desde à inspiração, pesquisa, codificação, etc...) é trabalhoso, então por favor, não menospreze o meu tempo, ok?

Para destacar a primeira letra do parágrafo, como nesse exemplo, use as seguintes tags: <big>letra</big> direto na postagem. Para quem gosta de postagens bem aesthetic e com vários elementos, fica bem legal. Ele ocupa quatro linhas, então se certifique de colocá-lo em parágrafos com essa quantidade ou mais, ou vai ficar estranho.

Para adicionar mais botões no menu ao lado, basta colocar o código 

<a href="/"><mn1>Menu</mn1></a>

Códigos legais que você pode querer usar

Borda nas imagens

Procure no HTML 

]]></b:skin>

Acima dele cole

.post img {

border: 10px solid #ba0b44; }

Se quiser uma transição de cor ao passar o mouse, adicione abaixo do código acima

.post img:hover {

border: 10px solid #696969;

-webkit-transition: all 0.5s ease-in-out; }

Para inserir uma borda arredondada, basta inserir dentro da tag

border-radius: 20px;

Barra de rolagem personalizada

Procure no HTML por

]]></b:skin>

Acima dele cole

::-webkit-scrollbar-thumb:vertical { /*barra vertical que se move*/

background: #ba0b44;

border-radius: 0px; /*aumente o número para arredondar os cantos */ }

::-webkit-scrollbar { /*barra vertical fixa*/

width: 12px;

background: #c1c1c1; }

Para trocar as imagens dos links de navegação, procure no HTML por

https://i.imgur.com/Aak74vf.png

e substitua pelo link de suas imagens

Para trocar a fonte do título

01. Acesse o site de fonts do Google

02. Escolha a fonte

03. Clique em get font

04. Clique em get embed code

05. Escolha a opção @import

06. Copie o link dentro das tags <style></style>

07. Dentro do HTML do blog, encontre /* Content e cole o @import acima

08. Procure por .Header h1 {

09. Substitua a linha do font-family 

Entendendo alguns elementos do código, para remover ou alterar, conforme sua preferência

text-transform: uppercase; (deixa todas as letras em caixa alta)

letter-spacing: 3px; (cria um espaçamento entre as letras)

Para mudar a fonte do título dos gadgets, faça o mesmo processo, mas procure por h2 {

Para mudar o título das postagens, procure por /* Posts e modifique a linha do font-family dentro de h3.post-title { e h3.post-title a {

Algumas informações convenientes:

• Ótimos lugares para aprender sobre HTML e encontrar diversos códigos: Chuva de HTML | GNMH

• Pegue uns graphics legais lá no Quase Criativa para enfeitar seu blog

• Páginas úteis de se ter em um blog: Sobre | Profile | Contato | Links ou Recursos

• Gadgets para melhorar a experiência de navegação do visitante: Pesquisa | Top postagens | Seguir o blog | Tags | Introdução ou Boas vindas | Menu 

• Se sentindo sem criatividade? Veja essa postagem e essa daqui.

DOWNLOAD

Formas de apoiar o Quase Criativa

Comprando qualquer coisa com o link da Amazon (clicando no banner, na página inicial)

Contribuição voluntária para a chave PIX: marcelafrancine26@gmail.com