Mengatur Jumlah Karakter Snippet Blogger Tanpa Javascript

Cara Mengatur Jumlah Huruf Karakter di Snippet Blogger

Snippet adalah ringkasan atau deskripsi kalimat singkat dari artikel yang tampil di halaman utama (homepage) Blogger. Sama seperti artikel sebelumnya tentang membuat dan resize ukuran thumbnail di Blogger tanpa Javascript, lagi-lagi kebanyakan pembuat template menampilkan snippet menggunakan Javascript. Padahal cuma pakai tag bawaan Blogger pun bisa.

Fungsi yang digunakan untuk menampilkan snippet di Blogger adalah data:post.snippet atau data:post.longSnippet. Maka ketika digunakan dalam template akan seperti ini:
<data:post.snippet/>
<data:post.longSnippet/>


Secara default data:post.snippet akan menampilkan kalimat ringkasan sebanyak 140 karakter / huruf. Sedangkan data:post.longSnippet menampilkan 1.000 karakter. Lalu bagaimana cara mengatur jumlah huruf pada snippet di homepage Blogger ketika kita menginginkan kalimat yang lebih panjang atau pendek?

Cara Menambah / Mengurangi Jumlah Huruf Snippet di Blogger Tanpa Javascript

Fungsi yang digunakan untuk mengatur jumlah kata di ringkasan snippet Blogger adalah snippet().
Syntax:
snippet(string, options)

Contoh pemanggilan:
snippet(data:post.body, {length: 150})

Sekarang mari kita aplikasikan ke dalam template. Pertama, hapus dulu fungsi Javascript telah dipasang sebelumnya. Cari kode seperti ini, kemungkinan akan berbeda, cari yang mirip-mirip, kemudian HAPUS.
<script type='text/javascript'>
snippet_count = 80;
//<![CDATA[
function removeHtmlTag(n,e){if(-1!=n.indexOf("<")){for(var t=n.split("<"),i=0;i<t.length;i++)-1!=t[i].indexOf(">")&&(t[i]=t[i].substring(t[i].indexOf(">")+1,t[i].length));n=t.join("")}for(e=e<n.length-1?e:n.length-2;" "!=n.charAt(e-1)&&-1!=n.indexOf(" ",e);)e++;return n=n.substring(0,e-1),n+"..."}function createSnippet(n){var e=document.getElementById(n),t=snippet_count,i='<div class="snippets">'+removeHtmlTag(e.innerHTML,t)+"..."+"</div>";e.innerHTML=i}
//]]>
</script>

Next, cari kode ini dan HAPUS juga.
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script>

Lalu ganti kode kedua diatas menggunakan kode yang ini:
<b:eval expr='snippet(data:post.body, {length: 150})' />
Angka 150 adalah jumlah karakter snippet yang tampil. Silakan ubah sesuai keinginan masing-masing.

Terakhir simpan template dan lihat hasilnya.


Cukup gitu doang kok. Bandingkan deh dengan versi Javascript yang lebih ribet dan bertele-tele. Jelaslah cara mengganti jumlah karakter snippet di Blogspot tanpa Javascript ini lebih unggul. Efisiensinya sangat jauh berbeda.

Kalau mau repost wajib cantumkan blog Igniel sebagai sumber referensi ya. Hargailah penulis yang susah payah menulis artikel ini untuk pertama kali ketika blog lain belum pernah membuatnya.
SHARE Pin Share
Artikel Terkait
12 komentar
  1. Mbak, Snippet itu apa ya .... maaf kurang tau

    BalasHapus
    Balasan
    1. Snippet itu deskripsi singkat di homepage.

      Hapus
  2. beda templet beda kode ya. ?

    BalasHapus
    Balasan
    1. Yang beda cuma javascript yang mesti dihapus.
      Kode snippet bawaan Bloggernya sama.

      Hapus
  3. kalo misalkan judul tampilan homepage blognya yang diatur jumlah huruf/karakternya gimana ya mbak?

    BalasHapus
    Balasan
    1. Saat ini cuma bisa pakai Javascript buat potong karakter di Blogspot.

      Hapus
  4. waahh mantap mbak, berhasil

    BalasHapus
  5. saya coba ganti tapi gambar di homepage jadi hilang,, solusinya gimana mba?

    BalasHapus
    Balasan
    1. Kalau sesuai tutorial pasti tidak akan mempengaruhi yang lain. Pastikan tidak ikut menghapus script buat thumbnail juga.

      Hapus
  6. lagi lagi aku udah dibantu sama mb ignil. . makasi mb . blogku kudupinter udah hampir perfect. . .salam blogger blogspot

    BalasHapus
  7. Mantap tutorialnya sangat detail..

    BalasHapus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!