Em função da COVID-19, estamos trabalhando com uma equipe reduzida para proteger a saúde dos nossos especialistas de suporte. Por isso, talvez o tempo de espera para entrar em contato conosco seja maior que o normal. Agradecemos a paciência desde já. Se precisar de mais assistência, consulte a Central de Ajuda da Central do Editor.

Personalizar os estilos do seu artigo RSS

Importante: essa funcionalidade está disponível somente para as seções de conteúdo que foram configuradas para preferir a renderização de matérias diretamente do feed.

Para personalizar a apresentação dos seus artigos RSS no Google Notícias, você pode usar modelos de matérias ou opções de CSS disponíveis na Central do Editor.

Personalizar seus artigos usando CSS

Como editor, você pode usar a função de estilo do artigo para personalizar a apresentação dos seus artigos RSS. Para iniciar o processo, siga estas etapas:

  1. Faça login na Central do Editor.
  2. Selecione uma publicação.
  3. Clique em Google Notícias.
  4. Clique em Matérias do feed.
  5. Insira o CSS na caixa de entrada da sua edição.
  6. Para salvar e visualizar as alterações, clique em Salvar e visualizar.
  7. Depois de salvar o CSS, o painel de visualização à direita exibirá as alterações de estilo,
    • Dica: você também pode ver seus estilos salvos com o Modo designer do Google Notícias em dispositivos Android ou iOS. Pode levar até um minuto para que suas alterações de estilo apareçam no Modo designer.
  8. Para tornar o estilo CSS visível publicamente, clique em Publicar.
    • O estilo publicado é atualizado no Google Notícias em até duas horas.

HTML do Google Notícias

O Google Notícias não veicula o mesmo HTML que os editores publicam nos feeds. Ao adicionar artigos gerados pelo editor à biblioteca e os transformar em dados que podem ser lidos pelos clientes, o Google Notícias não conseguirá diferenciar determinadas tags. Como resultado, o Google Notícias informará um erro de sintaxe se você estilizar duas tags diferentes que serão transformadas na mesma tag. Por exemplo, adicionar estilos às tags <div> e <p> gera um erro de sintaxe.

Veja abaixo algumas das alterações que o Google Notícias faz no HTML do artigo gerado pelo editor:

Tag do editor Tag do Google Notícias
<div> <p>
<em> <i>
<strong> <b>
<small> <cite>
<strike> <s>
<del> <s>

Seletores de elementos permitidos

Elementos HTML

A Central do Editor do Google Notícias é compatível com as seguintes tags HTML:

  • <a>

  • <b> | <strong>

  • <blockquote>

  • <cite> | <small>

  • <del> | <s> | <strike>

  • <div> | <p>

  • <em> | <i>

  • <h1>

  • <h6>

  • <ol>

  • <q>

  • <sub>

  • <sup>

  • <u>

  • <ul>

Importante: o caractere "|" entre as tags indica que somente uma delas será estilizada em razão das alterações no elemento HTML, conforme mostrado acima.

Elementos do Google Notícias

Na Central do Editor do Google Notícias, você pode usar elementos personalizados do Google Notícias para estilizar seu artigo. Veja os elementos disponíveis abaixo:
Elemento do Google Notícias Descrição Exemplo de captura de tela
<ns-caption-copyright> Direitos autorais de uma imagem 1
<ns-caption> Texto da legenda abaixo de uma imagem 2
<ns-edition-name> O cabeçalho do nome da publicação 3
<ns-author-timestamp> Texto do cabeçalho com autor e horário da publicação 4
<ns-author-timestamp-separator> Ponto entre o nome do autor e o horário da publicação 5
<ns-slideshow-copyright> Direitos autorais abaixo de slides 6
<ns-slideshow-caption> Legendas abaixo de slides 7
<ns-subtitle> Subtítulo do artigo 8
<ns-title> Texto do título do artigo 9
<ns-header-divider> Divisor entre o título do artigo e o carimbo de data/hora do autor 10
<ns-logo> Logotipo da parte superior do artigo 11

Exemplos de estilo CSS

Você pode modificar o CSS para estilizar certos elementos da sua matéria no Google Notícias, como o exemplo abaixo:

Exemplo de CSS

