Auto Readmore with Thumbnail chuẩn 2014
Sau khi đã chia sẻ với các bạn hai thứ đó là Auto Readmore không thumbnail cho Blogger và Lấy ra ảnh đầu tiên của bài viết của Blogger, thì hôm nay kết hợp chúng lại mình xin đưa ra auto readmore chuẩn nhất. Chuẩn ở đây có nghĩa là tối ưu nhất về cả tính năng lẫn tốc độ xử lý của nó.
Auto Readmore thì chắc ai cũng biết rồi, mà thôi cứ giải thích cho nó dài bài ra, haha. Đối với đoạn mã mình chia sẻ ở đây là kết hợp giữa Javascript mà đoạn mã mặc định của Blogger, giúp tự động cắt đoạn văn bản dài thòng ở trang chủ trở nên ngắn gọn theo quy định của chúng ta, và đồng thời lấy ra hình ảnh đầu tiên đặt vào vị trí bên trái hoặc phải giúp mô tả cho bài viết đó.
Auto Readmore thì chắc ai cũng biết rồi, mà thôi cứ giải thích cho nó dài bài ra, haha. Đối với đoạn mã mình chia sẻ ở đây là kết hợp giữa Javascript mà đoạn mã mặc định của Blogger, giúp tự động cắt đoạn văn bản dài thòng ở trang chủ trở nên ngắn gọn theo quy định của chúng ta, và đồng thời lấy ra hình ảnh đầu tiên đặt vào vị trí bên trái hoặc phải giúp mô tả cho bài viết đó.
Auto Readmore with Thumbnail chuẩn 2014
Tương tự như những đoạn Auto Readmore mà mình đã chia sẻ, bạn tìm đến thẻ </head> và chèn lên nó<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 createSummary(pID) {
var div = document.getElementById(pID);
var summ = 150;
var summary = '<div><p>' + removeHtmlTag(div.innerHTML, summ) + '</div></p>';
div.innerHTML = summary;
}
//]]></script><data:post.body/><b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.firstImageUrl'>
<div class='postThumb'>
<img expr:src='data:post.firstImageUrl' expr:title='data:post.title' expr:alt='data:post.title'/>
</div>
</b:if>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'> createSummary("summary<data:post.id/>");</script>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if><b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.firstImageUrl'>
<div class='postThumb'>
<img expr:src='data:post.firstImageUrl' expr:title='data:post.title' expr:alt='data:post.title'/>
</div>
<b:else/>
<div class='postThumb'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy0JqaK0n78VNv5wqxQbJe-0q07mLaw5sWHunI2tmowU9sJPorjfa8ndQnj8MoJwKC5krR-Mx3mgPWHjAkcjy2DsQrfzR_1hcUs9mCNRYr2kYF9f3t0M_MOsDrmtwapB0jgrH3JT6Jr-Cn/w360-c-h220/no-image.png' expr:alt='data:post.title' expr:title='data:post.title' />
</div>
</b:if>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'> createSummary("summary<data:post.id/>");</script>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>.postThumb { float: left; margin-right: 20px; width: 300px; height: 250px }Lời kết
Thì đây là đoạn mã mình nghĩ là ngon nhất trong tất cả đám auto readmore rồi. Trong trường hợp bạn không thích hình ảnh méo mó vì css thì bạn có thể xem qua bài viết Resize và cắt ảnh nhiều thành phần của Blogger, bạn hãy sử dụng nó với id là #Blog1 và nhớ đặt nó trong đoạn mã:<b:if cond='data:blog.pageType != "index"'>
<b:if cond='data:blog.pageType != "static_page"'>
ĐOẠN JS
</b:if></b:if>
lúc 06:15 26 tháng 7, 2014
demo giống bạn hả ta
lúc 17:38 27 tháng 7, 2014
hihi mình mới toàn bộ hệ thống comment mới hoàn toàn chuẩn CSS3 và HTML5 rồi bạn xem thử xem được không
lúc 18:13 27 tháng 7, 2014
Cái này cũng như cái của mình share mà thay giao diện thôi :D, test cũng thế.
lúc 19:19 27 tháng 7, 2014
cái của lâm đâu fix chuẩn HTML5 và CSS3 đâu
lúc 19:21 27 tháng 7, 2014
ở đây mình thay toàn bộ CSS và code comment luôn đó nha
lúc 19:23 27 tháng 7, 2014
=]]
http://www.kslzone.net/2014/07/binh-luan-phan-cap-hack-cho-blogger.html
và
http://www.kslzone.net/2014/07/trang-bai-viet-blogger-chuan-html5.html
thì mình tách 2 ra bài viết, mà mình tạo thảng includable mới chứ có gì đâu trời :3
lúc 19:24 27 tháng 7, 2014
Thích thì demo luôn này
http://kslgenesis.blogspot.com/2014/07/sample-post-with-threaded-comments.html
lúc 19:24 27 tháng 7, 2014
http://www.bloggerplugins.xyz/2014/07/resize-and-crop-thumbnail-image.html
lúc 20:48 4 tháng 9, 2014
Auto Readmore không dùng javascript thì đoạn trích dẫn ngắn ngủn thì cũng chán
Nếu dùng loại Auto Readmore sử dụng text/javascript thường đặt 1 đoạn javascript bên trên thẻ </head>, làm như vậy liệu SEO có bị ảnh hưởng nhiều không bạn.
Mình đang phân vân điều này
lúc 20:52 4 tháng 9, 2014
Ngoại trừ "meta" "title" và một số thẻ đánh dấu dữ liệu, thì tất cả những thẻ nào khác "script" rồi "link" không có ảnh hưởng đến SEO trên website của chúng ta. Bạn có thể tham khảo qua bất gì website nào, mình tin rằng 99% website bây giờ đều có script trên thẻ "head" nhé.
Điều mà những đoạn script ảnh hướng đến website chúng ta chủ yếu là tốc độ tải của website đó thôi.
lúc 21:18 4 tháng 9, 2014
Vậy thì cũng yêu tâm rồi :)
lúc 21:52 12 tháng 11, 2014
Chào Lâm.
Trong Template của tớ có 4 đoạn như thế này :
Nếu thay bằng nùi mã kia vào đoạn đó sẽ báo lỗi. Không biết phải chèn như thế nào.
Tớ xóa đoạn mã và thay bằng nùi mã đó không biết có phải không.
lúc 22:24 12 tháng 11, 2014
Bạn sử dụng cái chuyển mã HTML ở menu thứ 2 của mình nha, rồi dán đoạn mã đã được convert vào đây nếu không nó bị ẩn hết ^_^
lúc 10:20 8 tháng 6, 2015
em dùng cái này cho template đơn giản của anh hướng dẫn không đc. demo downloadfullaz.blogspot.com
lúc 14:27 10 tháng 6, 2015
Hôm nay hì hục thay cái này vào temp. Chỉ có thể nói là tuyệt (y). Ảnh hiện rất đẹp
Cảm ơn bạn trẻ nhiều :)
lúc 20:23 10 tháng 6, 2015
Thanks anh Thọ :D
lúc 23:34 10 tháng 6, 2015
Mình đã chèn data:post.title như sau và khi xem ở bài viết thì không hiển thị đường link. Có cách nào khắc phục không?
Giúp với :v
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.firstImageUrl'>
<div class='postThumb'>
<img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/>
</div>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummary("summary<data:post.id/>");</script>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
lúc 20:53 11 tháng 6, 2015
Là sao em có chút không hiểu data:post.title là cú pháp gọi ra thẻ tiêu đề mà?
lúc 07:54 12 tháng 6, 2015
Nghĩa là chèn đoạn này vào giữa đoạn code ở bước 2 và nó ko hiển thị ở phần bài viết luôn
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
Ngay trong đêm đó anh thay lại cái autoreadmore mới, nhưng nó chạy chậm quá, xót hết cả ruột, gan, mề, lòng, bao tử, tim, phè, phổi :v
lúc 07:57 12 tháng 6, 2015
Có cách nào tách biệt data hiển thị ảnh và data đoạn trích dẫn để chèn cái data tiêu đề vào giữa mà tiêu đề không bị ẩn?
Mục đích để cho cái tiêu đề nằm ngang với tấm hình nhìn cho đẹp ấy mà
lúc 07:59 12 tháng 6, 2015
Vì nguyên nhân tiêu đề bị ẩn là do nó nằm trong:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
</b:if>
</b:if>
lúc 21:36 12 tháng 6, 2015
Vậy là anh giải quyết xong rồi phải không :D
lúc 01:04 14 tháng 6, 2015
Đến giờ thì vẫn chưa :v
Muốn dùng cái auto reamore này nhưng chưa biết cách sao cho title ở ngang hình ảnh
lúc 01:05 14 tháng 6, 2015
Cái autoreadmore anh đang dùng anh chưa hài lòng lắm :( . Có vẻ nó hơi chậm
lúc 10:35 14 tháng 6, 2015
Cái này em thấy là nhanh nhất rồi đó anh, nó chỉ cắt lấy ra đoạn chữ đầu bài, còn hình ảnh thì Blogger tự lấy ra.
lúc 20:17 14 tháng 6, 2015
Thế ư. Cảm ơn em
Cho anh hỏi ngoài lề tí: trước đây blog của anh lượng truy cập đều đều trên các quốc gia, nhưng 3-4 ngày nay CHỈ CÓ LƯỢNG TRUY CẬP TỪ HOA KỲ VÀ VIỆT NAM. Lượng truy cập từ Hoa Kỳ tăng khủng khiếp.
Blog của em thấy có thế không ?
lúc 08:29 15 tháng 6, 2015
Blog của em bị lỗi bạo luôn anh ơi, 100% từ Hoa Kì từ xưa tới giờ :D
lúc 08:31 15 tháng 6, 2015
Giờ chỉ có coi từ Analytics là đúng thôi, vẫn 80 Việt Nam, 10% Nga, 5 % Hoa kì, còn lại là những nước khác.