Cara Membuat Read More Otomatis

Sebenarnya tutorialnya ini sudah lama dan banyak blogger tutorial yang sudah membuatnya, tapi saya menulis kembali hanya ingin menjadi koleksi pribadi saya ketika sedang membuat atau memodifikasi template baru.

Memang setiap kali saya harus membuat template kebanyakan harus membuat read more otomatis seperti ini karena memang sangat efisien dan minimalis terlihatnya, tidak seperti read more terdahulu yang harus memenggal artikel seperti code fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> agar tidak tampil sepenuhnya di halaman depan blog kita.

Langsung saja kita praktekan cara membuat read more otomatis tersebut di bawah ini:

Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan 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;'/>

Kalau sudah kita ke tahap selanjutnya

Pertama, silahkan menuju menu DESIGN -> Edit HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> jangan lupa download template lama terlebih dahulu buat antisipasi jika pemasangan read more gagal.

<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>

Kode Warna Biru berfungsi agar halaman statis tidak ikut terpenggal seperti halaman HOME.

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah ini :

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua 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>

Kalo sudah silahkan klik preview kalau memang masih ragu-ragu lalu silahkan disimpan dan lihat hasilnya.

Cara Posting Kode HTML Pada Blog

Anda tentu bingung ketika ingin memposting atau menampilkan tutorial yang berisikan kode HTML, tapi ternyata kode tersebut tidak tampak dalam postingan blog anda.
Apabila itu terjadi pada anda, dan anda ingin kode tersebut tampil maka anda harus mem-parse kode tersebut. Begini caranya :

1. Buka halaman Parse kode ini.
2. Kopi kode yang mau di posting ke dalam kotak.
3. Ambil kode hasil parse dan masukkan ke dalam posting blog anda.

Sebagai contoh kode berikut :

<a href="http://mazzalee.blogspot.com" target="_blank">Download Here</a>