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 () 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

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ẻ ]]>

.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/AVvXsEhUoPvgnSnil6ShivEjnKmoxqwKscSBVXO5SzbJbLyYPrKdBul-L9n9U-cK8q683gLA2iv1TNvTay20fMXSawlprhMJlNoAxZTl7bKKkwejoWDGuaJERhlKmlGDL7j8NXp4sUx-XhH2c-wK/s1600/no_image.png) 0 0 no-repeat;}
a.jump-link{font-weight:bold}

Thêm đoạn JavaScript sau trước thẻ đóng 

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ẻ  thành

Read More

Read More

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

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ẻ 

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  bằng đoạn code dưới rồi Lưu Mẫu lại

Read more ...

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ẻ 

Thay thẻ  bằng đoạn code sau rồi Lưu Mẫu lại

Read More

Read More

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ủ.