Snippet adalah deskripsi atau ringkasan artikel yang ada pada halaman utama blog pada card post atau populer post. Terkadang untuk dapat memaksimalkan desain blog kita perlu memotong jumlah karakter yang ada agar terlihat lebih rapih. Blogger memiliki tag cuplikan (snippet operator) untuk ini. Namun, kita dapat memanfaatkan tag cuplikan ini lebih jauh.
Tag Snippet Blogger
Kode tag snippet blogger adalah data:post.snippet atau data:post.longSnippet. Secara default tag ini menampilkan jumlah ringkasan sebanyak 140 - 1000 karakter. Untuk memotong jumlah karakter snippet tersebut kita bisa membuatnya seperti berikut
<p class='post-snippet'>
<b:eval expr='data:post.snippets.long snippet { length: 100 }'/>
</p>Jika teks tidak tersedia atau kosong:
<p class='post-snippet'> </p>Jelas bahwa kita dapat menyelesaikan ini dengan satu syarat, tetapi ketika kita harus melakukan ini di beberapa tempat, hal itu menjadi berulang dan membosankan.
Fungsi di Blogger
Kita bisa membuat fungsi yang merangkum operator snippet blogger untuk digunakan di berbagai widget dengan mudah. Berikut adalah code snippet untuk tutorial ini:
Sertakan fungsi tersebut di dalam markup "Umum" default <b:defaultmarkup type='Common'> agar tersedia secara global di template kamu
<b:includable id='@snippet'>
<b:comment>
Creates a snippet of a string
@param {string} string - Text to be shortened
@param {string} [tag="p"] - Container HTML tag
@param {string} [class] - Container class
@param {string} [id] - Container id
@param {number} [length=70] - Length of the string
@param {string} [ellipsis="..."] - Ellipsis to be added at the end of the string
</b:comment>
<b:if cond='data:string and (data:string snippet {
links: false,
ellipsis: false,
linebreaks: false
}) != ""'>
<b:with value='data:length ?: 70' var='length'>
<b:with value='(data:length + 0) == data:length ? (data:length * 1) : 70' var='length'>
<b:tag expr:name='data:tag ?: "p"'>
<b:class cond='data:class' expr:name='data:class'/>
<b:attr name='id' expr:value='data:id'/>
<b:eval expr='(data:string snippet {
length: data:length,
links: false,
ellipsis: false,
linebreaks: false
}) + (data:ellipsis ?: "...")'/>
</b:tag>
</b:with>
</b:with>
<b:else/>
<b:comment render='true'>No text to display</b:comment>
</b:if>
</b:includable>Fungsi ini @snippet membuat blok teks yang dipersingkat dari sebuah string. Fungsi ini juga melakukan pengecekan untuk memastikan string tersebut tidak kosong sebelum menampilkan blok lengkap. Anda juga dapat mengkonfigurasi blok HTML yang berisi teks yang dipersingkat, di antara pengaturan umum lainnya yang, dalam kebanyakan kasus, sudah memadai.
Selain itu, pastikan nilai panjang yang dimasukkan adalah angka yang valid. Ini sangat berguna jika tema kamu dirancang untuk khalayak umum untuk memastikan bahwa nilai yang dimasukkan pengguna tidak merusak tema.
Cara Penggunaan
Sekarang, untuk menggunakannya, kamu harus memperhatikan parameter berikut:Text String
Parameter ini wajib diisi dan merupakan data teks yang ingin Anda potong. Kamu dapat menggunakan tag data Blogger apa pun yang mengembalikan teks atau mengetiknya secara eksplisit.
<b:include data='{ string: data:post.snippets.long }' name='@snippet'/>HTML tag
Parameter ini memungkinkan kamu memilih tag HTML yang ingin digunakan sebagai wadah untuk teks yang dipotong. Kamu dapat menggunakan tag HTML valid apa pun seperti <html> div, p<html> span, <html>, dll.
<b:include data='{
string: data:post.snippets.long,
tag: "div"
}' name='@snippet'/><div>Truncated sample text...</div>CSS class
Parameter ini memungkinkan kamu menambahkan satu atau lebih kelas CSS ke kontainer teks yang dipotong. Kamu dapat menggunakan kelas CSS valid apa pun yang telah kamu definisikan di stylesheet template kamu sendiri.
<b:include data='{
string: data:post.snippets.long,
class: "snippet-text"
}' name='@snippet'/><p class='snippet-text'>Truncated sample text...</p>Identifier
Parameter ini memungkinkan kamu menambahkan pengidentifikasi unik ke wadah teks yang dipotong. Pengidentifikasi harus unik dalam dokumen HTML, jadi penggunaan parameter ini tidak disarankan kecuali kamu dapat menjamin bahwa pengidentifikasi tersebut tidak akan diulang.
<b:include data='{
string: data:post.snippets.long,
id: "snippet-1"
}' name='@snippet'/><p id='snippet-1'>Truncated sample text...</p>Length
Parameter ini memungkinkan kamu menentukan panjang teks yang akan dipotong. Nilai yang dimasukkan harus berupa bilangan bulat positif dan harus berada di antara 0 50 dan 0 1000 Jika tidak ditentukan, nilai defaultnya adalah 0 70.
<b:include data='{
string: data:post.snippets.long,
length: 100
}' name='@snippet'/>Ellipsis
Parameter ini memungkinkan kamu menentukan teks yang akan ditambahkan ke akhir teks yang dipotong. Secara default, teksnya adalah [nama teks] ..., tetapi kamu dapat mengubahnya menjadi teks lain yang kamu inginkan.
<b:include data='{
string: data:post.snippets.long,
ellipsis: " [selengkapnya]"
}' name='@snippet'/><p>Truncated sample text [selengkapnya]</p>Penutup
Dengan fitur kode ini memungkinkan kamu membuat snippet blogger yang dipersingkat dengan lebih mudah, mengurangi tugas berulang dan membantu kamu menghindari pengulangan kode dalam templat. Kamu dapat menyesuaikan fitur ini sesuai kebutuhan dan menambahkan lebih banyak parameter jika diinginkan.