Sebagai upaya melindungi kesehatan staf dukungan kami dari COVID-19, kami beroperasi dengan tim yang terbatas. Terima kasih atas kesabaran Anda. Mungkin diperlukan waktu yang lebih lama dari biasanya untuk terhubung dengan kami. Untuk dukungan tambahan, lihat Pusat Bantuan Pusat Penerbit.

Mempersonalisasi gaya artikel RSS Anda

Penting: Fungsi ini hanya tersedia untuk bagian konten yang telah dikonfigurasi agar memilih rendering artikel langsung dari feed.

Untuk menyesuaikan penyajian artikel RSS di Google Berita, Anda dapat menggunakan template artikel atau opsi CSS yang tersedia di Pusat Penerbit.

Menyesuaikan artikel menggunakan CSS

Sebagai penerbit, Anda dapat menggunakan fungsi Gaya artikel untuk menyesuaikan penyajian artikel RSS Anda. Untuk memulai prosesnya, ikuti langkah-langkah berikut:

  1. Login ke Pusat Penerbit.
  2. Pilih publikasi.
  3. Klik Google Berita.
  4. Klik Artikel feed.
  5. Pada kotak Input CSS untuk edisi Anda, masukkan CSS.
  6. Untuk menyimpan dan melihat pratinjau perubahan, klik Simpan dan pratinjau.
  7. Setelah CSS disimpan, panel pratinjau di sebelah kanan akan menampilkan perubahan gaya Anda.
    • Tips: Anda dapat melihat pratinjau gaya yang sudah disimpan dengan Mode Desainer Google Berita di perangkat Android atau iOS. Diperlukan waktu hingga satu menit agar perubahan gaya Anda muncul di Mode Desainer.
  8. Agar gaya CSS dapat dilihat secara publik, klik Publikasikan.
    • Gaya yang baru dipublikasikan akan tampil di Google Berita dalam waktu 2 jam.

HTML Google Berita

Google Berita tidak secara sama persis menayangkan HTML yang digunakan penerbit di feed-nya. Saat Google Berita menambahkan artikel yang dibuat oleh penerbit ke library-nya dan mengubahnya menjadi data yang dapat dibaca oleh klien, program ini tidak dapat membedakan tag tertentu. Akibatnya, Google Berita akan melaporkan error sintaksis jika Anda menggunakan 2 gaya tag berbeda yang berubah menjadi tag yang sama. Misalnya, menambahkan gaya ke tag <div> dan <p> akan menyebabkan error sintaksis.

Berikut adalah beberapa perubahan yang dibuat Google Berita pada HTML artikel yang dibuat penerbit:

Tag penerbit Tag Google Berita
<div> <p>
<em> <i>
<strong> <b>
<small> <cite>
<strike> <s>
<del> <s>

Pemilih elemen yang diizinkan

Elemen HTML

Pusat Penerbit Google Berita mendukung tag HTML berikut:

  • <a>

  • <b> | <strong>

  • <blockquote>

  • <cite> | <small>

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

  • <div> | <p>

  • <em> | <i>

  • <h1>

  • <h6>

  • <ol>

  • <q>

  • <sub>

  • <sup>

  • <u>

  • <ul>

Penting: Simbol ”|” di antara tag menunjukkan bahwa hanya satu tag yang akan diberi gaya karena adanya perubahan pada elemen HTML (lihat di atas).

Elemen Google Berita

Di Pusat Penerbit Google Berita, Anda dapat menggunakan elemen Google Berita yang disesuaikan untuk mengatur gaya artikel. Tinjau elemen yang tersedia di bawah ini:
Elemen Google Berita Deskripsi Contoh screenshot
<ns-caption-copyright> Ikon hak cipta gambar 1
<ns-caption> Teks yang terletak di bawah gambar 2
<ns-edition-name> Judul nama publikasi 3
<ns-author-timestamp> Teks header nama penulis dan waktu terbit 4
<ns-author-timestamp-separator> Ikon titik pemisah antara nama penulis dan waktu terbit 5
<ns-slideshow-copyright> Ikon hak cipta di bawah slide 6
<ns-slideshow-caption> Teks di bawah slide 7
<ns-subtitle> Subjudul artikel 8
<ns-title> Teks judul untuk artikel berita 9
<ns-header-divider> Tanda pemisah antara judul artikel dan stempel waktu penulis 10
<ns-logo> Logo di bagian paling atas artikel 11

Contoh gaya CSS

Anda dapat mengubah gaya elemen tertentu dalam artikel di Google Berita dengan memodifikasi CSS seperti yang ditunjukkan pada contoh di bawah ini:

