Estuary Enim
Acer Aspire 4750
Home Blogger Templates Tricks & Hacks Tools & Generators Blogs Directory Falling Objects

Cara Membuat Read More Otomatis di Blog

Cara Membuat Read More Otomatis di Blog

Cara membuat Read More otomatis di Blogspot dengan menambahkan kode javascript pada template blog. Kali ini yang akan di bahas mengenai cara membuat Read More di blogspot atau blogger. Ok kita memulai membahas mengenai cara membuat read more otomatis di blogspot.

Sebelum melangkah  ke cara membuat read more otomatis di blogspot terlebih dahulu kita memahami apa itu read more? dan apa fungsi read more? Read more dalam bahasa indonesia yaitu " Baca Selengkapnya " dan fungsi read more itu sendiri adalah 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. Langkah cara membuat read more otomatis di blogspot.

Langkah-langkahnya SBB:

  • Login ke Blog anda
  • 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 hapus kode tersebut, dan ganti kode tersebut dengan kode dibawah ini / letakkan kode dibawah ini pas pada tempat kode yang kita hapus tadi.
<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'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitphUlNQkol06Lrzc_sNBnMEsZnoi-kbiwnGmnKrtoO3XfVAk-TG_0xWpTD-OygHhQm0XUBpoWxWJDGmnjCfor6EgowlpEeXUlH4ucdUtJ2rKTj-KhRN1QEVqg9GWFat4nCGhFEx9dppCB/s800/Read-More2.gif" height="24" width="140" /></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
  • Simpan dan lihat hasilnya
Anda bisa merubah sebagian. Yang bisa dirubah adalah yang berwarna merah dan berikut ini adalah keterangannya :
  1. summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf
  2. summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar
  3. img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan
  4. img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.
  5. Anda juga dapat ganti Icon read more yang anda inginkan, caranya ganti kode icon yang berwarna merah diatas contohnya : <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitphUlNQkol06Lrzc_sNBnMEsZnoi-kbiwnGmnKrtoO3XfVAk-TG_0xWpTD-OygHhQm0XUBpoWxWJDGmnjCfor6EgowlpEeXUlH4ucdUtJ2rKTj-KhRN1QEVqg9GWFat4nCGhFEx9dppCB/s800/Read-More2.gif" height="24" width="140" />  hapus yang berna merah dan letakan kode icon yang anda inginkan. Juga anda dapat mengubah Icon Read more menjadi tulisan saja misalnya " >> Read more ", maka anda tinggal menghapus / mengganti kode <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitphUlNQkol06Lrzc_sNBnMEsZnoi-kbiwnGmnKrtoO3XfVAk-TG_0xWpTD-OygHhQm0XUBpoWxWJDGmnjCfor6EgowlpEeXUlH4ucdUtJ2rKTj-KhRN1QEVqg9GWFat4nCGhFEx9dppCB/s800/Read-More2.gif" height="24" width="140" /></img> menjadi tulisan >> Read More atau Baca selengkapnya.
Semoga artikel ini bermanfaat. Selamat mencoba dan semoga berhasil.

Sumber Oleh
0 komentar: