Cara Membuat Read More Otomatis Pada Blog

Hai sobat…

Selamat datang kembali di blogku. Kali ini saya akan sedikit sharing ke sobat semuanya tentang Read more pada blog.

Adakah yang belum tahu apa itu Read more??

      Read more itu sejenis tulisan (dapat berupa tulisan “Read more”, “baca selengkapnya”, “Read post”, dsb) yang ada di halaman depan suatu blog berguna untuk meringkas postingan blog yang panjang menjadi lebih ringkas. Apabila Read more diklik maka akan membawa pengunjung ke postingannya secara utuh.

      

      Read more pada blog sangat penting bagi tampilan blog tersebut. Blog yang dipasang read more pasti lebih ringan loadingnya saat diakses pengunjung dibandingkan dengan blog yang tidak dipasang read more. Hal ini dikarenakan pemasangan read more dapat meringkas postingan yang panjang menjadi lebih pendek, sehingga meringankan pengaksesan. Selain itu, read more juga membuat tampilan halaman depan blog menjadi lebih rapi dan enak dilihat.

      Ada dua cara pemasangan Read more, yakni Read more manual dan Read more otomatis. Dimana-mana yang namanya otomatis pasti lebih mudah dibandingkan yang manual. Begitu juga dengan Read more. Maka dari itu, pada postingan kali ini saya akan membahas cara memasang Read more secara otomatis.

      Read more otomatis dilengkapi dengan thumbnail gambar dan otomatis menyesuaikan jumlah huruf yang ditampilkan. Jadi jika postingan yang sobat buat mengandung gambar, gambar tersebut secara otomatis akan dijadikan sebagai thumbnail gambar.

Simak penjelasan berikut:

• Login ke dashboard blogger
• Klik template lalu klik edit HTML kemudian klik Lanjutkan
• Jangan lupa centang kotak kecil pada tulisan expand Template Widget
• Carilah kode berikut:
</head>
• Untuk memudahkan pencarian, carilah dengan cara klik F3 atau klik ctrl+F
• Setelah kode tersebut ketemu, letakkan di atas kode </head> dengan kode di bawah ini:
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
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 = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}


var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>


• Jika sudah, carilah kode <data:post.body/>
• Lalu ganti kode tersebut dengan kode berikut 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'>READMORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


• Terakhir, klik simpan template dan tutup

Keterangan pada kode di atas :

1. summary_noimg merupakan jumlah karakter yang ditampilkan tanpa menggunakan gambar dalam postingan blog.
2. summary_img merupakan jumlah karakter yang ditampilkan ketika dalam postingan blog terdapat gambar.
3. img_thumb_height merupakan tinggi gambar yang ditampilkan.
4. img_thumb_width merupakan lebar gambar yang ditampilkan.
5. Tulisan “READ MORE” dapat diganti sesuai keinginan kita, misalnya diganti dengan “baca selengkapnya”

Selamat mencoba

Semoga Postingan saya ini berguna bagi sobat semuanya