Cara mengatur snippet artikel pada Blogger - Peteng Pikir : Artikel Seputar SEO, Film, Webiste, HTML, Gadget, dan Masih Banyak Lagi

Post Top Ad

Thursday, 21 February 2019

Cara mengatur snippet artikel pada Blogger

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

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

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.

#Data XML

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.

1. 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 anda 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

2. data:post.longSnippet


data:post.longSnippet hampir sama dengan data:post.snippet hanya saya karakternya lebih panjang

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

3. data:posts.snippets.short


data:posts.snippets.short adalah digunakan untuk membuat sebuah ringkasan pendek sebuah artikel di blogger.

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 value 100 dengan yang diinginkan : 1-100

4. 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>

Silakan ganti nilai 1000 dengan yang diinginkan : 1-1000

5. 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


Nah itu dia 5 Cara mengatur snippet artikel pada Blogger. jika anda ingin menanyakan sesuatu anda bisa menulis komentar di bawah ini.

No comments:

Post a comment

Post Bottom Ad