Personalisasi gaya artikel RSS Anda

See Complete
21 Mar, 2020

Personalisasi gaya artikel RSS Anda

Anda dapat menggunakan templat artikel atau opsi CSS yang tersedia di Pusat Penerbit Berita Google untuk menyesuaikan presentasi artikel RSS Anda di Google News.

Kustomisasi artikel Anda menggunakan CSS

Sebagai penerbit, Anda dapat menggunakan fungsi gaya Artikel untuk menyesuaikan presentasi artikel RSS Anda. Untuk memulai proses, ikuti langkah-langkah ini:
  2. Pilih publikasi Anda.
  3. Klik tab Advanced .
  4. Gulir ke "Gaya artikel."
  5. Di kotak input CSS untuk edisi Anda, masukkan CSS.
  6. Untuk menyimpan dan mempratinjau perubahan Anda, klik Simpan dan pratinjau . 
  7. Setelah Anda menyimpan CSS, panel pratinjau di sebelah kanan akan menunjukkan perubahan gaya Anda.
    Kiat: Anda juga dapat melihat pratinjau gaya simpanan Anda dengan Mode Desainer Berita Google di perangkat Android atau iOS. Diperlukan waktu hingga satu menit untuk perubahan gaya Anda muncul dalam Mode Desainer.
  8. Untuk membuat gaya CSS terlihat oleh publik, klik Terbitkan . Gaya yang baru diterbitkan akan tercermin dalam Berita Google dalam waktu 2 jam. 

Google News HTML

Google News tidak menayangkan HTML persis yang digunakan penerbit dalam umpan mereka. Ketika Google News menambahkan artikel yang dihasilkan penerbit ke perpustakaannya dan mengubahnya menjadi data yang dapat dibaca kliennya, itu tidak dapat membedakan antara tag tertentu. Akibatnya, Google News akan melaporkan kesalahan sintaks jika Anda membuat 2 tag berbeda yang berubah menjadi tag yang sama. Misalnya, menambahkan gaya ke tag <div> dan <p> menghasilkan kesalahan sintaksis. 
Berikut adalah beberapa perubahan yang dilakukan Google News terhadap HTML artikel yang dibuat penerbit:
Tag penerbitTag Google News
<div><p>
<em><i>
<strong><b>
<small><cite>
<strike><s>
<del><s>

Selektor elemen yang diizinkan

Elemen HTML

Pusat Penerbit Berita Google 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:  A ”|” antar tag menunjukkan bahwa hanya satu tag yang akan ditata karena perubahan elemen HTML (lihat di atas).

Contoh gaya CSS

Anda dapat menata elemen-elemen tertentu dari artikel Anda di Google News, dengan memodifikasi CSS seperti yang ditunjukkan pada contoh di bawah ini:
 

Contoh CSS

/* All links are red. */
a { color: #cc0000; }
/* All article text will be black, horizontally centered, and be on a white background. */
p {
  color: #000000;
  -ns-block-align: center;
  /* Setting background-color on a 'p' tag will set the background of the entire article. */
  background-color: #FFFFFF;
  /* Font-settings in the 'p' tag become "default" styles overridden by styles rules on other tags. */
  font-weight: 300;
      font-size: 14sp;
      font-style: normal;
       vertical-align: baseline;
  }
/* There are Google News-specific elements you can style too! */
ns-title {
  font-weight: 700;
  text-decoration: underline;
}
/*
 * Styles all tags with the attribute ' class="style-id:firstHeaderOne" ' to have a red text.
 * Example affected HTML: <h1 class="style-id:firstHeaderOne">
 */
[style-id="firstHeaderOne"] { color: #cc0000; }
/*
 * Section-specific style overrides. Use the section name.
 * For example: To make all links grey in the "Top News" section.
*/

a [section="Top News"] { color: #0c0c0c; }
/* Style-id-specific styles can be used in conjunction with section overrides. */
[style-id="my-style-id"] [section="Top News"] { background-color: #cc0000; }
/* Custom styles can also be written for articles rendered on a tablet. */
[style-id="my-style-id"] [section="Top News"] [device="tablet"] { background-color: #cc0000; }
 

Ekstensi CSS khusus Google News

Deklarasi dan nilai properti yang diizinkan 

Google News hanya mengizinkan 5 kategori deklarasi properti CSS di bawah ini:
Tentang "dp" dan "sp."
Pixel-independent Pixels (dp) adalah unit pengukuran yang digunakan alih-alih pixel (px) karena perangkat yang berbeda memiliki kerapatan piksel yang berbeda. Menggunakan dp memastikan gaya terlihat sama pada perangkat dengan kerapatan piksel berbeda. 
Pixel independen skala (sp) biasanya sama dengan dp, tetapi juga tergantung pada pengaturan ukuran font pengguna. Jika pengguna meningkatkan ukuran font, ukuran sp juga akan meningkat. 
Untuk mempelajari lebih lanjut tentang dp dan sp, tinjau panduan referensi Desain Bahan . 

Gaya blok yang tersedia

NamaNilai-nilai
line-heightangka desimal | persentase
text-alignkiri | benar | pusat | membenarkan
-ns-block-alignkiri | benar | pusat
-ns-displayterlihat | pergi
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

NamaNilai-nilai
font-family<family-name>
font-sizedp | sp
font-weighttebal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-stylenormal | miring
letter-spacingdp | sp
text-decorationtidak ada | garis bawahi | line-through
text-transformbermodalkan | huruf besar | huruf kecil | tidak ada
vertical-alignbaseline | super | sub

Gaya SDM

NamaNilai-nilai
-ns-hr-widthdp | sp
-ns-hr-alignkiri | benar | pusat
-ns-hr-thicknessdp | sp

Blokir dan gaya teks

NamaNilai-nilai
background-color<hex-color>

Rentang dan gaya SDM

NamaNilai-nilai
color<hex-color>


Lakukan sekarang di Pusat Penerbit
Next Post Previous Post