Personalize a seção de cabeçalho do seu blog do Blogger.com
No último tutorial, personalizamos a seção Links do seu BloggerTM weblog. Agora, personalizaremos a seção Cabeçalho na parte superior do blog. O cabeçalho contém o título e a descrição do seu blog. Vamos mudar o tipo de letra ou fonte do texto e adicionar um fundo colorido.

Como no último tutorial, faremos essas melhorias alterando algumas linhas do código HTML do modelo. Clique na guia Modelo no menu na parte superior da página, que o levará à seção Editar modelo atual. Você encontrará o código HTML para o modelo na caixa abaixo. Faremos algumas alterações no código de estilo CSS. (Para saber mais sobre as folhas de estilos em cascata, siga o link abaixo.) Role o código até chegar à seção Cabeçalho na marca de estilo CSS. Como você pode ver, a marca de estilo é muito longa e a seção Cabeçalho da marca de estilo tem seis partes.

  1. @media all
  2. @media handheld
  3. #Título do Blog
  4. # blog-title a
  5. # blog-title a: pairar
  6. #descrição

  • A primeira parte do código (@media all) controla as características do cabeçalho, incluindo largura, margem e tamanho da borda. A segunda parte (@ dispositivo portátil de mídia) herda essas características da primeira parte e também altera a largura do cabeçalho para 90% para os monitores portáteis. Como queremos que a nova cor de plano de fundo seja usada nas duas instâncias, adicionaremos uma linha de código para a cor de plano de fundo na primeira parte (@media all). Essa nova linha de código está em negrito abaixo. No exemplo abaixo, usamos uma cor cinza claro, mas fique à vontade para usar a cor que desejar.

    @media all {
    #header {
    cor de fundo: # EFE3EF;
    ...

  • Em seguida, alteraremos o tipo de letra do título para a fonte popular e casual chamada Comic Sans MS. Obviamente, você pode usar qualquer fonte que desejar. As próximas três partes do código CSS do modelo (# blog-title, # blog-title a, # blog-title a: hover) controlam as características do título do blog. A primeira parte controla as características gerais e as outras duas partes controlam a aparência do texto quando ele está funcionando como um hiperlink. Para definir o tipo de letra ou fonte do título em todas as instâncias, adicionaremos o código CSS da família de fontes à primeira parte (# blog-title). Como o nome da fonte contém espaços, ele também precisará ser colocado entre aspas ("comic sans ms").

    #Título do Blog {
    família de fontes: "comic sans ms";
    ...

  • Por fim, trabalharemos no código CSS para a descrição do seu blog (#description). Esta é a última parte dos seis originais. Como você pode ver abaixo, todo o código CSS que controla as características da fonte do texto da descrição é listado juntos em uma linha. Tudo o que precisamos fazer é adicionar "comic sans ms" na frente da lista de fontes, o que tornará o Comic Sans MS a fonte padrão para o texto da descrição.

    #descrição {
    ...
    fonte: 78% / 1.4em "comic sans ms", "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-Serif;
    ...
    }

Quando terminar, clique no botão Visualizar para visualizar suas alterações e feche a janela do navegador para retornar à página anterior. Clique no botão Salvar alterações do modelo. Quando você vir a mensagem de confirmação indicando que as alterações foram salvas, clique no botão Republicar. Para verificar se o seu blog foi atualizado, clique na guia Visualizar blog no menu na parte superior da página. Pode ser necessário atualizar a página do blog para ver as alterações.





Capturas de tela reproduzidas com permissão do Google Inc. GoogleTM, BloggerTM e BlogSpotTM são marcas registradas ou comerciais da Google Inc. nos Estados Unidos e / ou em outros países.


Instruções De Vídeo: COMO COLOCAR SUAS POSTAGENS DENTRO DOS MENUS DO BLOG - BLOGGER (Março 2024).