19 Mei 2013

Cara Membuat Auto Readmore Pada Blog

Readmore merupakan sebuah navigasi yang digunakan oleh banyak website maupun blog yang banyak memuat tulisan-tulisan berbasis berita, tutorial dan lain-lain. Readmore membuat blog terlihat lebih minimalis, karena memotong sebuah posting sehingga hanya 3-4 baris kalimat yang tampil yang kemudian sisa tulisan posting tersebut akan tampil jika tombol readmore-nya diklik oleh pembaca.
Auto Readmore Pada Blog

Selain membuat blog terlihat minimalis, kelebihan lain yang dimiliki blog Auto Readmore adalah akan membuat blog lebih cepat tapi tetap dapat menampilkan (index list) konten lebih banyak dalam satu halaman seperti halaman home. Sebenarnya readmore ini sudah disediakan oleh pihak blogger namun jika kita melakukan secara manual akan membuat kita kerepotan sendiri, karena harus memilih memotong di bagian mana. Nah, jika kita membuat auto readmore ini kita tidak usah memasang readmore / jump break secara manual.

Cara Membuat Auto Readmore Pada Blog :

  1. Login akun blogger Anda.
  2. Lalu pilih Template > Edit HTML
  3. Cari kode </head>
  4. Salin kode di bawah ini dan tempel di atas kode </head>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <script type='text/javascript'>
          var thumbnail_mode = &quot;
          float &quot;;
          summary_noimg = 250;
          summary_img = 200;
          img_thumb_height = 150;
          img_thumb_width = 150;
        </script>
        <script type='text/javascript'>
          //<![CDATA[
          function removeHtmlTag(b, a) {
            if (b.indexOf("<") != -1) {
              var d = b.split("<");
              for (var c = 0; c < d.length; c++) {
                if (d[c].indexOf(">") != -1) {
                  d[c] = d[c].substring(d[c].indexOf(">") + 1, d[c].length)
                }
              }
              b = d.join("")
            }
            a = (a < b.length - 1) ? a : b.length - 2;
            while (b.charAt(a - 1) != " " && b.indexOf(" ", a) != -1) {
              a++
            }
            b = b.substring(0, a - 1);
            return b + "..."
          }
          function createSummaryAndThumb(d) {
            var f = document.getElementById(d);
            var a = "";
            var b = f.getElementsByTagName("img");
            var e = summary_noimg;
            if (b.length >= 1) {
              a = '<span style="float:left; padding:0 10px 2px 0;"><img src="' + b[0].src + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';
              e = summary_img
            }
            var c = a + "<div>" + removeHtmlTag(f.innerHTML, e) + "</div>";
            f.innerHTML = c
          };
          //]]>
        </script>
      </b:if>
    </b:if>
    Keterangan :
    summary_noimg = 250; → Jumlah huruf pada saat tidak ada gambar pada postingan
    summary_img = 200; → Jumlah huruf pada saat terdapat gambar pada postingan
    img_thumb_height = 150; → Tinggi Gambar (thumbnail)
    img_thumb_width = 150; → Lebar Gambar (thumbnail)
  5. Kemudian cari kode <data:post.body/> yang kedua, kemudian ganti kode <data:post.body/> dengan kode berikut ini :
    <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;static_page&quot;'>
        <data:post.body/>
        <b:else/>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <div expr:id='&quot;summary&quot; + data:post.id' style='text-align:justify;'>
            <data:post.body/>
          </div>
          <script type='text/javascript'>
            createSummaryAndThumb( &quot; summary <data: post.id/> &quot;);
          </script>
          <span class='rmlink' style='float:left'>
            <a expr:href='data:post.url'>
              baca selengkapnya »
            </a>
          </span>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <data:post.body/>
        </b:if>
      </b:if>
  6. Kemudian simpan template.
Baca juga : Cara Menghilangkan Link Sumber Otomatis

Isikan komentar Anda dengan bijak.