Tạo Auto Readmore ( đọc thêm, xem chi tiết,..) cho Blogger với Javascript.
Thủ thuật Auto Read More tăng khả năng SEO Blogger cải thiện tốc đọ load trang nhanh hơn, phát tiển code bởi
Noct Blog.
Trước khi thực hiện thủ thuật này thì bạn nên sao lưu lại template gốc để đề phòng, sau đó vào phần chỉnh sửa HTML rồi chèn đoạn CSS sau phía trên
]]></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/AVvXsEihz7nFk2mcde4shA-q0eTHx4IZobNEwWBo-4nQoUU7ind-Qs3EMjmyD51ePGCFAGC4_OR7vs0pKeR7fAVx0WVSiNMNBy7ErmnC5hd3ACQjTRcEeGO3OYybLAtRbLrbb7_uItzc1_lhCVhN/s1600/no_image.png) 0 0 no-repeat;}
a.jump-link{font-weight:bold}
Chèn đoạn Javascript này 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>
snippet=30;/*số ký tự được hiện thị*/
Cuối cùng, chọn mở rộng tiện ích tìm đến
<data:post.body/> sửa nó thành:
<b:if cond='data:blog.pageType == "index"'>
<span expr:id='"p" + data:post.id'><data:post.body/></span>
<script type='text/javascript'>rm("p<data:post.id/>")</script><b:else/><data:post.body/></b:if>
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + "#more"'>Read More</a><b:else/>
<b:if cond='data:blog.pageType == "index"'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Read More</a>
</b:if>
</b:if>
<div class='clear'/>
Save template lại, vậy là gần như xong, nếu trong template của bạn có đoạn dưới đây thì xóa nó đi:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Tạo Auto Readmore cho Blogger 2
Đầu tiên, bạn vào phần chỉnh sửa
HTML của template, chọn mở rộng mẫu rồi chèn đoạn sau phía trên
</head> :
<b:if cond='data:blog.pageType == "index"'>
<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>
Tiếp tục tìm đến đoạn <data:post.body/> và thay thế nó bằng đoạn sau:
<div class='post-body'>
<b:if cond='data:blog.pageType == "index"'>
<span expr:id='data:post.id'><data:post.body/></span>
<script type='text/javascript'>
var snippet = document.getElementById("<data:post.id/>");
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 + "#more"'>Read More</a><b:else/>
<b:if cond='data:blog.pageType == "index"'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Read More</a>
</b:if></b:if>
</div>
Lưu lại và kiểm tra kết quả.
Auto readmore không sử dụng javascript cho Blogger bởi
Duy Pham Blog
Các bước thực hiện:
Bước 1: Thêm class post-thumbnail để hiển thị hình ảnh. Có 2 dạng hiển thị hình ảnh là bên trái hoặc bên phải.
1. Hiển thị hình ảnh bên trái:
Thêm đoạn mã dưới đây vào bên trên thẻ
]]></b:skin>:
.post-thumbnail{float:left;margin-right:20px}
2. Hiển thị hình ảnh bên phải:
Thêm đoạn mã dưới đây vào bên trên thẻ
]]></b:skin>:
.post-thumbnail{float:right;margin-left:20px}
Bước 2: Thêm đoạn mã auto readmore. Có 4 dạng auto readmore để lựa chọn.
1. Auto readmore với hình ảnh:
Thay thế
<data:post.body/> bằng đoạn mã dưới đây:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
2. Auto readmore với hình ảnh và hiển thị ảnh mặc định cho bài viết không có ảnh:
Thay thế
<data:post.body/> bằng đoạn mã dưới đây:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
<b:else/>
<img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggLBSUifjPY4T1-rq407hcAFLYS1ZY6MShX6_93BMPq1g2OLJ-iHvVuwFVeD5rqrnpVIJJHzjmPKEah_Kf7jzt02X7gfHyYvC5D3-JJY42Z-7ZyGxwZBKbtDdwYuHLH9iRdmWcj_wiePE4/' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
3. Auto readmore với hình ảnh. Không readmore với bài viết mới nhất:
Thay thế
<data:post.body/> bằng đoạn mã dưới đây:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == "true"'>
<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
4. Auto readmore với hình ảnh và hiển thị ảnh mặc định cho bài viết không có ảnh. Không readmore với bài viết mới nhất:
Thay thế
<data:post.body/> bằng đoạn mã dưới đây:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == "true"'>
<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
<b:else/>
<img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggLBSUifjPY4T1-rq407hcAFLYS1ZY6MShX6_93BMPq1g2OLJ-iHvVuwFVeD5rqrnpVIJJHzjmPKEah_Kf7jzt02X7gfHyYvC5D3-JJY42Z-7ZyGxwZBKbtDdwYuHLH9iRdmWcj_wiePE4/' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
<b:else/>
<img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggLBSUifjPY4T1-rq407hcAFLYS1ZY6MShX6_93BMPq1g2OLJ-iHvVuwFVeD5rqrnpVIJJHzjmPKEah_Kf7jzt02X7gfHyYvC5D3-JJY42Z-7ZyGxwZBKbtDdwYuHLH9iRdmWcj_wiePE4/' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
Việc hiển thị trích đoạn nội dung bài viết là thông qua thẻ
<data:post.snippet/> của Blogger. đoạn trích dẫn của Blogger chỉ gồm 140 ký tự (
Blogger vừa update, số lượng ký tự của thẻ <data:post.snippet/> ở widget Blog giờ đây ít hơn số lượng ký tự của thẻ <data:post.snippet/> ở widget PopularPosts), khá là ngắn và việc ngắt ký tự không chú ý tới ký tự trống nên có câu bị mất vài từ trở nên vô nghĩa.
Hình ảnh được lấy thông qua lệnh
data:post.thumbnailUrl. Đây là đường dẫn ảnh thứ nhất trong bài viết đã được Blogger resize về kích thước 72x72 pixels. Cần chú ý là ảnh của bài viết phải được upload thông qua công cụ
Chèn hình ảnh của Blogger, hoặc lấy địa chỉ ảnh từ Picasa và địa chỉ ảnh phải có
s1600,
s800...thì công cụ resize của Blogger mới hoạt động, khi đó ảnh mới xuất hiện. Thủ thuật trên đã thêm thuộc tính
alt là tiêu đề bài viết cho hình ảnh, nó giúp tăng khả năng SEO cho blog của bạn.
Trước khi thực hiện thủ thuật auto readmore này bạn cần loại bỏ đoạn mã auto readmore javascript nếu đang dùng nhé.
Code:
