Mengatur snippet blogger dengan data post snippet

2/21/2019 03:03:00 PM

Tutorial kali ini adalah cara mengatur potongan artikel atau snippet artikel pada blogger. Mengatur snippet artikel blogger dapat dilakukan dengan berbagai cara, baik tanpa javascipt ataupun tidak.

Disini saya akan menjabarkan bagaimana cara membuat snippet sebuah artikel atau ringkasan artikel hanya dengan tag xml yang sudah disediakan oleh blogger lengkap dengan pengaturannya.

Jadi dengan menggunakan ringkasan sebuah artikel dapat menghemat penggunaan HTML pada view-source baik itu pada homepage, halaman pencarian, ataupun halaman label

Blogger Post Data Snippet

Berikut data xml yang dapat digunakan untuk membuat snippet artikel :

  1. data:post.snippet
  2. data:post.longSnippet
  3. data:posts.snippets.short
  4. data:posts.snippets.long
  5. data:post.body [snippet]

Mari Kita bahas dan pelajari data-data diatas.


data:post.snippet

data:post.snippet dapat digunakan untuk membuat sebuah ringkasan sebuah artikel.
Sebenarnya data data:post.snippet diperuntukan pada widget popular post, tapi bisa dimanfaatkan untuk membuat sebuah ringkasan artikel :

Cara penerapan :

<div class='...'>
  <data:post.snippet/>
</div>

Keterangan :

  • Minimal widget Versi 1
  • Minimal layout Versi 1 atau 2
  • Maksimal karakter 140, tidak bisa ditambah
  • Minimal karakter terserah anda
  • Tidak mengandung tag html dan ganti baris
Jika ingin mengurangi jumlah karakter bisa menggunakan contoh berikut :
<div class='...'>
  <b:eval expr='snippet(data:post.snippet, {length: 140})'/>
</div>
Silahkan ganti nilai 140 dengan yang diinginkan : 1-140

data:post.longSnippet

Cara penerapan :

<div class='...'>
  <data:post.longSnippet/>
</div>

Keterangan :

  • Minimal widget versi 1
  • Minimal layout versi 1 atau 2
  • Maksimal karakter 1000, tidak bisa ditambah
  • Minimal karakter terserah anda
  • Tidak mengandung tag html
Jika ingin mengurangi jumlah karakter bisa menggunakan contoh berikut :
<div class='...'>
  <b:eval expr='snippet(data:post.longSnippet, {length: 1000})'/>
</div>
Silahkan ganti nilai 1000 dengan yang diinginkan : 1-1000

data:posts.snippets.short

data:posts.snippets.short dapat digunakan untuk membuat sebuah ringkasan pendek sebuah artikel.

Cara Penerapan

<div class='...'>
  <data:post.snippets.short/>
</div>

Keterangan :

  • Minimal widget Versi 2
  • Minimal layout Versi 3
  • Maksimal karakter 100, tidak bisa ditambah
  • Minimal karakter terserah anda
  • Tidak mengandung tag html dan ganti baris
Jika ingin mengurangi jumlah karakter bisa menggunakan contoh berikut :
<div class='...'>
  <b:eval expr='snippet(data:posts.snippets.short, {length: 100})'/>
</div>
Silahkan ganti nilai 100 dengan yang diinginkan : 1-100

data:posts.snippets.long

Cara Penerapan

<div class='...'>
  <data:post.snippets.long/>
</div>

Keterangan :

  • Minimal widget Versi 2
  • Minimal layout Versi 3
  • Maksimal karakter 1000, tidak bisa ditambah
  • Minimal karakter terserah anda
  • Tidak mengandung tag html dan ganti baris
Jika ingin mengurangi jumlah karakter bisa menggunakan contoh berikut :
<div class='...'>
  <b:eval expr='snippet(data:posts.snippets.long, {length: 1000})'/>
</div>
Silahkan ganti nilai 1000 dengan yang diinginkan : 1-1000

data:post.body [snippet]

Cara Penerapan

<div class='...'>
<b:eval expr='data:post.body snippet { 
    length: 300, 
    links: true, 
    linebreaks: true, 
    ellipsis: true }'/>
</div>

Keterangan :

  • Minimal widget Versi 2
  • Minimal layout Versi 3
  • Maksimal karakter tidak ada, menyusaikan dengan jumlah karakter artikel
  • Minimal karakter terserah anda
  • Mengandung tag html tertentu
  • Mengandung ganti baris jika diinginkan

Penjelasan :

  • length : jumlah karakter yang ingin ditampilkan
  • links : menentukan apakah sebuah link/url (<a>...</a>) ditampilkan pada snippet.
    Nilai yang bisa berikan :
    true : jika ingin ditampilkan
    false : jika tidak
  • linebreaks menentukan apakah ganti baris (<br/>) diperlukan atau tidak.
    Nilai yang bisa berikan :
    true : jika baris ganti(line break) diinginkan
    false : jika tidak
  • ellipsis menentukan apakah tanda 3 poin ekspansi (...) ingin ditampilkan atau tidak
    Nilai yang bisa berikan :
    true : jika ya
    false : jika tidak
  • Tag HTML yang akan tampil adalah sbb:
    • <b>...</b>
    • <i>...</i>
    • <u>...</u>
    • <strong>...</strong>
    • <em>...</em>
    • <strike>....</strike>
    • <s>....</s>
    • <del>...</del>
    • ...
    Apakah bisa dihapus/dihilangkan, tidak bisa, hanya system blogger yang dapat berubahnya.

sumber: trik sonic