Cara Membuat Read More di Halaman Depan Blog

Contoh Read More pada sebuah blog

Read more merupakan sebuah fitur dimana pembaca akan berhadapan dengan sebuah ulasan singkat dari sebuah artikel yang panjang. Dengan begitu, pembaca dapat menentukan
apakah ia ingin membuka artikel tersebut secara keseluruhan atau tidak. Ada beberapa hal yang membuat read more agaknya menjadi hal penting dalam kepenulisan blog.
Memperbanyak jumlah post dalam 1 halaman.
Membuat pembaca lebih nyaman karena tidak disodori artikel panjang apabila pembaca tidak menghendakinya.
Lebih enak dilihat untuk sebuah blog dengan isi beragam
Ketiga manfaat dari read more di atas akan berpengaruh pada jumlah kunjungan dan pembaca blog Anda. Oleh karena itu, pembuatan read more nampaknya menjadi sesuatu yang perlu Anda coba agar blog Anda dikunjungi lebih banyak orang. Berikut adalah cara-cara memunculkan fitur read more pada postingan blog Anda.

1. Login ke akun Blogger.
2. Masuk ke Dashbor dan klik Template.
3. Kemudian pilih Edit HTML.
4. Cari kode <data:post.body/> pada rangkaian kode HTML yang sedang Anda lihat. Gunakan CTRL+F untuk pencarian yang lebih cepat. Biasanya pencarian ini menghasilkan 3 temuan yang serupa. Silakan lanjutkan langkah ini dan fokus pada kode yang berada di urutan kedua. Jika nanti tidak berdampak apa-apa, coba pada urutan ketiga dan juga urutan pertama.
5. Jika sudah ditemukan, ganti kode tersebut dengan kode berikut.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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='readmore' style='float:right'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
Jika langkah di atas sudah dilakukan dengan benar, cari kode </head> dan masukkan kode berikut tepat di atasnya.
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Klik Save Template.
Selesai sudah. Kini Anda akan mendapatkan fitur read more dan postingan Anda menjadi lebih pendek. Sebelum mengakhiri tips ini, ada beberapa catatan yang perlu Anda pelajari.
Anda bisa mengubah ukuran gambar/thumbnail dengan mengganti angka 120 menjadi angka lain yang lebih kecil atau lebih besar. Silakan sesuaikan dengan selera dan kebutuhan Anda.
Anda bisa mengubah jumlah karakter yang ada pada cuplikan artikel dengan mengganti angka 490 (jika posting menggunakan foto) dan 400 (jika posting tanpa foto). Sebaiknya, gunakan jumlah karakter yang pas agar cuplikan tidak terlalu panjang atau tidak terlalu pendek.

Selamat mencoba Selamat berkreasi Salam dari @CyberClown ,,,