Cara Membuat Read More/ Continue Reading

Monday, November 12, 2018


Hari ni aku nak ajar cara buat “Read More” di main page blog. Kalau kita buat "Read More" ni main page tu akan lebih nampak kemas dan lagi cepat loading.. Visitor pun lagi mudah nampak post2 kita kan. Yang penting tajuk yg betul (yg ckup mnggambarkan keseluruhan isi blog) dan juga isi2 penting di perenggan2 awal. so, yang lain tu biar visitor click button read more untuk meneruskan reading. so, jom belajar cara nak buat button read more ni..korang boleh adjust ikut citarasa korang tau cth: color, size gmbr, tulisan dan semua lah..aku nak tunjuk step je..

1. Login Ke Blogger.
2. Klik Template, backup template
3. Klik Edit HTML.
4. Klik Kiri 1 x Dimana saja dalam kotak template.
5. Klik Ctrl+F (Supaya mempercepat pencarian kode), Dan cari kode <head>
6. Masukan code dibawah betul-betul diatas <head>


<!--Auto Read More Mulai-->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body img{max-width:none;width:auto;}
.post-body{text-align:justify;}
.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:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:280px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
 .grow img{height:165px;width:280px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
<script type='text/javascript'>
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;}
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 280;
//]]></script>
</script>
<script type='text/javascript'>//<![CDATA[
<!--Auto Read More Akhir-->
</b:if>
</b:if>


7. Kemudian Cari Kode <data:post.body/> versi web. Biasanya code yang kedua..
8. Delete code <data:post.body/> yang ke-2 dan tukar dengan kode dibawah

<!-- 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>
</b:else></data:post></b:if></b:else></data:post></b:if></data:post></data:post><br />
<div expr:id="&quot;summary&quot; + data:post.id">
<data:post .body=""></data:post></div>
<script type="text/javascript"> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
  <div class="read-more">
<a expr:href="data:post.url" href="https://www.blogger.com/null">Baca Selengkapnya »</a>
      </div>

<!-- Auto read more Akhir -->

sekarang dah boleh save and view. Selamat mencuba!!

You Might Also Like

0 comments


Help

About
Contact
Business Updates

Contact me


Like us on Facebook