2 Cara Mengatur Jumlah Snippet di Homepage Blogger Agar Terlihat Rapi

Tips Blogger kali ini tentang cara mengatur jumlah kata/huruf pada snippet di homepage Blogger/blogspot agar terlihat rapi. Cara berikut ini semacam membuat readmore otomatis, namun hanya terfokus pada snippetnya saja, deskripsi atau kalimat singkat yang mewakili artikel tertentu di homepage.

Tutorial sebelumnya: Kode Anti Copas, Cara Agar Blog Tidak Dapat di CTRL+P

Bagi yang ingin mengganti snippet di homepage blognya, silahkan mengikuti salah satu cara berikut ini.

1. Mengatur jumlah kata pada snippet di homepage Blogger menggunakan JavaScript

Cara ini seperti yang digunakan oleh Mas Sugeng pada template EvoMagz. Mengatur jumlah kata pada snippet/summary homepage dengan JavaScript, berikut caranya.

Silahkan masuk ke Edit HTML, lalu cari kode di bawah ini.

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

Atau ini:

<data:post.snippet/>

Ganti kode di atas dengan kode berikut ini.

<div class='post_summary' itemprop='articleBody'><data:post.body/></div>

Lalu tambahkan kode JavaScript berikut ini, dibawah kode yang diganti tadi.

<script>
//<![CDATA[
$('.post_summary').each(function(){var txt=$(this).text().substr(0,140);var j=txt.lastIndexOf(' ');if(j>42)$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));});
//]]>
</script>

Hingga hasilnya akan menjadi seperti ini.

<div class='post_summary' itemprop='articleBody'><data:post.body/></div>
<script>
//<![CDATA[
$('.post_summary').each(function(){var txt=$(this).text().substr(0,140);var j=txt.lastIndexOf(' ');if(j>42)$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));});
//]]>
</script>

Jika menggunakan tag conditional (widget khusus tampil di homepage), maka hasilnya akan seperti ini:

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<div class='post_summary' itemprop='articleBody'><data:post.body/></div>
<script>
//<![CDATA[
$('.post_summary').each(function(){var txt=$(this).text().substr(0,150);var j=txt.lastIndexOf(' ');if(j>42)$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));});
//]]>
</script>
</b:if>

Keterangan: angka 150 adalah jumlah kata yang akan tampil sebagai snippet di homepage. Silahkan ubah dan sesuaikan dengan kebutuhan blog Anda.

Simpan template.

2. Mengatur jumlah baris pada snippet di homepage Blogger dengan manipulatif CSS/tanpa JavaScript 

Cara berikut ini lebih kepada mengatur jumlah baris yang diisi oleh kata-kata pada snippet di homepage. Cara berikut tidak menggunakan JavaScript, cocok bagi Blogger yang hemat JavaScript. Terlebih dahulu silahkan lihat DEMO di Takis Template. Berikut caranya.

Silahkan masuk ke Edit HTML, lalu temukan kode seperti ini.

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

Atau ini:

<data:post.snippet/>

Ganti kode tersebut dengan kode ini.

<div class='post_summary' itemprop='articleBody'><data:post.body/></div>

Lalu tambahkan juga CSS berikut ini, letakkan di atas </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
.separator {display:none}
.post_summary{color:#666;line-height:1.4em;margin:0;font-size:13px;font-weight:normal;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;height:40px;overflow:hidden}
</b:if>

Keterangan: angka 2 pada kode CSS di atas adalah yang menentukan jumlah baris pada snippet. Silahkan ubah angka tersebut jika ingin membuat jumlah baris pada snippet lebih banyak.

Cara yang kedua di atas juga dapat diterapkan pada template AMP.

Demikian, terima kasih!

Baca Juga: