Cara Membuat Auto Readmore with Thumbnail di Blogspot

Cara Membuat Auto Readmore with Thumbnail di Blogspot ini cukup sederhana dan work! Auto Readmore berguna untuk meringkas konten di halaman beranda (Home) sehingga kamu bisa mengisi home dengan lebih banyak konten ringkas.

Cara membuat auto readmore ini nantinya akan menampilkan ringkasan konten lengkap dengan thumbnail, dan auto readmore tidak akan tampil di halaman statis. Mantap! Dengan cara membuat auto readmore semua konten blogmu akan otomatis terpenggal (ringkas) di halaman home/beranda.

Cara Membuat Auto Readmore with Thumbnail di Blogspot 

Bagaimana membuat auto readmore dengan thumbnail di blogspot? Gampang, ini caranya, ikuti saja langkah-langah di bawah ini:

• Login ke Blogger, pilih Template
• Masuk ke editor Template HTML (Download template buat jaga-jaga)
• Kopi kode di bawah ini dan paste sebelum kode  </head> 

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 230;

summary_img = 140;

img_thumb_height = 100;

img_thumb_width = 100;

</script>

<script src='https://sites.google.com/site/bukarahasiahost/azmeereadmore/azmee-readmore.js' type='text/javascript'/>

keterangan Kode Auto Readmore

• summary_noimg = 230; adalah banyaknya karakter yang akan ditampilkan ketika tidak ada gambar di dalam posting anda, anda bisa mengubah jumlahnya.

• summary_img = 140; adalah banyaknya karakter yang akan ditampilkan ketika terdapat gambar di dalam posting anda, anda bisa mengubah jumlahnya.

• img_thumb_height = 100; adalah tinggi gambar thumbnail, anda dapat mengubah nilainya.

• img_thumb_width = 100; adalah lebar gambar thumbnail, anda dapat mengubah nilainya.

Cari kode <data:post.body/> 

Kopid kode di bawah ini dan ganti kode <data:post.body/> yang kamu temukan tadi

<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 Kode Auto Readmore

• padding-top:5px, ganti nilainya untuk membuat jarak dengan tulisan di atas readmore.

• float:right, ganti right dengan left jika ingin readmore muncul di sebelah kiri.

• Anda bisa mengganti Read more dengan kata-kata lain misalnya "baca selanjutnya", "Read the rest of this entry", "Lanjut gan...", "Monggo dilanjut!", atau apa sajalah...

Simpan template dan lihat hasilnya. Kini blog kamu sudah memakai auto readmore, sehingga konten blog pun tertata lebih ringkas, rapi, dan ganteng maksimal. (Sumber: Cara membuat auto readmore thumbnail di blogspot)

Tweet

Artikel keren lainnya: