Auto Readmore sử dụng JavaScript cho Blogger / Blogspot

Việc tạo Auto Readmore không còn gì là xa lạ với Blogger / Blogspot nữa, nó giúp rút gọn bài viết ngoài trang chủ, làm cho giao diện blog đẹp và bắt mắt hơn. Có 2 loại Auto Readmore là không sử dụng JavaScript và sử dụng JavaScript. Với việc không dùng JavaScript sẽ giúp ích nhiều cho SEO, tuy nhiên số lượng ký tự hiển thị sẽ bị giới hạn cùng với đó kích thước hiển thị ảnh thumbnail mặc định lại rất nhỏ, khó tùy biến. Vậy nên bài viết này sẽ hướng dẫn tạo Auto Readmore sử dụng JavaScript, tuy không thân thiện với SEO nhưng lại tùy chỉnh được nhiều thứ về giao diện.

1. Auto Readmore phát triển bởi Noct Blog

Đăng nhập Blogger ~> Vào Mẫu ~> Chỉnh sửa HTML
Chèn đoạn css này vào bên trên thẻ ]]></b:skin>

.thumb,.no-thumb{float:left;margin-right:15px;width:120px;height:120px;overflow:hidden;position:related}
.no-thumb{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBx1Ay76ZdxenHE3dKeb31CAxMhViMm3a-MlgKwYwihzGhYOEVF2hRAO4wX4JrCZyp-gcXfpy1Rv24RWL8d3E09jCFJljyrD4GPJur3npAdIv6-1TA_-uJXldlRty41Xkwt_BH0wzLy7W6/s1600/no_image.png) 0 0 no-repeat;}
a.jump-link{font-weight:bold}

Thêm đoạn JavaScript sau trước thẻ đóng </head>

<script type='text/javascript'>//<![CDATA[
var snippet=30; G="s120-p";
function H(b,a){return b.replace(/<.*?>/gi,"").split(/\s+/).slice(0,a-1).join(" ")} function rm(b){var b=document.getElementById(b),a="",a=b.getElementsByTagName("img");if(1<=a.length){C=a[0].src;B=C.split("/");D=B[2];if(-1!=D.indexOf("blogspot")||-1!=D.indexOf("googleusercontent")||-1!=D.indexOf("ggpht"))F=B[7],C=-1==F.indexOf(".")?C.replace(F,G):B[0]+"//"+B[2]+"/"+B[3]+"/"+B[4]+"/"+B[5]+"/"+B[6]+"/"+G+"/"+B[7];a='<div class="thumb"><img src="'+C+'" /></div>'}else a='<div class="no-thumb"></div>';b.innerHTML=a+H(b.innerHTML,snippet)+"..."};
//]]></script>

Cuối cùng, thay thẻ <data:post.body/> thành

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<span expr:id='&quot;p&quot; + data:post.id'><data:post.body/></span>
<script type='text/javascript'>rm(&quot;p<data:post.id/>&quot;)</script><b:else/><data:post.body/></b:if>
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Read More</a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Read More</a>
</b:if>
</b:if>
<div class='clear'/>

Nếu trong template của bạn có đoạn code sau thì xóa nó đi rồi Lưu Mẫu lại

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

2. Auto Readmore với ảnh thumbnail

Đăng nhập Blogger ~> Vào Mẫu ~> Chỉnh sửa HTML
Chèn đoạn code sau vào trước thẻ </head>

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</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 = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }
 }
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End -->

Cuối cùng, thay <data:post.body/> bằng đoạn code dưới rồi Lưu Mẫu lại

<!-- Auto read more Start -->
<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>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

3. Tạo Auto Readmore với Cutter.js

