2 Cara Mengatur Jumlah Snippet Di Homepage Blogger Supaya Terlihat Rapi

Tips Blogger kali ini wacana cara mengatur jumlah kata/huruf pada snippet di homepage Blogger/blogspot agar terlihat rapi. Cara berikut ini semacam menciptakan 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 memakai JavaScript

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

Silahkan masuk ke Edit HTML, kemudian cari isyarat di bawah ini.

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

Atau ini:

<data:post.snippet/>

Ganti isyarat di atas dengan isyarat berikut ini.

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

Lalu tambahkan isyarat JavaScript berikut ini, dibawah isyarat 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 akhirnya akan menjadi menyerupai 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 memakai tag conditional (widget khusus tampil di homepage), maka akhirnya akan menyerupai 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 yaitu 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 memakai JavaScript, cocok bagi Blogger yang ekonomis JavaScript. Terlebih dahulu silahkan lihat DEMO di Takis Template. Berikut caranya.

Silahkan masuk ke Edit HTML, kemudian temukan isyarat menyerupai ini.

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

Atau ini:

<data:post.snippet/>

Ganti isyarat tersebut dengan isyarat 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 isyarat CSS di atas yaitu yang memilih jumlah baris pada snippet. Silahkan ubah angka tersebut kalau ingin menciptakan jumlah baris pada snippet lebih banyak.

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

Demikian, terima kasih!

Advertisement