Contoh CSS

/* Semua link berwarna merah. */
a { color: #cc0000; }
/* Semua teks artikel akan berwarna hitam, diposisikan di tengah secara horizontal, dan menggunakan latar belakang putih. */
p {
color: #000000;
-ns-block-align: center;
/* Menyetel warna latar belakang pada tag 'p' akan menyetel latar belakang seluruh artikel. */
background-color: #FFFFFF;
/* Setelan font dalam tag 'p' menjadi gaya "default" yang digantikan oleh aturan gaya pada tag lain. */
font-weight: 300;
font-size: 14sp;
font-style: normal;
vertical-align: baseline;
}
/* Ada juga elemen khusus Google Berita yang dapat Anda sesuaikan gayanya. */
ns-title {
font-weight: 700;
text-decoration: underline;
}
/*
* Mengatur gaya semua tag dengan atribut ' class="style-id:firstHeaderOne" ' agar memiliki teks berwarna merah.
* Contoh HTML yang terpengaruh: <h1 class="style-id:firstHeaderOne">
*/
[style-id="firstHeaderOne"] { color: #cc0000; }
/*
* Penggantian gaya khusus rubrik. Gunakan nama rubrik.
* Misalnya: Untuk mengubah warna semua link menjadi abu-abu di rubrik "Berita Utama".
*/

a [section="Berita Utama"] { color: #0c0c0c; }
/* Gaya yang spesifik untuk style-id dapat digunakan bersama dengan penggantian rubrik. */
[style-id="my-style-id"] [section="Berita Utama"] { background-color: #cc0000; }
/* Gaya kustom juga dapat ditulis untuk artikel yang dirender di tablet. */
[style-id="my-style-id"] [section="Berita Utama"] [device="tablet"] { background-color: #cc0000; }

Ekstensi CSS yang spesifik untuk Google Berita

Pemilih style-id

Untuk menerapkan gaya ke semua elemen dalam class style-id:my-style-id, gunakan pemilih style-id, bukan pemilih elemen:
[style-id="my-style-id"] { color: #cc0000; }

Pemilih rubrik

Pemilih rubrik harus digunakan bersamaan dengan pemilih elemen atau style-id. Gunakan pemilih rubrik untuk penggantian gaya yang spesifik untuk rubrik:

/* Teks hitam dengan latar belakang putih untuk semua rubrik. */

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

/*

* Teks putih dengan latar belakang hitam untuk rubrik "Berita Utama".

* Nilai setelah 'section=' harus berupa nama rubrik yang valid.

*/

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

Pemilih perangkat

Pemilih perangkat harus digunakan bersamaan dengan pemilih elemen atau style-id. Gunakan pemilih perangkat untuk penggantian gaya yang spesifik untuk perangkat:

/* Teks hitam dengan latar belakang putih untuk semua perangkat. */

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

/*

* Teks putih dengan latar belakang hitam untuk perangkat tablet.

* Pemilih ini saat ini hanya dapat menerima nilai 'all' dan 'tablet'.

*/

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

Nilai dan deklarasi properti yang diizinkan

Google Berita hanya mengizinkan 5 kategori deklarasi properti CSS berikut:

Tentang "dp" dan "sp".

Piksel kepadatan mandiri (dp) adalah satuan ukuran yang digunakan, bukan piksel (px) karena perangkat yang berbeda memiliki kerapatan piksel yang berbeda. Dengan menggunakan dp, kita dapat memastikan gaya terlihat sama di perangkat yang memiliki kepadatan piksel berbeda.

Piksel skala mandiri (sp) biasanya sama dengan dp, namun juga bergantung pada setelan ukuran font pengguna. Jika pengguna memperbesar ukuran font, ukuran sp juga akan membesar.

Untuk mempelajari dp dan sp lebih lanjut, tinjau Panduan referensi Desain Material.

Gaya blok yang tersedia

Nama Nilai
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

Gaya teks

Nama Nilai
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

Gaya HR

Nama Nilai
-ns-hr-width dp | sp
-ns-hr-align left | right | center
-ns-hr-thickness dp | sp

Gaya teks dan blok

Nama Nilai
background-color <hex-color>

Gaya Span dan HR

Nama Nilai
color <hex-color>

 

Lakukan sekarang di Pusat Penerbit

Apakah ini membantu?
Bagaimana cara meningkatkannya?
Telusuri
Hapus penelusuran
Tutup penelusuran
Aplikasi Google
Menu utama
Pusat Bantuan Penelusuran
true
100499
false