Đăng nhập Blogger ~> Vào Mẫu ~> Chỉnh sửa HTML
Chèn đoạn code sau vào trước thẻ </head>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.post-body img { display:block; float:left; margin-right: 10px; width:120px; height:120px }
</style>
<script type='text/javascript'>//<![CDATA[
(function(c,b){var d=null;d=function(){this.oApplyTo=null;this.oBackupApplyTo=null;this.oTarget=null;this.nWords=0;this.nWordsCounter=0;this.oSerialized={};this.oDocumentFragment=b.createDocumentFragment();this.bTest=false;this.nIdTest=0};d.prototype.applyTo=function(f){if(!f)return this;this.oApplyTo=f;this.oBackupApplyTo=f.cloneNode(true);return this};d.prototype.setTarget=function(f){if(!f)return this;this.oTarget=f;return this};d.prototype.setWords=function(f){if(!f)return this;this.nWords=f- 1;return this};d.prototype.trim=function(f){return f.replace(/^\s+/g,"").replace(/\s+$/g,"")};d.prototype.countWords=function(f){return this.trim(f).split(" ").length};d.prototype.getOnlyNumberOfWords=function(g,f){return this.trim(g).split(" ").splice(0,f).join(" ")};d.prototype.getFirstElementOfObject=function(g){var f=null,h="";for(h in g)if(g.hasOwnProperty(h)){f=g[h];break}return f};d.prototype.deserializeObject=function(i,h){var f=null,g="";if(i.nodeType===1){f=b.createElement(i.tagName);if(typeof i.attributes!== "undefined")for(g in i.attributes)if(i.attributes.hasOwnProperty(g))f.setAttribute(g,i.attributes[g]);h.appendChild(f)}else if(i.nodeType===3){if(typeof i.textContent!=="undefined")f=b.createTextNode(i.textContent);else if(i.data)f=b.createTextNode(i.data);else f=b.createTextNode(i.innerText);h.appendChild(f)}if(typeof i.childNodes!=="undefined")this.loopOnDeserialize(i.childNodes,f)};d.prototype.loopOnDeserialize=function(h,g){var f="";for(f in h)if(h.hasOwnProperty(f))this.deserializeObject(h[f], g)};d.prototype.deserializeSerializedObject=function(i,h){var g=false,f=null;if(typeof i==="undefined"){i=this.getFirstElementOfObject(this.oSerialized);this.oDocumentFragment=b.createDocumentFragment();g=true}if(typeof h==="undefined"){f=b.createElement("div");this.oDocumentFragment.appendChild(f);h=f}this.deserializeObject(i,h);if(typeof i.childNodes!=="undefined")this.loopOnDeserialize(i.childNodes,h)};d.prototype.serializeDomObject=function(l,i){var g=Math.random()*15412457562,f=null,n=[],p=null, h=0,m=0,k=0,o=0,j=l.childNodes.length;if(this.bTest)g="__"+(this.nIdTest+=1)+"__";if(this.nWordsCounter<this.nWords){f={};f.nodeType=l.nodeType;if(typeof l.tagName!=="undefined")f.tagName=l.tagName.toLowerCase();n=l.attributes;if(n){f.attributes={};m=n.length;for(;h<m;h+=1){p=n[h];if(p.nodeValue)f.attributes[p.name]=p.value}}if(f.nodeType===3){k=this.nWordsCounter;if(typeof l.textContent!=="undefined")this.nWordsCounter+=this.countWords(this.trim(l.textContent));else if(l.data)this.nWordsCounter+= this.countWords(this.trim(l.data));else this.nWordsCounter+=this.countWords(this.trim(l.innerText));if(this.nWordsCounter<this.nWords)if(typeof l.textContent!=="undefined")f.textContent=l.textContent;else if(l.data)f.innerText=l.data;else f.innerText=l.innerText;else if(k<this.nWords&&this.nWordsCounter>this.nWords)if(typeof l.textContent!=="undefined")f.textContent=this.getOnlyNumberOfWords(l.textContent,this.nWords-k);else if(l.data)f.innerText=this.getOnlyNumberOfWords(l.data,this.nWords-k);else f.innerText= this.getOnlyNumberOfWords(l.innerText,this.nWords-k);else if(b.body.textContent)f.textContent="";else f.innerText=""}if(l.hasChildNodes()){f.childNodes={};o=0;j=l.childNodes.length;for(;o<j;o+=1)this.serializeDomObject(l.childNodes[o],f.childNodes)}if(typeof i==="undefined")this.oSerialized[g]=f;else i[g]=f}};d.prototype.addEvent=function(f,h,g){if(f.addEventListener)f.addEventListener(h,g,false);else if(f.attachEvent)f.attachEvent("on"+h,g)};d.prototype.showAll=function(){var f=this.oTarget,g=f.parentNode; g.insertBefore(this.oBackupApplyTo,f);g.removeChild(f)};d.prototype.init=function(){this.serializeDomObject(this.oApplyTo);this.deserializeSerializedObject();var f=this.oDocumentFragment.childNodes[0];f.removeChild(this.oDocumentFragment.childNodes[0].childNodes[0]);this.oTarget.innerHTML="";this.oTarget.appendChild(this.oDocumentFragment)};d.run=function(k,f,j,g,i){var h=new d;h.applyTo(k).setTarget(f).setWords(j);h.init()};c.Cutter=d})(window,document);
//]]></script>
</b:if>

Thay thẻ <data:post.body/> bằng đoạn code sau rồi Lưu Mẫu lại

<div class='post-body'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<span expr:id='data:post.id'><data:post.body/></span>
<script type='text/javascript'>
var snippet = document.getElementById(&quot;<data:post.id/>&quot;);
Cutter.run(snippet, snippet, 40);
</script>
<b:else/><data:post.body/></b:if>
<div class='clear'/>
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Read More</a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Read More</a>
</b:if></b:if>
</div>

Cutter.js giúp ta giữ lại được các thẻ HTML như in đậm, in nghiêng, màu chữ... trong đoạn trích dẫn tuy nhiên nếu không có ảnh nào được chèn giữa 40 ký tự trên thì sẽ không có ảnh thumbnail, bạn cần lưu ý điều này và nên đặt một tấm ảnh lên trên cùng của bài viết để làm ảnh đại diện ở trang chủ.