Buat content auto read more pada blog dan website dengan teknik paparan gambar (thumbnail) menjadikan blog korang tampil lebih kemas dan menjimatkan ruang serta dapat memaparkan posting artikel yang lebih banyak jumlahnya pada blog tidak perlu untuk scroll down blog korang yang lama dan memakan masa yang terlalu jauh dibawah.

Membuat auto read di blog juga dapat meningkatkan pageview


Berbagai fungsi dan teknik boleh kita pelajari dari segi paparan posting pada posisi reka letak posting mengikut citarasa atau keinginan korang supaya blog korang nampak lebih menarik serta style auto read more blog tampak lebih profesional dimata pengunjung, secara tidak langsung blog korang dapat meningkat pageview PV halaman serta mengoptimakan prestasi ketahap lebih membanggakan laman blog korang terutamanya dalam persaingan yang semakin sengit.bagi yang masih baru dalam dunia berblogging ini teknik ini wajib diterapkan.

Selain daripada fungsi buat auto read more, gambar juga kita boleh ubah mengikut saiz pilihan korang, reka letak dan template background korang boleh sesuaikan dari segi saiz dan kedudukan gambar yang diperlukan ,kebiasaannya kedudukan gambar berada paling kiri dibahagian post, kita lihat hasil seperti contoh gambar dibawah, ok jom segment blog tutorial kali ini : 

Pada korang yang mengunakan platform wordpress ternyata lebih mudah dengan tersedia adanya auto read more plug in wordpress

Cara buat auto readmore blogspot
Contoh auto readmore blog


Ok untuk step dan langkah seterusnya apa yang perlu korang lakukan terlebih dahulu :

Pertama sekali korang perlu buat

1.  Login ke blog korang terlebih dahulu > blogger.com

Dasboard  >  Rancangan  >  Edit HTML, centang pada "Expand template widget

2. Kemudian korang copy kod di bawah ini dan paste tepat sebelum kod </head>

 <script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 440;
summary_img = 350;
img_thumb_height = 130;
img_thumb_width = 160;
</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-3;
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>=2) {
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>

Korang boleh ubah dan gantikan kod saiz  mengikut kesesuaian dengan pilihan korang, dengan auto readmore content korang  lebih teratur nampak :


1. summary_noimg = 440; (karakter yang ditampilkan tanpa gambar)

2. summary_img = 350; (karakter yang ditampilkan dengan gambar)

3. img_thumb_height = 130; (ukuran tinggi untuk thumbnail gambar)

4. img_thumb_width = 160; (ukuran lebar untuk thumbnail gambar)

5. Langkah seterusnya korang  cari kod <data:post.body/>, dan gantikan dengan kod script seperti dibawah ini
:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/><data:post.body/><b:else/><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:right;padding-top:20px;'><a expr:href='data:post.url'>read more "<data:post.title/>"</a></span></b:if><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></b:if>

Kod yang betanda hijau, korang boleh gantikan dengan lebih menarik mengikut citarasa dan kesesuaian korang, Contohnya: teks seperti 'Read More', 'Baca Selengkapnya' dan 'Baca Seterusnya' korang juga boleh meletakkan imej seperti gambar mengunakan link url gambar sepert format jpg, png  dll auto read more jimat ruang posting artikel


4.Ok langkah terakhir korang boleh save. 

Ciri terbaik pasang auto readmore pada blog


1. Auto read more pageview meningkat
2. Jimat ruang posting auto read more
3. Auto read more meringgankan loading blog dan responsif
4. Paparan auto read more nampak kemas menarik

Ok kepada korang semua boleh lah mencuba cara buat auto read more semoga blog tutorial ini dapat menyelesaikan masalah korang serta memberi manfaat.

Lebih baharu Lebih lama