March 9, 2020

Cara Membatasi Panjang Judul Posting Blog Otomatis

March 9, 2020

Membatasi Panjang Judul Posting
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.

Membatasi Panjang Judul Posting

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 Sebelum Dibatasi

Panjang Judul Setelah 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

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

10 comments on Cara Membatasi Panjang Judul Posting Blog Otomatis

  1. wah baru tau kalo judul posting maksimal 60 karakter, kalo permalink sama judul post blog beda pengaruh buruk atau bagus gan?

    ReplyDelete
  2. hallo mas CB, blognya keren hi speed of loading.

    boleh tanya cara bikin tulisan "Spam Detected..." dg stabillo kuning, spt di komen atas ini. so cool ...! terimakasih mas.

    ReplyDelete
    Replies
    1. Kode anti-spam:
      http://www.contohblog.com/2015/10/cara-memasang-kode-anti-komentar-spam.html

      Delete
  3. Hallo maaf gan saya mencoba menggunakan kode diatas
    saya letakkan di atas /body kemudian saya kecilkan angka menjadi 10 untuk mempermudah test sukses apa tidaknya script ini, ternyata tidak memberikan perubahan gan..
    Kemudian saya mencoba mengganti .post h2, .post h2 a dengan selector h3.post-title, h3.post-title a yang saya sesuaikan dari bentuk template saya seperti dibawah ini

    h3 class="post-title entry-title" itemprop="name"
    a href="#" JUDULLLL /a
    /h3

    hasilnya tetap tidak memberikan perubahan..
    Sebelumnya maaf tidak bermaksud menyalahkan isi tutorial ini, tapi sebaliknya saya ingin ingin tahu bagaimana solusi untuk membatasi jumlah karakter judul postingan pada halaman depan..

    Terima kasih
    Salam Blogger

    ReplyDelete
    Replies
    1. Saya coba juga gak bisa.

      Buat yang gak bisa boleh coba tambahin css ini di h2.post-title.entry-title & h2.post-title.entry-title a (saya pake h2, kalo agan pake h3 tambahinnya yang di h3)

      white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;

      Work di saya.

      Delete
    2. Terima kasih banyak mas, akhirnya work juga

      Delete
  4. Wah, makasih banget nih buat admin contohblog, saya memang cari-cari ini dari dulu, soalnya kalau template yang support mode responsive kadang2 kalau titlenya panjang dibiarin aja... untung ada script ini! trims salam Bang Jarwo :D

    ReplyDelete
  5. WORK!! mantep nih makasih ya.

    ReplyDelete

Contact Form

Name

Email *

Message *