|
CONSIDERAÇÕES INICIAIS |
Nesse tutorial, confira como deixar uma página do seu blog com o tema
diferente das demais, ou seja, crie páginas com um design diferente da
interface geral do blog.
Esse tutorial é
indicado para os blogs que utilizam o tema Awesome Inc. ou Espetacular Ltda na
plataforma do Blogger. Para baixar um modelo no tema Awesome, clique aqui.
Antes de realizar
qualquer um dos procedimentos a seguir, primeiramente faça um backup do seu
blog. Se ocorrer algum problema durante o procedimento, o blog poderá ser
restaurado com o arquivo do backup realizado. Se tiver alguma dúvida sobre o
backup, clique aqui.
|
COMO DEIXAR UMA PÁGINA DO BLOG COM TEMA
DIFERENCIADO |
Confira como deixar
algumas páginas do seu blog com o tema diferenciado das demais a partir da
realização de 17 passos. O procedimento a seguir permite a elaboração de um
tema com a alteração do plano de fundo, da fonte, da cor do texto, entre outras
características da página.
1º Passo: acesse a página inicial do Blogger.
2º Passo: selecione se blog.
3º Passo: clique em Tema.
4º Passo: clique na seta ao lado do botão Personalizar
e escolha a opção Editar HTML.
5º Passo: clique em qualquer local dentro do HTML do blog.
6º Passo: no teclado, pressione as teclas CRTL
e F para abrir a caixa de pesquisa
do HTML.
7º Passo: pesquise pelo trecho </head>.
8º Passo: Clique antes desse trecho e pressione a tecla Enter para adicionar uma linha em branco antes desse trecho.
9º Passo: acima do trecho pesquisado, escreva o código abaixo:
Observação: o código acima permite a personalização individual da página inicial (Homepage).
Para personalizar
as páginas das postagens, substitua o trecho Homepage pelo trecho Post,
conforme exemplo abaixo.
Exemplo da página inicial: <b:if cond='data:view.isHomepage'>
Exemplo da página das postagens: <b:if cond='data:view.isPost'>
Para personalizar
as páginas estáticas do blog, substitua o trecho Homepage pelo trecho Page,
conforme exemplo abaixo.
Exemplo da página inicial: <b:if cond='data:view.isHomepage'>
Exemplo da página estáticas: <b:if cond='data:view.isPage'>
Para personalizar a
página de pesquisa, substitua o trecho Homepage
pelo trecho Search, conforme exemplo
abaixo.
Exemplo da página inicial: <b:if cond='data:view.isHomepage'>
Exemplo da página de pesquisa: <b:if cond='data:view.isSearch'>
Clique aqui para
copiar um código com todas as páginas citadas acima.
10º Passo: para alterar o plano de fundo das páginas personalizadas, substitua o
trecho URL_DA_IMAGEM pelo URL da
imagem desejada no plano de fundo.
Dica: se tiver alguma dúvida sobre como obter o URL de uma imagem salva no seu
computador, clique aqui e acesse o tutorial como alterar o plano de fundo das
postagens e dos widgets do blog. Os 15 primeiros passos desse tutorial mostram
detalhadamente como enviar uma imagem para o Blogger e obter a URL dessa
imagem.
11º Passo: para alterar a fonte do texto nas páginas personalizadas, adicione o
código abaixo antes da última chave, conforme exemplo a seguir.
Exemplo: body { background-image: url(URL_DA_IMAGEM); background-size: cover;
background-repeat: repeat; font-family:
Smooch Sans; }
12º Passo: para alterar a cor do texto nas páginas personalizadas, adicione o
código abaixo antes da última chave, conforme exemplo a seguir.
Exemplo: body { background-image: url(URL_DA_IMAGEM); background-size: cover;
background-repeat: repeat; font-family: Smooch Sans; color: red; }
Clique aqui para conferir uma lista de códigos hexagonais que podem ser aplicados no local da cor inicial. Para tanto, deve substituir o trecho red pelo código da cor desejada.
13º Passo: para adicionar sombra no texto das páginas personalizadas, adicione o
código abaixo antes da última chave, conforme exemplo a seguir.
Exemplo: body { background-image: url(URL_DA_IMAGEM); background-size: cover;
background-repeat: repeat; text-shadow:
0px 0px 5px #a7cfe6; }
14º Passo: para adicionar o estilo itálico no texto das páginas personalizadas,
adicione o código abaixo antes da última chave, conforme exemplo a seguir.
Exemplo: body { background-image: url(URL_DA_IMAGEM); background-size: cover;
background-repeat: repeat; font-family: Smooch Sans; color: red; font-style: italic; }
15º Passo: para adicionar outros estilos personalizados nas páginas
personalizadas, clique aqui e confira outros códigos de personalização que
podem ser adicionados antes da última chave, conforme os exemplos anteriores.
16º Passo: clique em Visualizar para
conferir o resultado.
17º Passo: para finalizar, clique em Salvar.
|
MODELOS DE CÓDIGOS PERSONALIZADOS |
Confira alguns
modelos de códigos personalizados para deixar algumas páginas do seu blog com um
tema diferente da interface geral.
|
COMO ADICIONAR IMAGENS FIXAS NUMA PÁGINA |
Para inserir
imagens fixas em uma página especifica do seu blog, acesse a página de edição
da página ou da postagem desejada e altere o modo de visualização do conteúdo para
o modo HTML. Em seguida, insira o
código abaixo no final do código HTML da página, depois clique em Atualizar e confira o resultado
diretamente na página.
Utilize o código
acima para colocar avisos, atalhos, ícones ou botões de redes sociais numa
página específica do seu blog.
Após inserir o
código acima, modifique o termo URL DO
LINK pelo URL do link da imagem, depois modifique o termo URL DA IMAGEM pelo URL da imagem que
será exibida.
O código repete os
termos URL DO LINK e URL DA IMAGEM até três vezes, pois é possível inserir até
três imagens. No entanto, para diminuir o número de imagens, remova as duas
linhas com os termos supramencionados, bem como a linha com o termo </a> abaixo das linhas removidas.
Para aumentar o número de imagens, deve duplicar as três linhas citadas
anteriormente
Você também pode
modificar a posição da imagem, para tanto modifique o termo bottom:300px; left:5px;. Nesse termo, bottom significa “em baixo” e left significa “esquerda”. Você pode
modificar esses termos para top que
significa “em cima” e right que
significa “direita”. Já os valores indicam a distância da imagem para a borda
da tela, na qual você pode aumentá-los ou diminuí-los.
Se desejar remover
o link da imagem, então retire as partes <a
href='URL DO LINK' target="_blank"> e </a>.
O código está
configurado para abrir os links em uma nova guia, mas caso deseje abri-los na
mesma guia, então remova a parte target="_blank".
|
CONSIDERAÇÕES FINAIS |
Portanto, esse tutorial visou compartilhar um pouco de nossos
conhecimentos sobre a criação de páginas e postagens com design diferente da
interface geral do blog.
|
Por: Santos.
Elaborado em: 19/02/2015. Publicado em: 12/08/2017. Atualizado em: 16/02/2026. Obrigado pela
sua atenção, qualquer dúvida, falha ou sugestão, deixe seu comentário ou entre
em contato conosco. |
Nenhum comentário:
Postar um comentário