February 20, 2021

Cara Membuat Read More/ Continue Reading

Kali ni saya nak ajar anda 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..anda boleh adjust ikut citarasa anda cth: color, size gmbr, tulisan dan semua lah..saya akan tunjukkan stepnya 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> <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!!

Leave a Reply

Your email address will not be published. Required fields are marked *

©2023. Denai Empire I 202203003040 (003355535-P)
Privacy Policy
Contact Us