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.
COMO CRIAR UMA PÁGINA COM DESIGN DIFERENCIADO? |
Para criar uma página de tema diferenciado, basta inserir alguns códigos de efeitos especiais dentro do HTML da página. Para tanto, abra a página ou postagem no editor, em seguida clique no botão HTML, agora basta inserir os códigos de efeitos especiais (os códigos são mostrados adiante) no final do código da página, depois clique em Atualizar e pronto.
Para deixar os códigos organizados é recomendado que deixe um espaço entre um código e outro.
A seguir, confira alguns códigos de efeitos especiais para inserir no HTML das páginas de seu blog.
CÓDIGO DAS IMAGENS FIXAS |
Clique aqui para fazer o download do código de imagens fixas em um arquivo TXT. Utilize esse código para colocar avisos, atalhos, ícones ou botões de redes sociais numa página específica do seu blog.
Após o download do código, 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.
Você também pode modificar a posição da imagem, para tanto modifique o termo bottom:5px; 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".
CÓDIGO DO PLANO DE FUNDO |
Confira como colocar o plano de fundo em uma página específica em 22 passos:
1º Passo: clique aqui para fazer o download do código em um arquivo TXT.
2º Passo: abra o arquivo TXT baixado e copie o código.
3º Passo: no Blogger, abra a página ou postagem no editor.
4º Passo: clique em HTML.
5º Passo: cole o código copiado no final do código da página.
Agora deixe o Blogger aberto e entre no Google Sites em uma nova aba, no 20º passo devemos retornar ao Blogger.
6º Passo: em uma nova aba acesse o link http://sites.google.com/.
7º Passo: caso ainda não tenha um site, clique em Criar, insira um nome, digite as letras de confirmação e depois clique em Criar.
8º Passo: clique no site criado.
9º Passo: clique em Criar página (geralmente é representado pelo símbolo de uma folha com o sinal de mais).
10º Passo: insira um nome.
11º Passo: modifique a opção “Página da Web” para “Arquivo”.
12º Passo: clique em Criar.
13º Passo: clique aqui e baixe esse arquivo CSS.
14º Passo: após o download, clique com o botão direito do mouse sobre o arquivo e escolha a opção Abrir com, em seguida escolha a opção Bloco de notas.
15º Passo: substitua o termo URL DA IMAGEM pelo URL da imagem do seu plano de fundo.
16º Passo: salve o arquivo.
17º Passo: retorne a página que você criou no Google Sites e clique em Adicionar arquivo.
18º Passo: selecione o arquivo CSS.
19º Passo: após enviar o arquivo CSS, note que vai aparecer o nome do arquivo (Plano de Fundo) e logo abaixo dele vai aparecer também o nome Download. Então, clique com o botão direito do mouse sobre o termo Download e escolha a opção Copiar endereço do link.
20º Passo: agora retorne ao Blogger, note que no passo 5 você colocou o código do plano de fundo. Nesse código, procure por URL DO ARQUIVO CSS e substitua pelo endereço copiado no Google Sites.
21º Passo: agora apague a parte ?attredirects=0&d=1 que está no final do URL.
URL original: https://sites.google.com/site/universoredeckdownloads/tutoriais/Plano%20de%20Fundo.css?attredirects=0&d=1
URL modificado: https://sites.google.com/site/universoredeckdownloads/tutoriais/Plano%20de%20Fundo.css
22º Passo: clique em Atualizar e confira o resultado.
CÓDIGO DA SOMBRA NAS LETRAS DA PÁGINA |
Para adicionar sombra nas letras da página você deve fazer o mesmo procedimento para inserir um plano de fundo, porém a mudança ocorre apenas do 13º ao 16º passo.
No 13º passo você deve baixar o arquivo CSS da sombra e depois continuar o procedimento a partir do 17º passo.
Clique aqui para fazer o download do arquivo CSS da sombra.
Caso você deseja alterar a cor da sombra, após o download do arquivo CSS, clique com o botão direito do mouse sobre esse arquivo e escolha a opção Abrir com, em seguida escolha a opção Bloco de notas.
A parte #fff indica a cor da sombra. Você pode modificar essa cor para #000 (escuro), #ff0000 (vermelho), #0004bd (azul escuro), #00ccff (azul claro), #06ff00 (verde claro), #fff000 (amarelo), #ff8a00 (laranja), entre outras cores.
A parte 0.05em 0.05em indica o tamanho da sombra. Você pode modificar para 0.02em 0.02em (sombra pequena), 0.08em 0.08em (sombra grande), 0.2em 0.2em (sombra muito grande), entre outras.
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: 15/08/2017. 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