Como fazer a primeira letra do parágrafo maior na Blogger (Estilo Revista)

O estilo adicional é sempre uma maneira agradável de personalizar seu blog com algumas características simples contudo originais. O estilo de texto de suas postagens é bastante fácil de fazer, mas algumas coisas exigem um pouco de conhecimento extra.

Nota: isso não funcionará se você tiver uma foto antes do primeiro parágrafo de sua postagem. Seu primeiro parágrafo precisa ser composto de texto.

Passo 1 - Vá para a seção Template do seu painel do Blogger e escolha Edit HTML.

Clique dentro da caixa de texto e pressione CTRL+F (ou CMD+F em um Mac) para abrir a caixa de pesquisa no canto superior. E procure por:

<data:post.body/>

Após apertar enter, será localizado uma primeira exibição do código acima, mas essa exibição é apenas para ser mostrada em celulares. Pressione Enter novamente para ser localizada a segunda exibição do código acima, essa sim é que iremos usar.

Passo 2 - Antes e depois de <data: post.body /> adicione o seguinte em vermelho como no exemplo abaixo:

<p class='first'><data:post.body/></p>

Passo 3 - Logo abaixo de <data: post.body /> o seu modelo pode ter uma terceira instância dele também. Adicione o mesmo código em vermelho acima para essa instância também e salve o modelo.

Etapa 4 - Agora visite Template> Personalizar e digite a seção CSS (Avançado> Adicionar CSS). Aqui é onde vamos colocar o estilo a letra.

Na caixa de texto CSS, adicione o seguinte código:

.post-body p.first:first-child:first-letter {
float:left;
padding:5px;
font-size: 50px;
font-family: Georgia;
font-weight:bold;
text-transform:uppercase;
}

Você pode alterar os elementos vermelhos para refletir o tamanho da fonte que você gostaria eo nome da fonte. Dica: tente usar uma Fonte da Web do Google para um visual totalmente personalizado!

Se você quiser algo que se destaque mais temos aqui um código para um "Estilo adicional"

Essa é uma outra forma de destacar um pouco mais com uma cor de fundo e cantos arredondados:

O CSS para este estilo é:

.post-body p.first:first-child:first-letter {
float:left;
padding:5px;
font-size: 50px;
font-family: Georgia;
font-weight:bold;
text-transform:uppercase;
background-color:#cccccc;
color:#ffffff;
border-radius: 5px;
margin-right:5px;
}

Você também pode mudar os elementos em vermelho. color é a cor da fonte e o border-radius é o tamanho dos cantos arredondados (sugestão: tente alterar o border-radius para 20px para ver o que acontece!).

Sinta-se livre para brincar com vários estilos CSS e idéias para combinar com seu próprio modelo!