AUTO READMORE TANPA MENGGUNAKAN JAVASCRIPT

Dengan banyaknya posting blog yang dibuat, readmore untuk setiap posting sangat perlu dan penting. Auto readmore javascript digunakan untuk menampilkan hanya sebagian artikel melalui fungsi document.write agar posting yang muncul di halaman index/label arsip tidak terlalu panjang, sedangkan isi artikel masih bisa di telusuri oleh peramban. Kelemahannya adalah tidak ramahnya dengan mesin pencari dan alat terjemahan online, ada pula masalah artikel terlalu panjangn dalam posting maka akan mendapatkan error pada paging pagination Blogger. kali ini saya akan memperkenalkan auto readmore tanpa javascript yang ramah untuk mesin pencari juga tidak terlalu berat untuk load karena hanya memuat kutipan dari isi artikel.
bagamana membuat readmore ini?

Langkah-langkahnya adalah:

Langkah 1: Tambahkan kelas untuk menampilkan post-thumbnail. Ada 2 jenis gambar yang ditampilkan di sebelah kiri atau kanan.

1. Menampilkan gambar di sebelah kiri:

Tambahkan kode berikut di atas kode ]]> </ b: skin>:

.post-thumbnail{float:left;margin-right:20px}

2. Menampilkan gambar di sebelah kanan:

Tambahkan kode berikut di atas kode ]]> </ b: skin>:

.post-thumbnail{float:right;margin-left:20px}

Langkah 2: Tambahkan Kode auto readmore. Ada 4 jenis untuk memilih readmore otomatis.

1. Auto readmore dengan foto:

Ganti  kode <data:post.body/> dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
   </b:if>
   <data:post.snippet/>
  </div>
  <div class='jump-link'>
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

2. Auto readmore dengan gambar dan menampilkan gambar default untuk posting tanpa gambar:

Ganti kode <data:post.body/> dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
   <b:else/>
    <img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoQuH9t3RKof8v0OPMVjwdkdDxLk_Rh-g0yYDgP9xQcPIqAd89p-b8yQdOnniHB9SiUx-5lY1DaRcrNRXg18whYzJfTmYKKcIjt1JRV8Hm6nMGilHfapuL41GOT8woTD3mc9FryKnuIElu/' width='72px' height='72px'/>
   </b:if>
   <data:post.snippet/>
  </div>
  <div class='jump-link'>
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

3. Auto readmore dengan gambar. Tidak readmore dengan artikel terbaru:

Ganti <data:post.body/> dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <data:post.body/>
     <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>
   <b:else/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     </b:if>
     <data:post.snippet/>
    </div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
   </b:if>
  <b:else/>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    </b:if>
    <data:post.snippet/>
   </div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
   </div>
  </b:if>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

4. Auto readmore dengan gambar dan menampilkan gambar default untuk posting tanpa gambar. Tidak readmore dengan artikel terbaru:

Ganti <data:post.body/> dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <data:post.body/>
     <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>
   <b:else/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     <b:else/>
      <img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoQuH9t3RKof8v0OPMVjwdkdDxLk_Rh-g0yYDgP9xQcPIqAd89p-b8yQdOnniHB9SiUx-5lY1DaRcrNRXg18whYzJfTmYKKcIjt1JRV8Hm6nMGilHfapuL41GOT8woTD3mc9FryKnuIElu/' width='72px' height='72px'/>
     </b:if>
     <data:post.snippet/>
    </div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
   </b:if>
  <b:else/>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    <b:else/>
     <img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoQuH9t3RKof8v0OPMVjwdkdDxLk_Rh-g0yYDgP9xQcPIqAd89p-b8yQdOnniHB9SiUx-5lY1DaRcrNRXg18whYzJfTmYKKcIjt1JRV8Hm6nMGilHfapuL41GOT8woTD3mc9FryKnuIElu/' width='72px' height='72px'/>
    </b:if>
    <data:post.snippet/>
   </div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
   </div>
  </b:if>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

Kode <data:post.snippet/> adalah kode potongan jumlah dan panjang cuplikan posting. 
Seperti yang telah disebutkan dalam posting saya sebelumnya kutipan dari posting berjumlah 140 karakter karena (Blogger telah memperbarui jumlah karakter dalam widget <data:post.snippet/> sekarang kurang dari jumlah karakter <data:post.snippet/> di widget PopularPosts), karakter cukup untuk mengisi ruang kosong agar sesuai dan tidak kosong.

Gambar yang muncul melalui perintah Data: post.thumbnailUrl. 
Ini adalah gambar artikel default blogger yang telah diubah, ukurannya 72x72  dalam ukuran piksel. Perlu diperhatikan bahwa gambar harus di upload melalui Insert gambar pada tool posting Blogger, atau melalui alamat url gambar, agar gambar posting dapat muncul. Prosedur di atas adalah alt atribut judul artikel untuk gambar, hal ini membantu meningkatkan SEO untuk blog Anda.

Sebelum melakukan prosedur ini, Anda perlu menghapus auto readmore yang telah sobat buat dan semoga sukses.