Konsep Auto Read-More Baru dengan Bantuan Textarea

Tabel Konten
  1. Membuat Posting Auto Read-More Blogspot Versi Manipulasi Textarea 
Auto Readmore Hack for Blogger with 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.

Saat ini tidak ada cara yang bisa dibilang paling tepat untuk mengatasi masalah ini, dan satu-satunya cara yang paling sesuai dengan prosedur adalah dengan memanfaatkan elemen <data:post.snippet/> yang sebenarnya merupakan elemen untuk blog tampilan seluler (baca di sini).

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>
// 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: "//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(/\s+/g," ");
    pasteTo.innerHTML = '<img class="post-thumbnail" src="' + postThumbnail.replace(/\/s\d+(\-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>

47 Komentar

  • Unknown

    Mesti bilang WAW nih mas \o/ yang jelas akan membuat tempe lebih ringan ya :D.

    Ijin coba sample templatenya mas. Salam sukses

  • Beben Koben

    bahaya kalo maen textarea ma iframe dengan blogspot bos...ngeriii
    bagus nih buat belajar :D

    • Unknown

      emang efeknya apa om? kok bahaya?

      • Beben Koben

        untuk blogspot atribut textarea serasa diberi batasan sendiri pemakaiaannya. contoh textarea: add a gadget button yg skrg rada ngaco jika di pakai di area postingan (dulu gak apa")
        contoh iframe: semua produk google anti iframe :P jd gak tampil jg :)
        kalo emang mau bermain dengan atribut textarea, yaaa harus kek Taufik Nurrohman yg ngerti script....qiqiqiqi

    • Ivan Niblesim

      benar apa yang dibilang master beben koben. iframe tidak disukai google. saya sendiri lebih suka halaman depan yang menampilkan hanya judul postingan. lebih enteng. tapi experiment bro DTE patut diacungi jempol. sayangnya gak ada demo.

    • Taufik Nurrohman

      Saya sudah cari di Google mengenai SEO Black Hat dengan textarea tapi tidak ada: https://www.google.com/search?q=SEO+black+hat+with+%3Ctextarea%3E

      Dan lagipula, konten textarea ini tidak berisi teks-teks spam, melainkan berisi paragraf asli dari posting, jadi Saya rasa tidak masalah. Punya link yang bagus soal ini?

      • Beben Koben

        bkn masalah di konten textareanya, tapi fitur ini sedikit membutuhkan pengetahuan dalam jika mau diterapkan di template kita :D
        kira" :P

      • Unknown

        referensi blackhat seo hidden text :
        http://www.shimonsandler.com/14-methods-to-hide-text/
        http://www.mattcutts.com/blog/avoid-keyword-stuffing/

  • Unknown

    Wah.. ada ilmu baru lagi..
    Terima Kasih mas Taufik..
    Sukses Selalu.. :)

  • Unknown

    thx infonya... sy punya masalah juga nih

    coba mampir: whatskpop.blogspot.com/

    Templatenya pake auto read more (bagus sih) CUMA, pos sebelum di klik read more itu keliatan seperti berantakan dan nyambung ky gitu... kl cuma memperbaiki aja bisa gak ya? (Read more tetep, cuma postingannya sebelum klik read more, beraturan/sesuai dengan yang kita buat)

    Hmmm... kl tau, kasitau sy ya... thx you

    • Adi Nugraha Y

      coba kasih Justify di class wrapfullpost gini:

      .wrapfullpost {
      text-align: justify;
      }

    • Taufik Nurrohman

      Kalau kamu memakai script yang Saya buat di atas, cukup ganti kode ini:

      copyFrom.replace(/<(.*?)>/g,"").replace(/[\n\r]+/g," ");

      dengan ini:

      copyFrom.replace(/<(.*?)>/g,"").replace(/[\n\r]+/g,"<br />");

      Untuk punyamu mungkin harus diubah seperti ini:

      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("<br /><br />");
      }
      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 + '...';
      }
  • Putra

    akal akalan multiline text-overflow :p

  • carwan

    oke (y)

  • Unknown

    Terima kasih atas tutorialnya mas
    saya akan pelajari dari sini :D

  • Unknown

    mas bisa ga kalo text areanya dijadikan dalam bentuk popup? jadi kan postnya snippet, tapi pada saat diklik judul dan/ atau readmore itu keluar popup text area gitu mas... hehe maap mas banyak mintanya :D

    • Taufik Nurrohman

      Textarea cuma untuk menyimpan teks. Kalau textareanya ditampilkan sebagai popup nanti hasilnya muncul sebagai teks berupa kode HTML, bukan posting yang bisa dibaca. Harus buat kontainer lagi untuk mengisi konten textarea sepenuhnya:

      <textarea expr:id='&quot;postData-&quot; + data:post.id' style='display:none;'><data:post.body/></textarea>
      ...
      ...
      <button class='show-full-post'>Full Post</button>
      <div class='popup-post' expr:id='&quot;fullPost-&quot; + data:post.id'></div>
      <script>
      document.getElementById(&#39;fullPost-<data:post.id/>&#39;).innerHTML = document.getElementById(&#39;postData-<data:post.id/>&#39;).value;
      </script>

      Setelah itu sembunyikan popup posting dengan CSS:

      .popup-post {display:none}

      Untuk menampilkan dan menyembunyikan posting bisa memakai JQuery yang memiliki efek/fungsi toggle:

      $(document).ready(function() {
      $('.show-full-post').on("click", function() {
      $(this).next().toggle("slow"); // tampilkan/sembunyikan posting penuh
      $(this).toggleClass('active'); // toggle nama kelas (untuk keperluan pewarnaan tombol)
      });
      });
      • Unknown

        dicoba dulu ya mas, ya walaupun masih kurang paham :-D
        nanti saya tanya-tanya lagi mas, makasih :-)

  • PamungkasBayu

    Om, Bisa gak kalau Gambar Thumbnailnya diambil bukan dari'post-thumbnail' itu? :(
    jadi biar imagenya ukuranya gak harus kotak / sama sisi? seperti cara auto-readmore di tutorial2 sebelumnya...
    tapi tetep pake konsep textarea itu.

    saya udah utak-atik javascriptnya tapi ga mudeng...

    maaf minta2 om...

    • Taufik Nurrohman

      Pakai ini saja bisa kok. Yang membuat kotak itu kan asalnya dari akhiran -c pada URL thumbnail. Kalau mau menampilkan ukuran asli tinggal dihapus saja akhiran itu. Ini kodenya:

      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+'/')+'" alt="thumbnail" style="width:'+d.thumbnailSize+'px;height:auto;">' + text.substring(0,d.summaryLength) + '&hellip;';
      }
      • PamungkasBayu

        oh, gitu om...
        saya kira 'post-thumbnail' emang harus kotak,

        makasih kalau gitu...,
        saya coba dulu...

        ntar laporan...

  • Unknown

    Ide yang benar-benar menarik sobat! Saya malah baru kepikiran sekarang. Tapi memang benar, textarea semacam ini tidak bisa bekerja dengan baik pada semua template Blogger. Saya tadi sudah coba dengan beberapa template, hasilnya ada yang override. Stidaknya mesti diakali dengan beberapa aturan CSS tertentu. Tapi terlepas dari itu, ini brilian :)

  • Unknown

    tanks mas udah share

    http://mvcline.blogspot.com/

  • Adjie Purbojati

    kalau thumbnailnya tidak tampil, itu masalahnya apa ya?

    • Taufik Nurrohman

      Gambar harus diunggah ke Picasa (bukan hasil copy-paste gambar dari situs lain).

  • mustajib

    Mas, untuk ganti tulisan "baca selengkapnya" gimana y? karena blog saya berbahasa inggris.

    terimakasih

    • Taufik Nurrohman

      Ubah saja pengaturan bahasa ke bahasa Inggris. Atau kalau tidak berhasil masuk ke tab Tata Letak kemudian klik Edit di pojok kanan atas. Setelah itu ubah teks “Baca selengkapnya »” menjadi “Read more »”.
      Atau kalau tetap tidak berhasil, ganti kode ini dengan kata “Read More”:

      <data:post.jumpText/>
  • Shalahuddin

    hilang, tulisan nya. hanya tinggal judul.

  • Unknown

    saya udah coba pasang di blogspot baru saya, yg mau lihat live view.nya disini gan : responsiver(.)blogspot(.)com...

  • Unknown

    misalnya thumbnailSize: 150
    kalau gitukan otomatis lebar dan tingginya 150px..
    biar lebarnya 250px dan tingginya 150px gimana caranya...????
    javascriptnya dirubah bagian yang mana..??

    • Taufik Nurrohman

      var thumbnailSize: 250;
      // ...
      var str  = '<di' + 'v class="post-thumbnail" style="width:250px;height:150px;overflow:hidden;">';
      str += '<im' + 'g src="'+postThumbnail.replace(/\/s[0-9]+(\-c)?\//,'/s'+d.thumbnailSize+'-c/')+'" alt="thumbnail" style="width:'+d.thumbnailSize+'px;height:'+d.thumbnailSize+'px;">';
      str += '</di' + 'v>';
      str += text.substring(0,d.summaryLength) + '&hellip;';
      pasteTo.innerHTML = str;
  • Bertuah

    Maaf, Mas. Saya mo tanya nih :D

    Thumbnailnya itu sekedar gambar aja, gimana caranya biar tumbnailnya mengarah (dikasi link) ke artikel?

    Trims Mas.

    • Taufik Nurrohman

      Tambah satu parameter lagi (dalam kode ini bernama d) pada fungsi createPostSummary untuk mengambil URL posting:

      function createPostSummary(a, b, c, d) {
      var text = "",
      str = "",
      doc = document,
      e = configSummary,
      copyFrom = doc.getElementById(a).value,
      pasteTo = doc.getElementById(b),
      postThumbnail = (c === "") ? e.noThumbUrl : c;
      text = copyFrom.replace(/<.*?>/g, "").replace(/[\n\r]+/g, " ");
      str += '<a href="' + d + '">; // Membungkus thumbnail dengan tautan
      str += '<img class="post-thumbnail" src="' + postThumbnail.replace(/\/s[0-9]+(\-c)?\//, '/s' + e.thumbnailSize + '-c/') + '" alt="thumbnail" style="width:' + e.thumbnailSize + 'px;height:' + e.thumbnailSize + 'px;">';
      str += text.substring(0, e.summaryLength) + '&hellip;';
      str += '</a>'; // Membungkus thumbnail dengan tautan
      pasteTo.innerHTML = str;
      }

      Lalu sisipkan data data:post.url ke dalam parameter fungsi yang dieksekusi:

      createPostSummary(
      &quot;postData-<data:post.id/>&quot;, // Elemen textarea
      &quot;summaryContainer-<data:post.id/>&quot;, // Kontainer teks
      &quot;<b:if cond='data:post.thumbnailUrl'><data:post.thumbnailUrl/></b:if>&quot;, // URL thumbnail
      &quot;<data:post.url/>&quot; // URL posting
      );
      • Bertuah

        Terimakasih Mas Taufiq. Saya akan coba2 terapkan di blog saya.

      • Bertuah

        Kode auto readmore dengan tambahan parameter d ini gagal, Pak Taufik. Thumbnail dan summary yg udah diatur gak muncul, yang muncul cuman thumbnail default blogspot 72px aja, Pak.

        Ada cara lainnya Pak Taufik?

        Maaf, kalo udah ngerepotin :D

  • Unknown

    auto read more ini mendukung thumbnail video selain youtube gak om ???

  • Unknown

    Hi brother, I have seen that your auto readmore trick is using by Savida Premium responsive template. But I am unable to increase the image thumbnail size as well as I have see that if I use wide image in blog then image thumbnail is cutting edge from left and right side. So how to centering the image thus full image can be display? Please reply me soon.

    May Allah bless you.

    • Taufik Nurrohman

      Replace this code:

      postThumbnail.replace(/\/s[0-9]+(\-c)?\//,'/s'+d.thumbnailSize+'-c/')

      with this:

      postThumbnail.replace(/\/s[0-9]+(\-c)?\//,'/s'+d.thumbnailSize+'/')
      • BloggerSpice

        Thanks for your reply..but unfortunately it is not working. Thumbnail image is not centering. Still image side is cutting. I have send you the total auto readmore code from the template... please kindly give me a solution. Thank you.

  • Unknown

    mas saya mau tanya nih . saya kan Make Template dari DTE . yang B1:A - TEMPLATE BLOGGER MINIMALIS RESPONSIF \o/ , nah saya mau ilangin tuh Kotak ReadMoe nya mas , Tapi saya cari Palah Pusing ~x( , mohon pencerahannya ya kang , :D

  • Mohamed Lamine K

    \ O / Thank you Mr Taufik , : -bd
    it can be change or delete textarea element , and run the script ?
    I hope rply

  • Mohamed Lamine K

    Hello Mr Taufik ^ _ ^ ,
    can we change the textarea element to other ?
    If no,
    can we delete it after the page loaded ?
    Thank you : -bd

    • Taufik Nurrohman

      The reason i’m using a <textarea> element because <textarea> will make the HTML content inside it becomes a plain text data. So that images, videos and other external assets will not be loaded inside a <textarea>. I don’t think there’s another element that can do something like that.

  • Unknown

    Kalau nambah judul diantara gambar sama summary post nya gimana Bang?

    • Taufik Nurrohman

      Tambah satu parameter lagi, namanya title untuk mengambil judul posting:

      function createPostSummary(a, b, c, title) {
      var text,
      html = "",
      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, ' ');
      html = '<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;">';
      html += '<h3>' + title + '</h3>'; // <= ini judul posting
      html += text.substring(0, d.summaryLength) + '&hellip;';
      pasteTo.innerHTML = html;
      }

      Lalu…

      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;, &quot;<data:post.title/>&quot;);
  • Iwan Efendi

    Makasih mas, sudah saya terapkan terima kasih.

Komentar telah ditutup.