Cara Buat Read More Pada Blog

"Kalau ada masa boleh tak ajarkan cara nak buat read more contohnya macam dekat blog sis?" tutorial ini di minta oleh Aireen dan sis yakin pasti ada blogger lain yang berminat untuk tahu bagaimana untuk buat post style read more ni.

Kat sini sis kongsikan cara-caranya. Cara yang sis ajar ni memang cara yang selalu sis gunapakai semasa proses edit blog. Antara blog yang sudah sis siapkan dengan style readmore ni adalah http://mulan-sahbanu.blogspot.my/ dan https://pracomelkusksl.blogspot.my/

Macam biasalah, langkah awal :

- Login ke akaun blogger >> Dashboard >> Template / Theme >> Edit Html

- Klik cursor pada mana-mana bahagian di dalam kotak kod Html dan tekan Ctrl + F serentak untuk membuka kotak search

Sekarang copy dan paste kod di bawah ini ke dalam kotak search dan tekan Enter.
<data:post.body/>
Kod <data:post.body/> yang telah di cari ni bukan hanya ada satu tau. Sesetengah template ada dua kod <data:post.body/> dan ada juga template yang punya kod ini sebanyak 3 kali. Pastikan berhenti pada kod yang ke dua.

Apabila telah jumpa dan betul-betul yakin, sekarang padamkan kod <data:post.body/> tersebut dan gantikan dengan semua kod di bawah ini.
<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>
 Step seterusnya, copy dan paste kod di bawah ini pula ke dalam kotak search dan tekan Enter.
</head>

Bila dah jumpa,  copy semua kod di bawah ini dan paste kan betul-betul di atas (above) kod  </head> yang telah di cari tadi.
<script type='text/javascript'> posts_no_thumb_sum = 490; posts_thumb_sum = 400; img_thumb_height = 160; img_thumb_width = 180; </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>
Sekarang preview dulu, jika tiada apa-apa error, bolehlah klik Save!

Selamat mencuba. Terima kasih :)
Previous
Next Post »

4 Comment

Write Comment
Noor Azlan
AUTHOR
10 March 2017 at 00:37 delete

Terbaik sis... ilmu terpendam dah keluar balik kan... hihi...

Reply
avatar
Anum Abdullah
AUTHOR
10 March 2017 at 05:16 delete

wah..sis dah buat tutorial lah..

Reply
avatar
hainom OKje
AUTHOR
10 March 2017 at 07:53 delete

Masa mula mula buat blog dulu....mmg selalulah search tutorial nak tambah itu ini dlm blog...sekarang dah jarang dah....

Reply
avatar
Noor Maizan
AUTHOR
16 March 2017 at 13:55 delete

Wahhh, blog mai takde auto read more ni, mai tak suka.hahahaha.

Reply
avatar