Cara Mudah Membuat Readmore Pada Blogger

Cara Mudah Membuat Readmore Secara Otomatis di Blogger/blogspot - Materi ini sebetulnya telah banyak dibahas pada blog2 lain , namun tidak ada salahnya juga kita bahas disini khusus untuk sahabat yang "lagi belajar ngeblog"

Pada blog ini sendiri tampilan readmorenya adalah seperti gambar berikut ini "Baca Lanjutannya":

Dengan menggunakan readmore berarti kita menyisakan banyak ruang untuk menampung beberapa artikel terbaru yang akan tampil pada home page kita,, readmore membuat tampilan blog kita terlihat lebih rapi dan yang terpenting adalah waktu loading yang diperlukan untuk membuka sebuah halaman pd blog kita tentunya juga akan semakin cepat,,

Untuk lebih jelasnya , berikut adalah cara membuat readmore otomatis versi terbaru

Catatan : jika anda sudah memasang Read More versi lama sebaiknya anda kembalikan dulu kodenya seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal anda sesuaikan saja)

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

Jika sudah mari kita mulai ketahap selanjutnya :

Langkah Pertama tentunya anda haruslah Login dulu ke akun blogger milik anda, selanjutnya silahkan menuju menu DESIGN -> Edit HTML

Lalu Cari kode </head> Jika sudah ketemu,, kemudian letakkan kode script dibawah ini tepat di atas kode </head> tadi,,

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 280;
summary_img = 250;
img_thumb_height = 70;
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 2px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>
</b:if>
</b:if>

selanjutnya klik save template/simpan.
[Kode Warna Biru berfungsi agar halaman statis tidak ikut terpenggal seperti pada halaman Utama.]

Jika sudah anda simpan selanjutnya Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah ini

<data:post.body/>

Jika sudah anda temukan selanjutnya hapus dan ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script
type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE -
<data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Terakhir klik simpan dan lihat hasilnya

[jika berhasil maka tulisan readmore tersebut akan disertai dengan judul artikel dibelakangnya]

Keterangan:

var thumbnail_mode = "float";  (kita dapat memutuskan apakah
letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti
dengan (no-float)
summary_noimg = 250; (Untuk menentukan berapa banyak karakter yang akan ditampilkan pada posting tanpa gambar / thumbnail)
summary_img = 250; (Untuk menentukan berapa banyak karakter yang akan ditampilkan di
posting dengan gambar / thumbnail)
img_thumb_height = 120; (Untuk mengatur tinggi Thumbnail )
img_thumb_width = 120; (Untuk mengatur lebar Thumbnail )

Selamat mencoba 

Terima kasih untuk ocimweb.com yang telah menjadi sumber inspirasi untuk artikel ini

Jangan lupa baca juga yang ini ya >>