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
2 Cara Mengatur Jumlah Snippet di Homepage Blogger

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!
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K
Free and premium blogger templates