Konsep Auto Read-More Baru dengan Bantuan Textarea

Mencoba memanfaatkan <textarea> untuk mencegah peramban memparse kode HTML di dalam posting.

Selama ini kita telah mengenal kode JavaScript pembuat ringkasan posting otomatis yang hanya bekerja dengan cara mengambil HTML di dalam posting, kemudian mengurangi jumlahnya untuk menciptakan ringkasan dan menampilkannya lagi dengan cara mengganti konten posting awal dengan ringkasan teks baru yang sudah dikurangi. Namun terkadang cara ini tidak efektif, karena biasanya peramban masih tetap bisa mengakses dan memparse semua kode HTML di dalam posting. Karakter posting memang terpotong, tapi beban muat tidak berubah.

Tapi, sebenarnya masih ada cara yang sederhana untuk mencegah peramban mengakses semua kode HTML posting saat kita belum memasuki halaman tunggal posting tersebut, yaitu dengan cara mengubah data yang dipanggil (dalam hal ini adalah konten posting) menjadi sesuatu yang bukan kode HTML, sesuatu yang lebih ringan dan tidak memicu peramban untuk mengerjakan apapun kecuali mengunduh teks yang ada. Yaitu dengan cara memanfaatkan <textarea>
Bungkus semua konten posting yang ada dengan elemen <textarea> sehingga kode HTML apapun yang ada di dalamnya tidak akan pernah diparse oleh peramban karena peramban hanya akan menganggapnya sebagai teks biasa yang ringan dan tidak memberikan beban permintaan HTTP tambahan (misalnya dari gambar atau video yang ada di dalam posting):

<textarea id='text-1234'><data:post.body/></textarea>

Konsepnya hanya seperti itu. Dan sisanya, kita bisa menggunakan JavaScript untuk menampilkan sebagian konten dari area teks tersebut, kemudian kita masukkan hasilnya ke dalam kontainer lain sebagai HTML:

<textarea id='text-1234'>
  <data:post.body/>
</textarea>
<div id='container-1234'></div>
<script>

  // Ambil teks dari `<textarea>`, kemudian kurangi jumlah karakternya (menjadi 200 karakter)
  var summary = document.getElementById('text-1234').value.substring(0,200);

  // Sisipkan karakter yang telah dikurangi tersebut ke dalam kontainer di bawahnya
  document.getElementById('container-1234').innerHTML = summary + '&hellip;';

</script>

Thumbnail posting bisa kita dapatkan melalui elemen <data:post.thumbnailUrl/> dengan resolusi yang sudah diubah, sedangkan elemen <textarea> bisa kita sembunyikan dengan CSS. Proses penerapan selengkapnya bisa Anda baca mulai dari sini.

---

Membuat Posting Auto Read-More Blogspot Versi Manipulasi Textarea

Sebelum melakukan modifikasi, terlebih dahulu backup kode template Anda untuk berjaga-jaga jika terjadi kesalahan.

Pertama-tama, masuklah ke editor HTML template Anda kemudian cek Expand Template Widget. Temukan kode ini:
</head>
Salin kode ini kemudian letakkan di atasnya:

