Breaking News

Home / Công nghệ / Hướng dẫn rút gọn bài viết trên trang chủ blogger

Hướng dẫn rút gọn bài viết trên trang chủ blogger

August 26, 2017
Làm thế nào để rút gọn bài viết trên trang chủ với một ảnh thumbnail ngay bên trái và một nút  Đọc thêm ngay bên dưới như mô tả trong hình vẽ sau.

Để làm được điều này trình tự thực hiện  như sau:

Bước 1: Mở khung soạn thảo html của blogger.
Đăng nhập vào blog của bạn. Tìm đến Template / Edit HTML
Khung Code Template sẽ hiện ra như bên dưới



Bước 2: Hiển thị bài viết dạng rút gọn
Sau khi khung soạn thảo sẽ hiện ra, nhấp vào một vị trí bất kỳ và bấm CTRL + F để tìm đoạn mã sau:
<data:post.body/>
Sẽ có hai đến ba vị trí chứa đoạn mã này. Thường thì mình tìm đến vị trí xuất hiện thứ hai, tuy nhiên cũng có lúc phải tìm đến những vị trí khác, Và chép code dưới đây chồng lấp lên đoạn mã trên bằng đoạn code mới như sau:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
<span class='readmore' style='font-weight:bold;padding:5px;float:right;'><a expr:href='data:post.url'>Đọc tiếp &#187;</a></span>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Bước 3: Xác định kích thước ảnh thumbnail và nội dung tóm tắt bài viết
Làm tương tự như trên. Tìm đến dòng
</head>
Ngay phía trên dòng này, dán vào đoạn code sau:
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;text-align:justify}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>
Lưu ý: 

  • Bạn có thể thay đổi số lượng ký tự hiển thị trên trang chủ bằng cách thay đổi giá trị 490 (khi không có ảnh thumbnail) và 400 (khi có ảnh)
  • Để thay đổi kích thước ảnh: ta chỉ cần đổi giá trị có màu xanh.

Bước 4: Ấn nút Save Template và xem lại thành quả
Trên đây chỉ là những thủ thuật hay mình sưu tập, tìm kiếm được những lúc rỗi rãnh. Tuy mê vọc Code nhưng cũng chẳng thể nào rãnh rang, còn phải lo toan cái sự đời hằng ngày mỗi bữa. Hy vọng các bạn chia sẽ, tiếp giúp ý kiến nhé.
Chúc mọi người có nhiều niềm vui và thành tựu.
Bạn có thể xem thêm các tư liệu:
  • Hướng dẫn cách tạo Blog bằng Blgospot cho Blogger
  • Cách thêm tiện ích (widget) vào vị trí bất kỳ trong blogspot

Người viết: Nguyễn Đạt Khánh

Popular Posts