Cara Mengatur Jumlah Snippet (Deskripsi) Postingan di Homepage

HaiSob apa kabar? pada kesempatan ini saya akan membagikan tutorial bagaimana cara mengatur atau mengubah jumlah karakter snippet atau deskripsi postingan yang biasanya tampil pada bagian homepage suatu blog.

Secara default, kode html untuk menampilkan deskripsi snippet yaitu <data:post.snippet/>,  jumlah karakter yang akan tampilkan adalah 100 karakter apbila postingan memiliki gambar thumbnail, dan 140 karakter apabila artikel tidak memiliki gambar thumbnail.

Cara Mengatur Jumlah Snippet (Deskripsi) Postingan di Homepage
Mengatur Jumlah Snippet Hompage Blog

Cara Mengubah Jumlah Karakter Snippet Postingan di Homepage


Berikut adalah cara membuatnya:

1. Masuk ke menu Template ➔ Edit Html
Cara Mengatur Jumlah Snippet (Deskripsi) Postingan di Homepage
Template ➜ Edit HTML

2. Selanjutnya, letakkan javascript dibawah ini tepat diatas kode </head>
<script type='text/javascript'>
snippet_count = 200;
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var snippet = strx.split("<");
for(var i=0;i<snippet.length;i++){
if(snippet[i].indexOf(">")!=-1){
snippet[i] = snippet[i].substring(snippet[i].indexOf(">")+1,snippet[i].length);
}
}
strx = snippet.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSnippet(pID){
var div = document.getElementById(pID);
var summ = snippet_count;
var summary = '<div class="snippets">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Keterangan : Bila pada template kamu sudah memiliki kode javascript tersebut, maka silahkan ganti saja jumlah karakter snippetnya. Untuk menambah atau mengurangi jumlah karakter silahkan ubah angka 200 pada kode snippet_count = 200.

3. Kemudian cari dan ganti semua kode <data:post.snippet/> dengan kode berikut ini
<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>
Catatan : Jika tidak ketemu kode <data:post.snippet/>, maka silahkan cari dan ganti kode berikut ini :
<div class='post-snippet' expr:data-snippet='data:post.snippet'/>
atau
<meta expr:content='data:post.snippet' name='description'/>
4. Simpan template.

Selesai, sekian postingan kali ini, semoga bermanfaat.
Join This Site