Membuat Read More Otomatis pada Blog

Okeee jumpa lagi.... Sebelum masuk ke pokok pembahasan tentang . Kita harus tau apa itu yang dimaksudken. Seperti contoh pada blog ini adalah tulisan Lanjutken Baca >> Fitur Read More difungsikan untuk menyingkat postingan kita dalam beberapa paragraf sehingga menjadikan Blog kita lebih ringan pada saat di-load pertama kali oleh pengunjung, terutama untuk Blog yang mempunyai tampilan yang penuh dengan gambar, dengan fitur Read More ini yang ditampilkan hanya sebagian kecil dari paragraf pertama artikel postingan anda dan disertai dengan satu buah gambar yang berupa thumbnail sehingga loading dari Blog anda pada saat pertama kali dibuka oleh pengunjung menjadi lebih cepat, itu menurut pemikiran saya, mungkin saja ada fungsi-fungsi yang lain. Oke sudah paham ???

Ada 2 tahap untuk dapat memasang  Lanjutken Baca >> atau Read More ,yaitu :

TAHAP PERTAMA

Buka Dasbord Blog anda, kemudian pilih Tata letak, lalu pilih Edit HTML Centang pada pilihan Expand Template Widget untuk membuka semua code-code tersembunyi di dalam templete Blog anda. Cari ( atau tekan control F ) dan dapatkan code ini:

</head>

 hapus kode tersebut dan ganti dengan kode saya :

<!-- scrip beyes tahap1 read more -->

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 800;
summary_img = 650;
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script src='http://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/>
</head>

<!-- end scrip beyes tahap1 read more -->

TAHAP KEDUA

 Pada tahap ini posisi kamu masih tetap di edit html so km jangan kabur dulu. Misi kamu belum selesai. Untuk menyelesaikan cari kode ( atau tekan Crtl + F ) :

  <data:post.body/>

 hapus kode tersebut dan ganti dengan kode saya :

<!-- start scrip tahap2 beyes read more -->
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&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>LANJUTKEN SAJA MAS >></b></a></span>
</b:if>
</b:if> <!-- end scrip tahap2 beyes read more -->
 
Jika sudah selesai   SIMPAN PERUBAHAN   Dan sekarang coba anda lihat hasilnya. Bagaimana berhasil khan ??? Jangan Lupa Tinggalkan Komentar.

Jika anda berhasil coba lakukan modifikasi :

1. Coba lakukan Modifikasi angka yang saya cetak warna hijau dengan kreasimu :
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)

summary_noimg = 800; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)

summary_img = 650; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)

img_thumb_height = 200; (Thumbnail 'tinggi dalam piksel)

img_thumb_width = 200; (Thumbnail 'lebar dalam piksel)

2.  Jika akan mengganti dengan gambar :

Hapus LANJUTKEN BACA MAS >> kemudian ganti dengan kode 

<img src=”http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif” align=”right” border=”0″/>

 Maka hasilnya akan seperti : 

 Oke Sekian dulu..... Terimakasih atas kunjungan anda