Bagaimana Caranya Untuk Buat Auto Read More?

Assalamua'laikum..

Hi..!

Pernah dengar tentang Read More atau nama lain yang biasa kita dengar iaitu Continue Reading? Butang Read More ini dapat memperkemaskan lagi blog anda serta nampak lebih professional.

Ianya juga memudahkan pelawat blog anda untuk pilih topic yang menarik mata mereka daripada terus scroll hingga ke bawah dan mengambil masa yang banyak membuatkan mereka adakalanya cepat bosan.

Bagaimana caranya untuk buat auto read more a.k.a continue reading? Ikuti langkah ini dan pastikan untuk buat backup template dulu ya.

Langkah pertama : Pergi ke Template → Edit HTML → klik mana-mana dalam kotak code. Sebab apa? Sebab.. kejap lagi nak search code. Kalau tak klik kotak tersebut, tak dapat detect bila search nanti.

Langkah kedua : Tekan CTRL + F (akan keluar satu box comel seperti gambar dibawah. Lihat anak panah berwarna kuning).

Langkah ketiga : Copy dan kemudian paste code ini <data:post.body/> didalam ruangan SEARCH.

Langkah keempat : Tekan enter 2 atau 3 kali. Sebab.. code tersebut akan ada sebanyak 2 kali/3 kali atau 4 kali. Apa yang anda perlu buat, hanya cari code yang ke 2. Macam mana nak tau tu code pertama atau kedua? Kena tengok nombor yang tertera di kiri anda. Haaaa... nampak?

Langkah kelima : Dah jumpa code no dua kan? Lepas itu copy code dibawah dah kemudian REPLACE code yang anda cari tadi.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&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;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&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>

Langkah keenam : Cuba tengok warna merah kat code atas.. Nampak perkataan Read More kan? Perkataan ni anda boleh tukar kepada ayat lain.. Seperti, Teruskan Baca.. atau Baca Lagi.. atau Continue Reading untuk dalam bahasa inggeris.

Langkah ketujuh : Copy dan kemudian paste code ini pula </head> didalam ruangan SEARCH → Tekan enter. Jumpa code tersebut? Kalau dah jumpa.. ikut langkah seterusnya.

Langkah kelapan : Atas code </head> tadi, pastekan code ni pula. Jangan REPLACE ya, hanya perlu paste sahaja.

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 426;
img_thumb_width = 640;
</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, pURL, pTITLE){
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: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
.readmore a {text-decoration: none; }
</style>
</b:if></b:if>

Langkah kesembilan : Nampak tak warna oren, hijau, unggu dan turquoise? Jom kita geledah numbor di setiap warna yang Reen dah bezakan.

Oren          : Untuk paparkan berapa banyak patah perkataan yang tiada gambar.

Hijau         : Untuk paparkan berapa banyak patah perkataan yang ada gambar. 

Unggu       : Untuk kecilkan gambar ataupun besarkan gambar pada ketinggian gambar (height).

Turquoise : Untuk kecilkan gambar ataupun besarkan gambar pada lebar gambar (width).

Tips berguna dari Reen untuk anda, sekiranya di ruangan unggu tambah atau kurang nombor, contoh tambah 20. Pastikan di ruangan turquoise juga tambah 20. Sebab? Kalau tambah numbor yang berbeza, gambar akan jadi cacat. Tak percaya? Sila cuba. Hihihi Kalau tak cuba tak tahu ;p

Untuk di ruangan oren dan hijau, terpulang nak letak berapa banyak nombor yang berbeza sekalipun. Ditanggung beres punya! 

Langkah kesepuluh : Klik preview template, pastikan semua cantik, kemas dan menepati citarasa anda, kemudian baru klik save template. 

Selesai.. Tahniah kerana berjaya buat! Kalau tak berjaya, mungkin template anda tidak support code diatas.