Blog DX

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

7 tháng 9, 2015
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(http://lh4.googleusercontent.com/-f9Qc5GV3ysU/URBnw4-w18I/AAAAAAAAITg/Xae5HfcW62g/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>

30 là số ký tự hiển thị ở đoạn trích dẫn
120 là kích thước ảnh thumbnail
http://lh4.googleusercontent.com/.../no_image.png là đường dẫn ảnh thumbnail mặc định với bài viết không có hình ảnh

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 -->

thumbnail_mode = "yes" : chọn yes là hiển thị ảnh thumbnail, no là không hiện ảnh thumbnail
summary_noimg = 430 : số ký tự phần mô tả với bài viết không có ảnh thumbnail
summary_img = 340 : số ký tự phần mô tả với bài viết có ảnh thumbnail
img_thumb_height = 200 : kích thước chiều cao ảnh thumbnail
img_thumb_width = 200 : kích thước chiều rộng ảnh thumbnail

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>

120 là kích thước ảnh thumbnail
40 là số ký tự hiển thị ở đoạn trích dẫn

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ủ.

11 nhận xét:

  1. Haizzz, noct và nhiều blogger vang bóng một thời nghỉ cả dồi :(

    Trả lờiXóa
    Trả lời
    1. Chắc là gặp biến cố trong cuộc sống rồi, đúng là đáng thương :(

      Xóa
    2. Có thể ngta bận vs cuộc sống tốt hơn hoặc đơn giản chỉ là ko còn thích blogging nữa

      Xóa
  2. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  3. Tiện đây add cho mình hỏi một chút về vấn đề định dạng. trang của mình cũng có form khá giống dxoan, tại trang chủ có chữ " Đọc Thêm" khi mình ngắt trang trong soạn thảo đăng bài. Thông thường chữ " Đọc Thêm" này được căn lề trái ( left) , giờ mình muốn nó được căn lề phải ( right) như trang dxoan.com thì làm thế nào vậy add ?

    Cho mình hỏi thêm là : Làm sao để ẩn một đối tượng ngoài trang chủ và chỉ cho nó hiển thị khi đã mở bài viết xem chi tiết, ví dụ như bộ công cụ chia sẻ ( faecbook, google, email ) của dxoan.com ( tuy nhiên với dxoan.com nó cũng hiển thị ngoài trang chủ, và mình thì rất ghét cái này hiển thị ngoài trang chủ, mình chỉ muốn nó hiển thị khi đã xem bài chi tiết) Cảm ơn add

    Trả lờiXóa
    Trả lời
    1. à cái này mình trả lời trên face rồi

      Xóa
  4. Chào bạn! bạn có thể hướng dẫn giúp mình cach hiện sidebar ngoài trang chủ của trang mình không http://www.2vblog.com/
    Cám ơn bạn

    Trả lờiXóa
    Trả lời
    1. Bạn tìm trong temp đoạn này
      <div class='container'>

      Ngay dưới nó sẽ có code dạng

      <script>
      document.write(" <script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
      </script>

      Bạn thêm sửa
      feeds/posts/default?max...

      thành
      feeds/posts/default/-/Tên nhãn?max...

      trong đó tên nhãn chính là nhãn của bài viết, bạn muốn hiển thị nhãn nào ở sidebar thì ghi nhãn đó

      Xóa
  5. Ko được bạn ơi, mình làm ko được, hay do template vậy?

    Trả lờiXóa
  6. Ko được bạn ơi, mình làm ko được, hay do template vậy?

    Trả lờiXóa