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.

Bagaimana Caranya Untuk Buat Auto Read More

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

Bagaimana Caranya Untuk Buat Auto Read More

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.

12 comments:

  1. Yes! I love auto read more. Pernah buat tapi tak jadi auto. Sudahnya kini mesti beli template dengan auto read more 😊

    Btw, tq reen for the tips 👍

    ReplyDelete
    Replies
    1. Hahaha betul. Beli lagi senang kan dear!

      Delete
  2. Replies
    1. Harap info ni berguna dan mudah untuk loggers faham..

      Delete
  3. Thanks Reen... Mummy ni memang selalu pening ngn coding2 ni.. Gud Info..

    ReplyDelete
    Replies
    1. Hihihi harap Mummy faham dengan cara penerangan Reen.. Risau yang membacanya pening. Kena buat dulu, lepas tu baru tak pening ;p

      Delete
  4. Nice info reen...
    Tp kita ni jnis pening lalat tgk coding byk2 ni

    ReplyDelete
    Replies
    1. Hahahaa tak pe Alia.. Kalau Alia minat letak auto read more, Alia cuba buat step by step. In sya Allah tak pening lalat dah bila siap ;p

      Delete
  5. nice info reen.. tak pun ada satu lg cara copy and paste je satu script id='post' dari template yg mmg ada read more tu.. :D

    ReplyDelete
    Replies
    1. Reen cuba copy melalui template reen dan cuba kat template percubaan reen, tetap tak menjadi. Masih tak sepandai hasif bab code ni ;p

      Delete