Cara Membuat Readmore Otomatis Tanpa Script di Blogger

Pada Kesempatan kali ini Blog Pintasku akan berbagi Tutorial Cara Membuat Readmore Otomatis Tanpa Script, dimana kita akan memanfaatkan Post Snippet untuk meringkasnya. Sebelumnya juga saya pernah membuat tutorial tentang membuat auto readmore tapi itu masih menggunakan script.


Memang apa perbedaan antara yang pake script dengan yang tidak memakai script ? Perbedaan terletak dari Kecepatan Loading Blog, dengan tidak menggunakan script kecepatan blog akan lebih ringan. Oke langsung saja silahkan simak penjelasan saya dibawah ini.

Cara Membuat Auto Readmore Tanpa Javascript di Blog

1. Jika Sudah Pernah Memakai Auto Readmore dengan Javascript.

Jika sobat sebelumnya sudah pernah Memasang Readmore Otomatis Di Blog Dengan Javascript, silahkan untuk ikuti terlebih dahulu Tutorial dibawah ini. tapi jika belum pernah silahkan untuk lewati saja Tutorial ini.

  1. Masuk ke Editor HTML seperti biasanya.
  2. Cari kode berikut ini (Gunakan CTRL + F untuk mempermudah pencarian)
  3. <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>
  4. Cari Script Auto Readmore, biasanya suka diletakan di atas kode </head>, jika sudah ketemu lalu hapus script tersebut. dan ganti dengan kode dibawah ini.
  5. <b:if cond="data:post.firstImageUrl">
      <a expr:href="data:post.url">
    <img class="thumbnail-post" expr:src="data:post.firstImageUrl" expr:title="data:post.title" /></a>
    <b:else>
      <a expr:href="data:post.url">
    <img class="thumbnail-post" src="http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg" expr:title="data:post.title" /></a>
      </b:else>
    </b:if>
    <div class='post-snippet'>
      <data:post.snippet/>
    </div>
  6. Kemudian Save atau Simpan dan lihatlah hasilnya.

2. Belum pernah menggunakan Auto Readmore (Masih Polos)

Jika templates blog agan masih polos belum Menambahkan Readmore Otomatis silahakan ikuti tutorial berikut ini.

  1. Login ke Blogger.
  2. Masuk ke Editor HTML ( Templates > Editor HTML )
  3. Copy kode berikut ini dan letakan tepat di atas kode </b:skin>
  4. Cari kode <data:post.body/> dan ganti dengan kode berikut ini. Biasanya ada 2 atau lebih kode tersebut, jika yang ke 2 gagal coba dengan yang ke 3 dan ke 4
  5. <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <b:if cond='data:post.firstImageUrl'>
          <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a>
        <b:else/>
          <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a>
        </b:if>
        <div class='post-snippet'>
          <data:post.snippet/>
        </div>
        <div class='rm-button-wrap'>
          <a class='button' expr:href='data:post.url'>Baca Selengkapnya</a>
        </div>
      </b:if>
    </b:if>
    
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <data:post.body/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <data:post.body/>
    </b:if>
  6. Save atau Simpan dan Lihatlah Hasilnya.
Keterangan :

  • kode  <b:if cond='data:post.firstImageUrl'> : Sebagai Thumbnail atau Gambar.
  • kode <div class='post-snippet'> : Sebagai Deskripsi singkat atau snippetnya.
Sekian Tutorial Blogger dari Blog Pintasku mengenai Cara Membuat Readmore Otomatis Tanpa Script di Blogger Semoga tutorial ini bisa bermanfaat untuk semuanya. Terimakasih

No comments:

Post a Comment