Cara Membuat Read More Otomatis Pada Blog

Pada postingan kali ini Shella mau share nih tentang bagaiman membuat Read More otomatis pada blog. Tapi sebelum shella menjelaskan bagaimana cara membuatnya, alangkah lebih baiknya sobat mengetahui dulu apa kegunaan readmore tersebut. Fungsi read more pada blog yaitu untuk meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik.

Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan, begitu pengunjung membuka Read more atau baca selengkapnya barulah pengunjung bisa membaca artikel penuh blog anda. Nah, jika sobat sudah tau kegunaannya langsung saja menuju langkah pembuatannya .

 Langkah-langkah cara membuat Read More Otomatis di Blogspot
  • Login ke Blog sobat Sheliciouss.
  • Buka halaman design > Edit HTML > centang Expand template widget
  • Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
  • Paste kode berikut tepat dibawah </head>
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img =340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

  • Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>  ( seperti biasan gunakan CTRL + F untuk mempermudah pencarian. Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama.
  • Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah ini
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'> Read More ... </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
  • Jika sudah selesai simpan template dan lihat hasilnya ..
Ada sebagian yang bisa sobat rubah yang saya beri warna biru :
  • summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf.
  • summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar.
  • img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan.
  • img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.
  • dan tulisan readmore pun bisa sobat ganti dengan lihat selengkapnya atau dengan gambar ..
Cukup mudahkan sobat Sheliciouss bagaimana menerapkan tutorial tersebut diblog sobat ? nah terlihat lebih rapihkan sekarang artikel yang ada pada blog sobat ? sekian tutorial kali ini yang bisa Shella bagi ke sobat Sheliciouss semua, semoga bermanfaat .

Subscribe to receive free email updates:

0 Response to "Cara Membuat Read More Otomatis Pada Blog"

Post a Comment

Silahkan tinggalkan komentar, No spam Sobat ...