Cara Membatasi Panjang Judul Posting Blog Otomatis

Baca Juga

Cara Membatasi Jumlah Karakter, Kata, atau Panjang Judul Posting Blog Secara Otomatis. Juga berlaku untuk Popular Posts dan Nama Blog.

KITA harus membatasi pandang judul posting supaya terindeks Google. Di halaman hasil pencarian (SERP), Google menampilkan maksimal 60 karakter. Jika judul kepanjangan, akan terpotong dan diganti titik-tik.

Namun, tips berikut ini bukan tentang membuat judul menjadi 60 karakter itu, tapi membatasi panjang judul posting agar "pas" dengan desain layout, khsususnya Auto Readmore Dua Kolom seperti template New Johny Wuss Series.

Dalam desain halaman depan dua kolom, biasanya jika ada judul terlalu panjang, maka akan mengubah tampilan. Kode berikut ini untuk membatasi panjang judul secara otomatis, sehingga tampilan halaman depan rapi.

Kode sama fungsinya dengan Plugin Limit Post Title WordPress. Di blog selfhosted WP, kita tinggal menginstall plugin tersebut untuk membatasi panjang judul tulisan di halaman depan.

Untuk di blogspot, di bawah ini caranya. Tips ini sudah diterapkan di Blog DEMO New Johny Wuss.

Cara Membatasi Jumlah Karakter Judul Posting Halaman Depan

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode </body>

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

CATATAN: 42 adalah jumlah karakter -- bisa diubah menjadi lebih besar atau kecil.

Cara Lain Membatasi Panjang-Pendek Judul Postingan 

Cara lain membatasi panjang judul postingan blog. Berikut ini contoh tampilan judul tulisa sebelum dan setelah dibatasi di template New Johny Wuss Series.

Panjang Judul Sebelum Dibatasi

Panjang Judul Setelah Dibatasi

Cara #1: Menggunakan Kode CSS

Judul akan hanya memenuhi batas lebar (width) ruang yang tersedia. Jika kepanjangan, otomatis terpoting seperti gambar di atas.

Ini kodenya:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Contoh Penerapan: Tambahkan pada kode judul postingan halaman depan.

.post-title h2 {white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis}

Cara #2 : Menggunakan Kode JavaScript. 

Simpan di atas kode </body>

<script type="text/javascript">
//<![CDATA[
$(".title").each(function(){
    if($(this).text().length>30)
    {$(this).text($(this).text().substr(0, 30)+'...');}
});   
//]]>
</script>

Contoh Penerapan:

<script type="text/javascript">
//<![CDATA[
$(".post-title").each(function(){
    if($(this).text().length>35)
    {$(this).text($(this).text().substr(0, 35)+'...');}
});   
//]]>
</script>

Kode Lainnya:

Kita bisa menggunakan kode pemotong judul post yang terlalu panjang ini:

<b:eval expr='snippet(data:post.title, {length: 50})'/>

atau

<b:eval expr='snippet(data:post.title.escaped, {length: 50})'/>

Ganti kode <data:post.title/> yang ada pada judul postingan halaman depan dengan kode di atas. 

Cara Membatasi Ringkasan Popular Post

Kode di atas juga bisa digunakan untuk membatasi jumlah karakter judul Popular Post. Caranya, dengan mengganti kode post h2, .post h2 a menjadi popular-posts ul li, sebagai berikut:

<script type='text/javascript'>//<![CDATA[$('.popular-posts ul li .item-snippet').each(function(){  var txt=$(this).text().substr(0,50);  var j=txt.lastIndexOf(' ');  if(j>42)     $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));});//]]></script>

Cara Membuat Judul Blog Muncul Satu Kata Saja

1.Cari kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; 

2. Simpan kode berikut ini tepat di atasnya.

<script type='text/javascript'>
$(document).ready(function(){var e=$("body").find("#header .title a").eq(0).text().split(" ");$("body").find("#header .title a").eq(0).text(e[0])});
</script>

Demikian Cara Membatasi Panjang Judul Posting Blog Otomatis plus membatasi ringkasan popular post dan memunculkan judul blog satu kata saja.

Baca juga: Cara Menambah/Mengurangi Jumlah Ringkasan Auto Readmore Halaman Depan

Good Luck & Happy Blogging! (http://www.contohblog.com).*

Sumber1, Sumber2, Sumber3