1. Somente usuários com pelo menos 20 posts poderão criar tópicos nas áreas de Point Blank, Combat Arms, CrossFire e Warface.
    Fechar Aviso

[Blogger] - Aprenda a personalizar o template do seu blog no Blogger

Discussão em 'Desenvolvimento em Web' iniciado por iPαrαdise, Outubro 3, 2015.

Status do Tópico:
Não esta aberto para novas mensagens.
  1. 751
    16
    365
    iPαrαdise

    iPαrαdise Milα Spook .
    • 365/406

    Afiliado:
    Junho 28, 2015
    Mensagens:
    751
    Agradecimentos:
    16
    Pontos de Troféu:
    365
    Aprenda a personalizar o template do seu blog no Blogger

    Hoje as redes sociais estão mais fortes do que nunca e, com isso, a "blogosfera" acabou sendo deixada de lado por boa parte dos usuários que produzem conteúdo. Mas não se engane: os blogs continuam sendo o melhor modo de compartilhar o que você produz sem perder o controle do conteúdo ou submetê-lo a campanhas publicitárias de terceiros em que você nada tem a ganhar, como acontece no Facebook.

    E temos ótimas plataformas para o desenvolvimento de blogs: enquanto o WordPress possui maiores limitações na versão gratuita, na versão instalável – que você precisa ter hospedagem própria –, ele pode ser personalizado sem limites. Já o Blogger (plataforma do Google) é destinado às pessoas que não querem dor de cabeça com custos ou plugins complicados, sem perder as possibilidades de personalização mais importantes. Por isso, escolhemos o Blogger para esta série de tutoriais.

    Agora que você já Somente usuários cadastrados podem ver o LINK. CADASTRE-SE AQUI !, vamos avançar para o segundo passo: a personalização. Se você quer um blog com a sua cara, precisa saber como personalizá-lo usando o Designer de Modelo do Blogger, que facilita muito o processo e pode deixar seu site com aspecto mais agradável e profissional, criando um template único. Para aprender, acompanhe nosso passo a passo abaixo:

    Passo 1: abra o Blogger

    O Blogger é um serviço online, portanto não é necessário instalar qualquer programa em seu computador, apenas acessar o site: Somente usuários cadastrados podem ver o LINK. CADASTRE-SE AQUI ![​IMG]. A primeira tela que você será apresentado é a de login na conta Google. Se você não possuir uma conta Google, poderá criar uma a partir desta mesma tela clicando no link "Criar uma conta". Se já tiver uma conta, basta entrar com seu login e senha e clicar sobre o botão "Fazer login", ou simplemente apertar a tecla Enter do seu teclado.

    Então, você será levado à página inicial do painel do Blogger. Esta tela lista todos os blogs associados a sua conta, permite que você configure seu perfil e outras opções.

    [​IMG]

    Acessando o site do Blogger e visualizando sua lista de blogs.

    Passo 2: configure seu novo blog

    Caso não tenha nenhum blog associado a sua conta, você verá a mensagem "Você ainda não é autor de blogs". Neste caso, Somente usuários cadastrados podem ver o LINK. CADASTRE-SE AQUI !. Caso já tenha um blog relacionado na sua conta, você terá acesso às principais opções relacionadas a seu blog nesta página, como "Criar uma nova postagem", acessar a "Lista de postagens" e acessar outras opções como modelo, layout, configurações e estatísticas, além de poder visualizar o blog online como ele seria visto por qualquer leitor.

    [​IMG]

    Acessando o menu de opções do blog e selecionando a opção "Modelo".

    Para personalizar o visual do blog, vamos clicar na seta de mais opções [​IMG] e selecionar o item de menu "Modelo" [​IMG].


    Passo 3: acessando o painel "Modelo"

    Após clicar sobre a opção "Modelo", você será levado a uma página que exibe o visual atual do blog no desktop e no celular além de algumas opções predefinidas de layout para aplicar no seu blog e a possibilidade de editar o código fonte HTML dele (avançado).
    [​IMG]

    Visualizando a seção "Modelo" do painel do seu Blog e clicando sobre o botão "Personalizar".

    Nesta página, vamos clicar no botão "Personalizar" [​IMG] para abrir o Designer de Modelo do Blogger.

    Passo 4: fazendo alterações com o designer de modelo

    O Designer de Modelo é uma espécie de editor dinâmico, que permite alterar várias configurações visuais do blog enquanto visualiza os resultados em tempo real em forma de prévia e sem alterar a versão que está no ar. A inferface do Designer de Modelo é esta:
    [​IMG]

    Interface do Designer de Modelo do Blogger com as configurações na parte superior e pré-visualização na inferior.
    Agora vamos abordar cada uma das seções e opções possíveis de se personalziar no Designer de Modelo:

    Seção 1: Modelos

    [​IMG]

    Seção "Modelos" com o visual atual do blog e opções predefinidas para selecionar.

    Logo ao entrar na janela de edição do modelo, você verá a seção Modelos, listando, assim como na página alterior, o modelo atualmente visível no blog [​IMG], além de outras opções de layout predefinidas e suas variações [​IMG].


    Seção 2: Plano de Fundo
    [​IMG]

    Seção "Plano de fundo" com opções de definição de plano de fundo de cor e imagem.

    A segunda seção listada na barra lateral da esquerda do Designer de Modelos é Plano de fundo. Aqui é possível selecionar uma imagem para usar como fundo do blog [​IMG], ou uma cor selecionada dentro da cor do tema atual ou de outros temas sugeridos [​IMG].


    Seção 3: Ajustar larguras
    [​IMG]

    Seção "Ajustar larguras" com opções de largura total do blog e da barra lateral.

    A terceira seção do Designer de Modelos é Ajustar larguras. Neste painel, é possível ajustar a largura total do blog [​IMG] – não se esqueça de considerar a resolução de tela dos seus leitores nesta hora –, e quanto desta largura deverá ser ocupado pela barra lateral do blog [​IMG].

    Seção 4: Layout
    [​IMG]

    Seção "Layout" com opções de estrutura de informação para o corpo e rodapé do blog.

    A penúltima seção é sobre o Layout. Aqui podemos escolher a estrutura do corpo do blog [​IMG], ou seja, se terá barra lateral, quantas e onde. Também é possível determinar o número de subseções do rodapé [​IMG].

    Seção 5: Avançado
    [​IMG]

    Seção "Avançado" com opções de fonte e cor para vários aspectos do blog.

    A última seção do Designer de Modelos é a Avançado. Nesta seção, podemos alterar diversos aspectos do visual do blog, como fonte do texto, cor dos links, imagens, itens da barra lateral e mais. Selecione o aspecto que deseja alterar na lista de itens [​IMG], então o painel do lado direito [​IMG] vai se modificar de acordo com o aspecto selecionado. Se selecionar um item relacionado a texto, verá configurações de fonte, tamanho de letra e cor do texto. Quando escolher um item não relacionado a texto, terá opções como cor de preenchimento e borda. Nesta seção também é possível adicionar código CSS personalizado.

    Passo 6: salvando o modelo criado

    Assim que ficar satisfeito com todas as alterações realizadas e pré-visualizadas no Designer de Modelo do Blogger, clique sobre o botão "Aplicar ao blog" [​IMG] para que elas sejam salvas no site que está no ar.
    [​IMG]

    Cabeçalho do Designer de Modelo com a opção de salvar alterações e voltar ao Blogger.

    Agora que o seu blog tem visual único, é só começar a postar para que ele seja atualizado com conteúdo

    [I][B][I][B][I][SIZE=3][I][B][I][B][I][B][I][B][I][B][B][B][B][B][B][B][B][IMG]http://i61.tinypic.com/9a5uef.png[/IMG]

    [/B][/B][/B][/B][/B][/B][/B][/B][/I][/B][/I][/B][/I][/B][/I][/B][/I][/SIZE][/I][/B][/I][/B][/I]
    CanalTech
     

Status do Tópico:
Não esta aberto para novas mensagens.

Compartilhe esta Página