Thứ Sáu, ngày 20 tháng 11 năm 2015

Share Code Read More (Xem Thêm) bài viết cho Blogger Blogspot

Bài viết này sẽ giúp các bạn cắt kí tự xem thêm cho bài viết (đa số là bài viết trang chủ hoặc bài viết liên quan hoặc bài viết xem nhiều nhất v.v...) ở blogger blogspot
Demo thì các bạn xem ở trang chủ Code SEO hoặc hình bên dưới
Có thể các bạn đã biết blogspot cho phép cắt kí tự mặc định nhưng số kí tự rất ít và không thể tùy biến. Vì thế phương pháp này sẽ giúp các bạn làm chủ code mình hơn. Chủ yếu code này dựa vào javascript với lệnh replace tức là ghi đè và thay đổi vùng chọn, vùng chọn ở đây là bài viết lấy theo ID bla bla
Và cái gì cũng có 2 mặt. Việc sử dụng code readmore mặc định của blogspot (<data:post.snippet/>) sẽ thân thiện với SEO và giúp trang load nhanh. Ngược lại khi sử dụng những javascript dưới đây các bạn sẽ tùy biến linh hoạt cả thumbnail (Hình ảnh đại diện) và cắt kí tự thoải mái theo ý thích của các bạn

Dưới đây là demo mình sử dụng code này để tùy biến giao diện trang chủ

Share Code Read More (Xem Thêm) cho bài viết của Blogger Blogspot
Share Code Read More (Xem Thêm) cho bài viết của 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(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ủ.
Có gì không hiểu các bạn vui lòng comment để được giúp đỡ