<script type='text/javascript'>
// Lightweight `auto read-more` hack for Blogger using `Textarea` by Taufik Nurrohman
// URL: https://plus.google.com/108949996304093815163/about
//<![CDATA[
var configSummary = {
    thumbnailSize: 100, // Define the post thumbnail size
    summaryLength: 300, // Define the summary length
    noThumbUrl: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png" // `no image` URL
};
function createPostSummary(a,b,c) {
    var text, doc = document, d = configSummary,
        copyFrom = doc.getElementById(a).value,
        pasteTo = doc.getElementById(b),
        postThumbnail = (c === "") ? d.noThumbUrl : c;
    text = copyFrom.replace(/<(.*?)>/g,"").replace(/[\n\r]+/g," ");
    pasteTo.innerHTML = '<img class="post-thumbnail" src="'+postThumbnail.replace(/\/s[0-9]+(\-c)?\//,'/s'+d.thumbnailSize+'-c/')+'" alt="thumbnail" style="width:'+d.thumbnailSize+'px;height:'+d.thumbnailSize+'px;">' + text.substring(0,d.summaryLength) + '&hellip;';
}
//]]>
</script>

Setelah itu cari baris kode yang tampak kurang lebih seperti ini:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
  <data:post.body/>
  <div style='clear:both;'/> <!-- clear for photos floats -->
</div>

Ganti semua kode di atas menjadi kode ini:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <data:post.body/>
    <b:else/>
      <textarea expr:id='&quot;postData-&quot; + data:post.id' style='display:none;'><data:post.body/></textarea>
        <p class='post-summary' expr:id='&quot;summaryContainer-&quot; + data:post.id'>
          <!-- for non/inactive JavaScript browsers -->
          <b:if cond='data:post.thumbnailUrl'>
            <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' itemprop='image' width='72'/>
          </b:if>
          <b:if cond='data:post.snippet'>
            <data:post.snippet/>
          </b:if>
          <!-- end for non/inactive JavaScript browsers -->
        </p>
        <p class='post-more-link'>
          <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.jumpText + &quot; &quot; + data:post.title'>
            <data:post.jumpText/>
          </a>
        </p>
        <script>createPostSummary(&quot;postData-<data:post.id/>&quot;,&quot;summaryContainer-<data:post.id/>&quot;,&quot;<b:if cond='data:post.thumbnailUrl'><data:post.thumbnailUrl/></b:if>&quot;);</script>
    </b:if>
  </b:if>
  <div style='clear:both;'/> <!-- clear for photos floats -->
</div>

Sisanya tinggal menambahkan kode CSS ini yang berfungsi untuk menggeser thumbnail gambar ke samping kiri ringkasan artikel. Letakkan kode ini di atas ]]></b:skin> atau </style>:

.post-thumbnail {
  display:block;
  float:left;
  margin:.2em 1em 0 0;
}

Klik Simpan Template.
Untuk template versi standar yang sekarang mungkin kodenya menjadi sedikit lebih rumit karena ada beberapa microdata yang disusun secara otomatis oleh Blogger. Mungkin suatu saat yang Anda temukan adalah baris kode seperti ini:

<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'>
    <data:post.body/>
    <div style='clear:both;'/> <!-- clear for photos floats -->
  </div>
<b:else/>
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
    <data:post.body/>
    <div style='clear:both;'/> <!-- clear for photos floats -->
  </div>
</b:if>

Tidak masalah. Ganti semua kode di atas dengan kode ini:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <data:post.body/>
    <b:else/>
      <textarea expr:id='&quot;postData-&quot; + data:post.id' style='display:none;'><data:post.body/></textarea>
        <p class='post-summary' expr:id='&quot;summaryContainer-&quot; + data:post.id'>
          <!-- for non/inactive JavaScript browsers -->
          <b:if cond='data:post.thumbnailUrl'>
            <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' itemprop='image' width='72'/>
          </b:if>
          <span itemprop='description'>
            <b:if cond='data:post.snippet'>
              <data:post.snippet/>
            </b:if>
          </span>
          <!-- end for non/inactive JavaScript browsers -->
        </p>
        <p class='post-more-link'>
          <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.jumpText + &quot; &quot; + data:post.title'>
            <data:post.jumpText/>
          </a>
        </p>
        <script>createPostSummary(&quot;postData-<data:post.id/>&quot;,&quot;summaryContainer-<data:post.id/>&quot;,&quot;<b:if cond='data:post.thumbnailUrl'><data:post.thumbnailUrl/></b:if>&quot;);</script>
    </b:if>
  </b:if>
  <div style='clear:both;'/> <!-- clear for photos floats -->
</div>

Unduh Sampel Template

Template Minima Black dengan posting yang sudah dimodifikasi. Silakan dipelajari:

Unduh Sampel Template