Como editar um template do Blogspot no Dreamweaver

Escrito por vail joy | Traduzido por andré bastos
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como editar um template do Blogspot no Dreamweaver
Templates do Blogspot e Blogger usam CSS e HTML no estilo e nas tags do Blogger para exibirem informação (Comstock/Comstock/Getty Images)

Templates do Blogspot, também chamados de templates Blogger, são arquivos que contêm uma estrutura, estilo e funcionalidade que controla a aparência do seu blog no Google. Eles são similares a arquivos HTML, no sentido que usam tags HTML, stylesheets e suporte limitado ao uso de Javascript. A diferença é que um template Blogspot põe toda essa informação em um arquivo só, sendo que um template tradicional pode usar vários arquivos. Eles também utilizam tags especiais do Blogger para puxar blocos de texto, links ou outras funções que você pode organizar na sua conta do Blogger. Editar esses templates no Dreamweaver requer um conhecimento básico de HTML, já que você não será capaz de usar o editor visual para ver o layout final.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Clique em "Open File" (Abrir arquivo) na tela de início do Dreamweaver e navegue à localização do seu arquivo de template salvo. Os templates devem ser arquivos XML. Se fez download de um em um arquivo ZIP, deve descomprimi-lo primeiro antes de abrir. Por padrão, o arquivo abrirá no editor de código.

  2. 2

    Familiarize-se com o formato em que o template é estruturado. Abaixo da declaração HTML e no texto, a "skin" iniciará com a tag Blogger "<b:skin>". Abaixo disso estarão as definições de variáveis e estilos CSS. Todos os estilos de fontes e cores são normalmente definidos usando variáveis, ao invés de serem listadas em classes CSS. Altere as configurações "default" (Padrão) e "value" (Valor) onde for necessário. Assegure-se de que os seus novos valores terminem com um ";" e estejam entre aspas. Por exemplo, o conjunto de variáveis a seguir configura a cor preta ao plano de fundo:

    <Variable name="mainBgColor" description="Main Background Color" type="color" default="#ffffff" value="#000000">

  3. 3

    Edite ou adicione os seus estilos CSS. Eles seguem a estrutura tradicional, porém não são contidos com tags <style>. Por exemplo, para alterar o comprimento da sua barra lateral da direita para 120 pixels, você editaria a seguinte (ou similar) declaração de estilo:

    rightsidebar

    { width: 120px; }

    Quando alcançar o final do estilo, cuidado para não deletar ou modificar a tag do Blogger de fechamento da "skin", que se parece com o seguinte:

    </b:skin>

  4. 4

    Edite a porção HTML do documento adicionando ou removendo tags HTML onde desejar. Se estiver criando novos estilos CSS, adicione os valores da classe ou ID às tags HTML daqui. Você também pode adicionar imagens usando o caminho URL para onde ela será armazenada, porém pode ser mais fácil adicionar elementos visuais usando o editor de template na área de administração do seu Blogger após ativar o template editado.

  5. 5

    Verifique as áreas de conteúdo do seu HTML atrás de blocos com tags Blogger. Você poderá adicionar, alterar ou deletar essas linhas para afetar a estrutura e função do seu blog. Se estiver movendo os blocos, assegure-se de copiar e colar todo o bloco para manter a funcionalidade. O Blogger oferece uma ótima referência do que cada tag faz (veja Recursos).

  6. 6

    Salve o arquivo clicando em "File > Save" (Arquivo > Salvar) e assegurando-se de que o tipo do arquivo continua sendo XML. Faça o upload do seu novo template editado à sua página de administração do Blogger e, então, ative-a para ver os resultados. Use o editor de template para pequenos remendos ou mudanças, se necessário.

Dicas & Advertências

  • Use o add-on Firebug no Firefox para inspecionar partes do layout do seu blog antes de editar o template. O add-on lhe mostrará o bloco HTML e o estilo CSS correspondente a cada elemento que clicar, tornando mais fácil a visualização das mudanças. O navegador Opera possui essa funcionalidade embutida no menu do clique com o botão direito.
  • Não tente usar tags para importar estilos de outros sites ou usar JavaScript ou colar qualquer JavaScript diretamente no seu template. O Google só permite que elementos certificados sejam usados através de widgets do Blogger, que são embutidos no seu template através de tags do programa.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível