Vì sao nên thu gọn bài viết trên trang chủ?
- Thứ nhất: Thu gọn các bài viết làm cho trang chủ blog gọn gàng, hiển thị được nhiều bài viết (ở dạng tóm tắt) và hình ảnh (ở dạng thu nhỏ). Điều này giúp cho người đọc có cái nhìn bao quát, dễ tìm kiếm thông tin, thấy được sự phong phú trong blog và tất nhiên họ sẽ cảm thấy hứng thú, ấn tượng hơn khi ghé thăm blog của bạn.
- Thứ hai: Việc thu gọn bài viết trên trang chủ, có tác dụng làm giảm thời gian tải trang - vì không phải tải đầy đủ, toàn bộ các bài viết cùng một lúc. Khi người đọc nhấp chuột vào bài nào thì bài đó sẽ hiện ra đầy đủ. Điều này giúp cho blog trở nên "chạy" nhanh hơn.
Sử dụng tiện ích "Chèn dấu ngắt nhảy" (một tiện ích có sẵn của Blogspot, sẽ hiển thị khi soạn thảo, chỉnh sửa bài viết) bằng cách nhấp chuột trái vào đoạn văn bản mà bạn muốn cho hiển thị [1] (đoạn văn bản này tính từ dòng đầu tiên trở xuống - xem ảnh minh họa bên dưới), rồi nhấp chuột vào hình tờ giấy bị "rách" [2] trên thanh tác vụ đăng bài. Một đường kẻ ngang sẽ hiện ra [3], phần văn bản bên trên đường kẻ ngang này sẽ hiển thị trên trang chủ, phần văn bản còn lại ở bên dưới sẽ ẩn đi. Sau đó chỉ cần bấm "Xuất bản" là xong.
Ưu điểm của thủ thuật này: đơn giản, dễ thao tác, có thể áp dụng thành công 100% trên mọi trang Blogspot, không phải can thiệp vào template (mẫu) của blog...
Nhược điểm: thủ công, mỗi bài viết đều phải áp dụng thủ thuật thì mới có tác dụng và không được thẩm mỹ cho lắm vì chỉ thu gọn được bài viết chứ không thu nhỏ được hình ảnh.
Lưu ý: Với thủ thuật này, các bạn có thể vào phần "Chỉnh sửa bài viết" để thu gọn những bài đã viết từ trước. Nhớ đừng quên bấm "Cập nhật" là được.
- Cách thứ hai:
- Nếu bạn chưa quen, bạn nên sao lưu template (mẫu) của bạn lại trước khi tiến hành công việc! Nếu chưa biết cách sao lưu template, mời bạn tham khảo TẠI ĐÂY!
- Sau khi copy mã, bạn nên dán thẳng vào template để hạn chế mã bị lỗi khi copy!
1. Đăng nhập vào blog, vào "Thiết kế".
Ở "Trang tổng quan" bấm chuột vào hình tam giác nhỏ [1](xem hai ảnh minh họa bên dưới), một trình đơn thả xuống, bấm "Mẫu" [2], tiếp tục bấm "Chỉnh sửa HTML" [3], sẽ hiện ra bảng mã (code) của blog (nếu đợi chừng 10 giây vẫn không hiện ra, thì bấm vào nút "Trở lại", đợi vài giây rồi bấm "Chỉnh sửa HTML" một lần nữa sẽ hiện ra). Nhấp chuột trái vào một vị trí bất kỳ trong bảng mã vừa hiện ra, rồi bấm tổ hợp phím "Ctrl" + "F" trên bàn phím (nhấn và giữ "Ctrl" trước rồi nhấn "F") sẽ hiện ra ô "Search" [4], copy và dán vào ô đó đoạn mã sau: <data:post.body/> rồi nhấn "Enter", đoạn mã này sẽ hiện ra trên nền màu vàng nhạt [5].
Ảnh chụp màn hình
2. Thay thế đoạn mã: <data:post.body/> vừa tìm được ở bước 1 bằng đoạn mã sau:
<b:if cond='data:blog.pageType == "item"
'><data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'
><data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:10px;'
><a expr:href='data:post.url'> Xem chi tiết...</a></span> </b:if></b:if>
Lưu ý: Bạn có thể thay chữ "XEM CHI TIẾT..." theo ý bạn !
3. Tiếp tục dán vào ô "Search" đoạn mã: </head> rồi nhấn "Enter" để tìm kiếm, sau đó chèn đoạn mã dưới đây lên phía trên dòng </head> (vừa tìm được).
<script type='text/javascript'>var thumbnail_mode = "float" ; summary_noimg = 400; // Số ký tự hiển thị với bài viết không có ảnh summary_img = 310; // Số ký tự hiển thị với bài viết có ảnh
- Thứ nhất: Thu gọn các bài viết làm cho trang chủ blog gọn gàng, hiển thị được nhiều bài viết (ở dạng tóm tắt) và hình ảnh (ở dạng thu nhỏ). Điều này giúp cho người đọc có cái nhìn bao quát, dễ tìm kiếm thông tin, thấy được sự phong phú trong blog và tất nhiên họ sẽ cảm thấy hứng thú, ấn tượng hơn khi ghé thăm blog của bạn.
- Thứ hai: Việc thu gọn bài viết trên trang chủ, có tác dụng làm giảm thời gian tải trang - vì không phải tải đầy đủ, toàn bộ các bài viết cùng một lúc. Khi người đọc nhấp chuột vào bài nào thì bài đó sẽ hiện ra đầy đủ. Điều này giúp cho blog trở nên "chạy" nhanh hơn.
Cách thu gọn bài viết trên trang chủ:
- Cách thứ nhất:Sử dụng tiện ích "Chèn dấu ngắt nhảy" (một tiện ích có sẵn của Blogspot, sẽ hiển thị khi soạn thảo, chỉnh sửa bài viết) bằng cách nhấp chuột trái vào đoạn văn bản mà bạn muốn cho hiển thị [1] (đoạn văn bản này tính từ dòng đầu tiên trở xuống - xem ảnh minh họa bên dưới), rồi nhấp chuột vào hình tờ giấy bị "rách" [2] trên thanh tác vụ đăng bài. Một đường kẻ ngang sẽ hiện ra [3], phần văn bản bên trên đường kẻ ngang này sẽ hiển thị trên trang chủ, phần văn bản còn lại ở bên dưới sẽ ẩn đi. Sau đó chỉ cần bấm "Xuất bản" là xong.
Ảnh chụp màn hình
Nhược điểm: thủ công, mỗi bài viết đều phải áp dụng thủ thuật thì mới có tác dụng và không được thẩm mỹ cho lắm vì chỉ thu gọn được bài viết chứ không thu nhỏ được hình ảnh.
Lưu ý: Với thủ thuật này, các bạn có thể vào phần "Chỉnh sửa bài viết" để thu gọn những bài đã viết từ trước. Nhớ đừng quên bấm "Cập nhật" là được.
- Cách thứ hai:
- Nếu bạn chưa quen, bạn nên sao lưu template (mẫu) của bạn lại trước khi tiến hành công việc! Nếu chưa biết cách sao lưu template, mời bạn tham khảo TẠI ĐÂY!
- Sau khi copy mã, bạn nên dán thẳng vào template để hạn chế mã bị lỗi khi copy!
1. Đăng nhập vào blog, vào "Thiết kế".
Ở "Trang tổng quan" bấm chuột vào hình tam giác nhỏ [1](xem hai ảnh minh họa bên dưới), một trình đơn thả xuống, bấm "Mẫu" [2], tiếp tục bấm "Chỉnh sửa HTML" [3], sẽ hiện ra bảng mã (code) của blog (nếu đợi chừng 10 giây vẫn không hiện ra, thì bấm vào nút "Trở lại", đợi vài giây rồi bấm "Chỉnh sửa HTML" một lần nữa sẽ hiện ra). Nhấp chuột trái vào một vị trí bất kỳ trong bảng mã vừa hiện ra, rồi bấm tổ hợp phím "Ctrl" + "F" trên bàn phím (nhấn và giữ "Ctrl" trước rồi nhấn "F") sẽ hiện ra ô "Search" [4], copy và dán vào ô đó đoạn mã sau: <data:post.body/> rồi nhấn "Enter", đoạn mã này sẽ hiện ra trên nền màu vàng nhạt [5].
Ảnh chụp màn hình
2. Thay thế đoạn mã: <data:post.body/> vừa tìm được ở bước 1 bằng đoạn mã sau:
<b:if cond='data:blog.pageType == "item"
'><data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'
><data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:10px;'
><a expr:href='data:post.url'> Xem chi tiết...</a></span> </b:if></b:if>
Lưu ý: Bạn có thể thay chữ "XEM CHI TIẾT..." theo ý bạn !
3. Tiếp tục dán vào ô "Search" đoạn mã: </head> rồi nhấn "Enter" để tìm kiếm, sau đó chèn đoạn mã dưới đây lên phía trên dòng </head> (vừa tìm được).
<script type='text/javascript'>var thumbnail_mode = "float" ; summary_noimg = 400; // Số ký tự hiển thị với bài viết không có ảnh summary_img = 310; // Số ký tự hiển thị với bài viết có ảnh
img_thumb_height = 100; // Chiều cao của ảnh thu nhỏ
img_thumb_width = 120; // Chiều rộng của ảnh thu nhỏ
</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(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;
}
if(img.length<1) {
imgtag = '<span style="float:left; padding:0px 10px 5px
0px;"><img
src="http://lh5.ggpht.com/_pt7i0nbIOCY/TKIRvjcw20I/AAAAAAAACzc/
Eb6lfJS1aXs/no-image_thumb%5B1%5D.png" 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>
![]()
Lưu ý: Có thể thay đổi các thông số được tô màu đỏ trong đoạn mã trên, để phù hợp với blog của bạn!
Chú ý: Sau khi dán mã, tìm ở cuối đoạn mã vừa dán và xóa dòng nhắc nhở này: "Bài gốc: http:// ......................... Bài viết đã được đăng ký bản quyền. Bạn vui lòng ghi rõ nguồn để thể hiện nhân cách của bạn! Xin cảm ơn!"
4. Tiếp theo dán vào ô "Search" đoạn mã: ]]></b:skin> rồi nhấn "Enter" để tìm kiếm và chèn đoạn mã dưới đây phía trên dòng: ]]></b:skin> (vừa tìm được).
.rmlink a {padding:0 5px; background:#fc8b33; border-radius:3px; } .rmlink a:hover{color:#fff; background:#000ff;}
Lưu ý: Đoạn mã này nhằm tạo hiệu ứng cho nút "XEM CHI TIẾT". Bạn có thể không cần chèn nó vào nếu không cần hiệu ứng.
5. Bấm "Lưu mẫu" [5] và trở lại trang chủ blog xem kết quả.
Ưu điểm của thủ thuật này: Việc thu gọn bài viết, hình ảnh được thực hiện hoàn toàn tự động (auto readmore) và thẩm mỹ.
Nhược điểm: Phải can thiệp vào template và yêu cầu thao tác chính xác tuyệt đối.
Tuy nhiên, có một số mẫu blog, do không tương thích với thủ thuật này, nên không có tác dụng. Các bạn cứ mạnh dạn thử nghiệm, vì nếu không thành công cũng không gây lỗi cho blog của các bạn!
Nếu bạn nào muốn ăn chắc 100% thì nên áp dụng: "Cách thứ nhất" mà CCK đã giới thiệu ở trên!
Vì CCK viết bài này khá chi tiết và công phu, nên có vẻ "Cách thứ hai" quá dài dòng, nhưng thực tế chỉ cần khoảng 15 phút là các bạn có thể áp dụng xong.
Còn một số thủ thuật tương tự, nhưng vì bài này đã khá dài, nên CCK sẽ đăng vào dịp khác, nếu các bạn yêu cầu.
Bài gốc: http://caocongkien.blogspot.com/2013/06/mot-so-thu-thuat-thu-gon-bai-viet-tren.html#ixzz3DcrfPHSo
Eb6lfJS1aXs/no-image_thumb%5B1%5D.png" 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>
Lưu ý: Có thể thay đổi các thông số được tô màu đỏ trong đoạn mã trên, để phù hợp với blog của bạn!
Chú ý: Sau khi dán mã, tìm ở cuối đoạn mã vừa dán và xóa dòng nhắc nhở này: "Bài gốc: http:// ......................... Bài viết đã được đăng ký bản quyền. Bạn vui lòng ghi rõ nguồn để thể hiện nhân cách của bạn! Xin cảm ơn!"
4. Tiếp theo dán vào ô "Search" đoạn mã: ]]></b:skin> rồi nhấn "Enter" để tìm kiếm và chèn đoạn mã dưới đây phía trên dòng: ]]></b:skin> (vừa tìm được).
.rmlink a {padding:0 5px; background:#fc8b33; border-radius:3px; } .rmlink a:hover{color:#fff; background:#000ff;}
Lưu ý: Đoạn mã này nhằm tạo hiệu ứng cho nút "XEM CHI TIẾT". Bạn có thể không cần chèn nó vào nếu không cần hiệu ứng.
5. Bấm "Lưu mẫu" [5] và trở lại trang chủ blog xem kết quả.
Ưu điểm của thủ thuật này: Việc thu gọn bài viết, hình ảnh được thực hiện hoàn toàn tự động (auto readmore) và thẩm mỹ.
Nhược điểm: Phải can thiệp vào template và yêu cầu thao tác chính xác tuyệt đối.
Các đoạn mã trên, CCK sưu tầm và tổng hợp từ các trang web của nước ngoài và đã áp dụng thử nghiệm thành công trên khá nhiều mẫu Blogspot.
Tuy nhiên, có một số mẫu blog, do không tương thích với thủ thuật này, nên không có tác dụng. Các bạn cứ mạnh dạn thử nghiệm, vì nếu không thành công cũng không gây lỗi cho blog của các bạn!
Nếu bạn nào muốn ăn chắc 100% thì nên áp dụng: "Cách thứ nhất" mà CCK đã giới thiệu ở trên!
Vì CCK viết bài này khá chi tiết và công phu, nên có vẻ "Cách thứ hai" quá dài dòng, nhưng thực tế chỉ cần khoảng 15 phút là các bạn có thể áp dụng xong.
Còn một số thủ thuật tương tự, nhưng vì bài này đã khá dài, nên CCK sẽ đăng vào dịp khác, nếu các bạn yêu cầu.
Bài gốc: http://caocongkien.blogspot.com/2013/06/mot-so-thu-thuat-thu-gon-bai-viet-tren.html#ixzz3DcrfPHSo
thủ thuật tạo readmore, tiện ích này sẽ rút ngắn bài viết của bạn ở trang chủ, tạo cho blog của bạn gọn và đẹp hơn.Vào Template - Edit HTML, Expand widget, tìm đến thẻ <data:post.body/> và thay nó bằng đoạn code sau:<b:if cond='data:blog.pageType != "item"'><div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> »»   read more</a></span></b:if><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>Ngoài ra bạn còn phải cho đoạn code dưới đây vào phần HEAD (<head> ... </head>) của template:<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </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(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>
[Trích : caocongkien.blogspot.com]
0 nhận xét:
Post a Comment