Postador por Ely Designer as 06:59
Veja imagem demonstrativa abaixo:
Você pode personalizar a mensagem que deverá aparecer logo no final dos seus posts.
A mensagem aparecerá de forma automática, inclusive nos artigos já publicados.
Antes de mais nada quero deixar claro que como em todos os tutoriais publicados aqui, eu testo todos os recursos antes de publica-los, e utilizo sempre como base os códigos constantes nos templates padrões do Blogger (Minima), ou do Designer do modelo. Portanto, dependendo do template que você está usando, pode ocorrer que você não encontre algum dos códigos citados.
Sendo assim, você terá que procurar e testar sozinho(a) os códigos dentro do seu template, referentes à instalação do recurso em questão!
Nos trechos referentes a aplicação de estilos CSS dos códigos, eu sempre destaco o que cada trecho representa, para que você mesmo(a) personalize á sua maneira. Leia o tutorial com atenção, faça testes e boa sorte!
Vá em "Design → Editar HTML" → marque a caixinha "Expandir modelos de widgets", e procure por este código:
E logo ACIMA dele, cole o seguinte código:
Caso queira incluir uma imagem antes do seu texto, ao invés de utilizar o código acima, utilize este código:
O código acima, está configurado para utilizar uma imagem no tamanho de 24x24.
Se for utilizar uma imagem maior, não se esqueça que você DEVE EDITAR os valores de "width e height", colocando o mesmo tamanho da imagem que está utilizando.
Volte na aba "Design → editar html",e procure pela tag: ]]></b:skin>
e cole ACIMA dela:
Não esqueça que você DEVE editar os campos de acordo com seu gosto.
Caso não queira incluir cor de fundo e borda, apague o trecho destacado em vermelho.
Vá visualizando para ver se está da maneira que você quer, e se for necessário, edite os valores em "padding e margin".
Se estiver tudo certinho, salve!
Você pode incluir o texto que quiser, seja uma mensagem sobre cópias de conteúdo, seja um convite para os leitores do blog deixar comentários, ou até mesmo, convite para assinar o Feed do Blog.
Use a imaginação!
Você pode personalizar a mensagem que deverá aparecer logo no final dos seus posts.
A mensagem aparecerá de forma automática, inclusive nos artigos já publicados.
Antes de mais nada quero deixar claro que como em todos os tutoriais publicados aqui, eu testo todos os recursos antes de publica-los, e utilizo sempre como base os códigos constantes nos templates padrões do Blogger (Minima), ou do Designer do modelo. Portanto, dependendo do template que você está usando, pode ocorrer que você não encontre algum dos códigos citados.
Sendo assim, você terá que procurar e testar sozinho(a) os códigos dentro do seu template, referentes à instalação do recurso em questão!
Nos trechos referentes a aplicação de estilos CSS dos códigos, eu sempre destaco o que cada trecho representa, para que você mesmo(a) personalize á sua maneira. Leia o tutorial com atenção, faça testes e boa sorte!
Mensagem automática no final dos artigos do blog:
Vá em "Design → Editar HTML" → marque a caixinha "Expandir modelos de widgets", e procure por este código:
<div class='post-footer'>E logo ACIMA dele, cole o seguinte código:
<div id='finalpost'>
SEU TEXTO AQUI
</div>Caso queira incluir uma imagem antes do seu texto, ao invés de utilizar o código acima, utilize este código:
<div id='finalpost'>
<img align='absmiddle' src='ENDEREÇO-DA-SUA-IMAGEM' style='width: 24px; height: 24px; float: left;'/>
SEU TEXTO AQUI
</div>O código acima, está configurado para utilizar uma imagem no tamanho de 24x24.
Se for utilizar uma imagem maior, não se esqueça que você DEVE EDITAR os valores de "width e height", colocando o mesmo tamanho da imagem que está utilizando.
Aplicar estilos para personalizar a mensagem:
Volte na aba "Design → editar html",e procure pela tag: ]]></b:skin>
e cole ACIMA dela:
#finalpost{
margin:20px 0px 20px 0px; /* distancia entre o texto e o post */
padding:10px 5px 10px 5px; /* edite se quiser */
font-size:13px; /* edite tamanho da fonte */
text-align:left; /* alinhamento do texto */
color: #XXXXXX; /* cor da fonte */
border: 1px solid #XXXXXX; /* coloque borda se quiser */
background: #XXXXXX; /* coloque cor de fundo se quiser */
}Não esqueça que você DEVE editar os campos de acordo com seu gosto.
Caso não queira incluir cor de fundo e borda, apague o trecho destacado em vermelho.
Vá visualizando para ver se está da maneira que você quer, e se for necessário, edite os valores em "padding e margin".
Se estiver tudo certinho, salve!
Você pode incluir o texto que quiser, seja uma mensagem sobre cópias de conteúdo, seja um convite para os leitores do blog deixar comentários, ou até mesmo, convite para assinar o Feed do Blog.
Use a imaginação!
Assinar:
Postar comentários (Atom)
0 comentários:
Postar um comentário
SIGAM NO TWITTER @elydicas