/* Todos os links são vermelhos. */
a { color: #cc0000; }
/* Todo o texto do artigo será preto, centrado horizontalmente e terá um fundo branco. */
p {
color: #000000;
-ns-block-align: center;
/* Definir uma cor de fundo em uma tag 'p' definirá o plano de fundo de todo o artigo. */
background-color: #FFFFFF;
/* As configurações de fonte na tag 'p' se tornam estilos "padrão" modificados por regras de estilo em outras tags. */
font-weight: 300;
font-size: 14sp;
font-style: normal;
vertical-align: baseline;
}
/* Existem elementos específicos do Google Notícias que você pode estilizar também! */
ns-title {
font-weight: 700;
text-decoration: underline;
}
/*
* Aplica estilos a todas as tags com o atributo ' class="style-id:firstHeaderOne" ' para que o texto apareça em vermelho.
* Exemplo de HTML afetado: <h1 class="style-id:firstHeaderOne">
*/
[style-id="firstHeaderOne"] { color: #cc0000; }
/*
* Modificações de estilo específicas às seções. Use o nome da seção.
* Por exemplo, para tornar cinza todos os links da seção "Principais notícias".
*/

a [section="Top News"] { color: #0c0c0c; }
/* Os estilos específicos a style-id podem ser usados com modificações de seção. */
[style-id="my-style-id"] [section="Top News"] { background-color: #cc0000; }
/* Os estilos personalizados também podem ser escritos para artigos renderizados em um tablet. */
[style-id="my-style-id"] [section="Top News"] [device="tablet"] { background-color: #cc0000; }

Extensões CSS específicas do Google Notícias

Seletor style-id

Para aplicar um estilo a todos os elementos na classe style-id:my-style-id, use um seletor de style-id em vez de um seletor de elemento:
[style-id="my-style-id"] { color: #cc0000; }

Seletor de seção

Use o seletor de seção com um seletor de style-id ou de elemento. Use-o também para modificações de estilos específicas a seções:

/* Exibir texto em preto sobre um fundo branco em todas as seções. */

p { color: #000000; background-color: #FFFFFF; }

/*

* Exibir texto em branco sobre um fundo preto na seção "Principais notícias".

* O valor após "section=" precisa ser um nome de seção válido.

*/

p [section="Top News"] { color: #FFFFFF; background-color: #000000; }

Seletor de dispositivo

Use o seletor de dispositivo com um seletor de style-id ou de elemento. Use-o também para modificações de estilo específicas ao dispositivo:

/* Exibir texto em preto sobre um fundo branco em todos os dispositivos. */

p { color: #000000; background-color: #FFFFFF; }

/*

* Exibir texto em branco sobre um fundo preto em tablets.

* Atualmente, este seletor só é compatível com os valores "all" e "tablet".

*/

p [device="tablet"] { color: #FFFFFF; background-color: #000000; }

Valores e declarações de propriedade permitidos

O Google Notícias só permite as cinco categorias de declarações de propriedade CSS abaixo:

Sobre "dp" e "sp".

Os pixels de densidade independente (dp) são uma unidade de medida usada em vez de pixels (px) porque dispositivos diferentes têm densidades de pixels distintas. O uso de dp garante que o estilo tenha a mesma aparência em dispositivos com densidades de pixel diferentes.

Os pixels de escala independente (sp) geralmente funcionam como o dp, mas também dependem das configurações de tamanho de fonte do usuário. Se o tamanho da fonte for aumentado, o tamanho do sp também será.

Para saber mais sobre dp e sp, consulte o guia de referência de Material Design (em inglês).

Estilo de bloco disponível

Nome Valores
line-height decimal-number | percentage
text-align left | right | center | justify
-ns-block-align left | right | center
-ns-display visible | gone

margin

margin-right

margin-left

margin-top

margin-bottom

dp | sp {1, 2, 4}

dp | sp

dp | sp

dp | sp

dp | sp

padding

padding-right

padding-left

padding-top

padding-bottom

dp | sp {1, 2, 4}

dp | sp

dp | sp

dp | sp

dp | sp

Estilo do texto

Nome Valores
font-family <family-name>
font-size dp | sp
font-weight bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-style normal | italic
letter-spacing dp | sp
text-decoration none | underline | line-through
text-transform capitalize | uppercase | lowercase | none
vertical-align baseline | super | sub

Estilo de HR

Nome Valores
-ns-hr-width dp | sp
-ns-hr-align left | right | center
-ns-hr-thickness dp | sp

Estilo de bloco e texto

Nome Valores
background-color <hex-color>

Estilo do elemento "span" e HR

Nome Valores
color <hex-color>

 

Faça isso agora mesmo na Central do Editor

Isso foi útil?
Como podemos melhorá-lo?
Pesquisa
Limpar pesquisa
Fechar pesquisa
Google Apps
Menu principal
Pesquisar na Central de Ajuda
true
100499
false