Cara Buat Read More Otomatis

Cara Buat Read More Otomatis. Sebelumnya dari Hackosphere pernah dikenalkan read more yang menggunakan script kode <span id="fullpost"> yang ditempatkan diawal kalimat lalu dilanjutkan dengan kalimat berikutnya sampai akhir lalu diberikan script kode </span>. Kini ada cara yang lebih enjoy dikit, karena ada read more otomatis sehingga tidak perlu lagi menggunakan script kode <span id="fullpost"> ... </span>.

Berikut ini langkah-langkah cara membuat read more otomatis :

• Dashbord > Rancangan > Edit HTML, lalu centang bagian kotak Expand Widget Template
• Download dulu template anda sebelumnya.
• Gunakan Ctrl+F untuk mencari </head>
• Jika sudah, lalu copy script di bawah ini tepat di atas </head>
  

  <script type='text/javascript'>
  var thumbnail_mode = &quot;float&quot; ;
  summary_noimg = 230;
  summary_img = 140;
  img_thumb_height = 100;
  img_thumb_width = 120;
  </script>
  <script src='https://sites.google.com/site/bukarahasiahost/azmeereadmore/azmee-readmore.js' type='text/javascript'/>

  keterangan:
  
  • summary_noimg = 300; adalah banyaknya karakter yang akan ditampilkan jika tidak ada gambar dalam postingan.
  • summary_img = 280; adalah banyaknya karakter yang akan ditampilkan jika ada gambar dalam postingan.
  • img_thumb_height = 100; adalah tinggi gambar thumbnail.
  • img_thumb_width = 120; adalah lebar gambar thumbnail.
  Catatan: besarnya angka di atas dapat disesuaikan dengan keinginan anda.
• Selanjutnya cari <data:post.body/> dengan menggunakan Ctrl+F, jika sudah lalu ganti dengan script berikut:
  

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <data:post.body/>
  <b:else/>
  <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>
  <div style='clear: both;'/><span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>
  </b:if>

  Keterangan:
  
  • padding-top:5px, merupakan jarak antara tulisan di atas dengan readmore.
  • float:right, merupakan posisi readmore, yang akan muncul di sebelah kiri.
• Selesai, untuk amannya lebih baik di-preview dulu, jika sudah benar baru disimpan.