Meringkas Artikel Otomatis Dengan Javascript

Mad Trik - Mungkin cara ini adalah cara terkuno alias cara lawas untuk meringkas tampilan artikel di halaman depan blog. Ya, ada beberapa alasan kenapa saya menyebut ini cara yang kuno, karena sekarang ini sudah ada cara terbaik untuk meringkas tampilan artikel untuk blog yang lebih bagus dalam segi kecepatan.

Tapi saya belum akan membahasnya sekarang mungkin setelah beberapa artikel baru lainnya. Tapi untuk meringkas artikel yang sekarang ini, kita pakai cara yang paling umum waktu dulu untuk meringkas artikel, yaitu dengan menggunakan Javascript.

Ya, javascript. Ada kelebihan dengan meringkas artikel menggunakan cara ini, yaitu ringkasan artikelnya bisa kita tentukan sendiri, mau beberapa karakter pun terserah. Tapi ada juga kekurangannya, yaitu kecepatan muat halaman depan akan terasa berat.

Karena dengan menggunakan cara ini, gambar yang terdapat pada ringkasan artikel ukurannya akan seperti aslinya. Hanya saja ukuran lebar dan tingginya saja yang diperkecil dengan javascript yang ada. Tapi bukan berarti ukuran asli dari gambar itu juga diperkecil.

Tutorial ini nanti akan saya jelaskan pada kesempatan selanjutnya. Tapi sebelum itu mari kita balik ke pembahasan kita kali ini:

Tutorial ini hanya berlaku untuk tampilan artikel yang masih berupa postingan biasa. Yang belum diberi ringkasan sama sekali.

Dan jangan lupa sebelum melakukan hal ini, dianjurkan untuk terlebih dahulu backup kode template kamu untuk berjaga-jaga saja jika terjadi kesalahan yang tidak terduga.

<!-- Auto read more Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes - dengan thumbnail, no -tanpa thumbnail
summary_noimg = 430; //jumlah karakter jika tanpa thumbnail
summary_img = 340; //jumlah karakter jika ada thumbnail
img_thumb_height = 200; //ukuran tinggi thumbnail
img_thumb_width = 200; //ukuran lebar thumbnail
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx, chop) {
    if (strx.indexOf("<") != -1) {
        var s = strx.split("<");
        for (var i = 0; i < s.length; i++) {
            if (s[i].indexOf(">") != -1) {
                s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length);
            }
        }
        strx = s.join("");
    }
    chop = (chop < strx.length - 1) ? chop : strx.length - 2;
    while (strx.charAt(chop - 1) != ' ' && strx.indexOf(' ', chop) != -1) chop++;
    strx = strx.substring(0, chop - 1);
    return strx + '...';
}

function createSummaryAndThumb(pID) {
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if (thumbnail_mode == "yes") {
        if (img.length >= 1) {
            imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="' + img[0].src.replace(/\/s(320|400|640|1600)/, "\/s" + img_thumb_width) + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';
            summ = summary_img;
        }
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML, summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more End -->

Pasang javascript diatas, tepat diatas kode </head>.

Tahap selajutnya adalah mengganti <data:post.body>.

Nanti di template kamu mungkin ada dua kode <data:post.body>, yang pertama untuk tampilan mobile dan yang kedua untuk tampilan desktop. Cari saja yang tampilan desktop di dalam kode yang seperti ini <b:includable id='post' var='post'>.

Kemudian ganti <data:post.body> dengan kode dibawah ini:

<!-- Auto read more Start -->
    <b:if cond='data:blog.metaDescription == &quot;&quot;'>
      <!-- Then use the post body as the schema.org description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <data:post.body/>
  <b:else/>
        <div expr:id='&quot;summary&quot; + data:post.id'>
            <data:post.body/>
        </div>
        <script type='text/javascript'>
            createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
        </script>
    </b:if>
</b:if>
      </div>
    <b:else/>
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <data:post.body/>
  <b:else/>
        <div expr:id='&quot;summary&quot; + data:post.id'>
            <data:post.body/>
        </div>
        <script type='text/javascript'>
            createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
        </script>
    </b:if>
</b:if>
      </div>
   </b:if>
   
 <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
<!-- Auto read more End -->

Lalu jika sudah selesai simpan perubahan yang ada di template kamu. Jika ada kesalahan mohon berkomentar, karena kode-kode diatas sudah saya edit lagi agar hasilnya bisa maksimal.

Sekian artikel kali ini, jika ada permasalahan dalam menerapkan tutorial diatas silahkan buat komentar. Maaf jika ada salah-salah kita sama-sama belajar disini :)