Dayang Deno: Tutorial Buat Read More Pada Blog
Showing posts with label Tutorial Buat Read More Pada Blog. Show all posts
Showing posts with label Tutorial Buat Read More Pada Blog. Show all posts

13.5.14

Tutorial : Buat Read More Pada Blog
May 13, 2014 9 Comments
Tutor ni adik nasuha yang request. Sori dik sebenarnya terlupa! Adik nasuha nak tahu cara buat read mora pada blog. Ok jom mula buat!^^


1- Login > Dashboard > Template > Edit HTML

2- Ctrl +F dan search kod ini :
 </head>

3- Dah jumpa? Ok good. Sekarang copy kod di bawah ni, than paste di bawah / selepas kod step ke dua tadi
<!--ReadMore -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#CD7388;  text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 3px solid #EAEAEA;float:left;height:145px;width:190px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 2px 2px 2px #111;}
.grow img{height:145px;width:190px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;;
summary_noimg = 300;
summary_img = 250;
img_thumb_height = 145;
img_thumb_width = 190;
</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(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>
<!--Auto Read More Akhir-->

4- Sekarang cari pula kod ini :
<data:post.body/>

5- Korang enter 2 kali, kemudian gantikan kod di step ke 4 tadi dengan kod kat bawah ni :
<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
      <div class='read-more'>
      <a expr:href='data:post.url'>Read More &#187;</a>
      </div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->

6- Preview.. Kalau dah ok takde error, Boleh klik Save Template :)



p/s: harap dapat membantu^^



Reading Time: