Auto readmore với thumbnail không sử dụng javascript cho Blogger
Trước đây mình có share một đoạn script duy nhất để giúp các bạn tạo auto readmore với thumbnail, ưu điểm chỉ cần thay thế và chèn một lần duy nhất, nhưng nếu bạn để ý thì nó làm tốc độ tải trang chậm đi một ít vì nó xử lý lại thông tin được đưa ra ngoài trang chủ. Hôm nay, mình xin chia sẻ với các bạn cách tạo auto readmore với thumbnail hoàn toàn không sử dụng javascript của bác Duy Phạm, giúp blog bạn tải nhanh hơn rất nhiều.
Mình cũng đang sử dụng nó trên một số blog mà mình đang làm bạn có thể xem qua:
Bước 2: Các bạn tìm và thay thế toàn bộ thẻ sau
1. Auto readmore với hình ảnh:
Bước 2: tìm đến thẻ ]]></b:skin> và thêm một trong 2 đoạn CSS sau vào bên trên
1. Hiển thị hình ảnh bên trái:
Thêm một tẹo nhỏ, mình xin giới thiệu Auto readmore với thumbnail 2014 do mình làm ra, khá là tối ưu và nhiều tính năng nhất cho người dùng.
Mình cũng đang sử dụng nó trên một số blog mà mình đang làm bạn có thể xem qua:
Auto readmore không sử dụng javascript cho Blogger
Ưu điểm của thủ thuật này là sử dụng những thứ có sẵn của Blogger giúp tốc độ tải nhanh hơn, nhược điểm thì không để kiểm soát được số lượng ký tự lấy ra từ bài viết, ảnh thumbnail hơi bé (mình sẻ chia sẻ cách khác phục này tại bai khác), và nếu bạn muốn hiểu có thể tham khảo qua các bài viết về Blogger XML.Tạo auto readmore với thumbnail
Bước 1: Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTMLBước 2: Các bạn tìm và thay thế toàn bộ thẻ sau
<data:post.body/>bằng một trong những đoạn mã sau:
1. Auto readmore với hình ảnh:
<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:
<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/AVvXsEhjSxX-sHDvAsoEEsf2_6m95_W2LjIc1ykkU2J5ZqCyjcx6BiQcWquaUOchaOb9os-L6o48_QeP-JX-x7j1-KVNnoSd8Hdp-XYII1IrCZ2jskaDaV3xv1vK71ZsTYL2x8vwyDMEqCvhSHk3/' 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:
<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:
<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/AVvXsEhjSxX-sHDvAsoEEsf2_6m95_W2LjIc1ykkU2J5ZqCyjcx6BiQcWquaUOchaOb9os-L6o48_QeP-JX-x7j1-KVNnoSd8Hdp-XYII1IrCZ2jskaDaV3xv1vK71ZsTYL2x8vwyDMEqCvhSHk3/' 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/AVvXsEhjSxX-sHDvAsoEEsf2_6m95_W2LjIc1ykkU2J5ZqCyjcx6BiQcWquaUOchaOb9os-L6o48_QeP-JX-x7j1-KVNnoSd8Hdp-XYII1IrCZ2jskaDaV3xv1vK71ZsTYL2x8vwyDMEqCvhSHk3/' 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>
Chọn vị trí của ảnh thumbnail
Bước 1: Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTMLBước 2: tìm đến thẻ ]]></b:skin> và thêm một trong 2 đoạn CSS sau vào bên trên
1. Hiển thị hình ảnh bên trái:
.post-thumbnail{float:left;margin-right:20px}
2. Hiển thị hình ảnh bên phải:.post-thumbnail{float:right;margin-left:20px}
Lời kết
Do trong bài thẻ data thiếu nên mình giải thích thêm, thẻ <data:post.snippet/> của Blogger là thẻ lấy ra 140 ký tự từ bài viết, thẻ này thường được thấy trong widget "Bài đăng phổ biến". Duy Phạm là một trong những cao thủ về Blogger, anh ấy chia sẻ rất nhiều thủ thuật độc và lạ, và là một trong những nguồn cảm hứng để mình làm ra blog này :)Thêm một tẹo nhỏ, mình xin giới thiệu Auto readmore với thumbnail 2014 do mình làm ra, khá là tối ưu và nhiều tính năng nhất cho người dùng.
lúc 21:43 26 tháng 1, 2014
Nếu mình không nhầm thì thủ thuật này 2 năm trước trang thuthuatblogger.info đã viết rồi và mình cũng từng sử dụng qua.
Thủ thuật này có 2 ưu điểm. 1 là không sử dụng javascript nên tốc độ load cao. 2 là tiện lợi khỏi phải chèn ngắt trang mỗi lần viết bài.
Nhưng đồng thời nó cũng mang 2 nhược điểm. 1 là cái này chỉ lấy ra 140 ký tự muốn nhiều hơn cũng bó tay, nội dung đoạn đầu quá ngắn nên chưa tóm tắt đc hết nội dung của bài viết. 2 là nếu dùng cái auto readmore này mà trong bài viết không có ngắt trang thì blog sẽ rất dễ bị hack data :(
thuthuat.voquocan.com
lúc 21:52 26 tháng 1, 2014
Mày thấy blog của Duy Phạm đăng vào năm 2011, nên chắc nguồn của anh ấy :D
lúc 02:11 29 tháng 6, 2014
hix mình làm theo hướng dẫn nhưng nó vẫn tự động tạo thumbnail với những bài có ảnh (tự động lấy ảnh đầu tiên làm thumbnail) nhưng với những bài viết toàn chữ thì nó vẫn không hiện ảnh mình đặt sẵn. Mà nó chỉ hiện khung trắng nếu trên chrome còn hiện chữ trùng với title trên fire fox. Bạn có thể chỉ rõ hơn giúp mình được không. Thank
lúc 09:45 29 tháng 6, 2014
Bạn sử dụng đoạn mã nào vậy bạn? Với lại để lại cho mình địa chỉ website mình xem thử nhé.
lúc 15:29 8 tháng 7, 2014
Có rất nhiều thẻ và mình thay đổi thẻ mình tìm thấy bằng Ctrl + F đầu tiên nhưng sao nó không hoạt động bạn, hay mình thay sai
lúc 15:45 8 tháng 7, 2014
Đúng đấy bạn, bạn phải thay đổi tất cả nhé, có 2 -> 3 thẻ như thế nếu mình ko lầm.
lúc 08:15 2 tháng 1, 2015
Làm sao để di chuyển cái title sang bên phải , cùng hàng với ảnh như trong demo hả anh
lúc 00:39 31 tháng 3, 2015
Bạn ơi cho mình hỏi ,mình lấy một cái theme và cài đặt lên site mình, nhưng mình tìm cách thay thê chữ "Read More" thành "Đọc thêm" không được....Thường thì mình hay mò tìm bằng cách vao chỉnh code mình Ctrl + F để tìm từ "Read More" và thay thế nhưng lần này không tìm được... Không biết có cách nào để đổi từ "Read More" kia thành "Đọc Thêm" không bạn. Cái theme nó có sẵn vậy rồi : http://uocmodanloi.blogspot.com/
lúc 08:15 31 tháng 3, 2015
Nhìn sơ qua mình biết chắc chắn nó nằm trong đoạn auto readmore bị mã hóa rồi, bạn đơn giản có thể dùng css ẩn cái cũ đi, và thay thể bằng nút mới tự tạo. Nếu không biết để khi về mình sẽ hướng dẫn cho :D
lúc 20:18 31 tháng 3, 2015
Hay quá, bạn hướng dẫn mình làm với ! Mấy cái code bị mã hóa mình không biết làm sao để ẩn đi và thay vào cái mới! Không biết bạn đã có bài viết nào về vấn đề này chưa ?
lúc 20:56 31 tháng 3, 2015
Bạn thử chèn luôn đoạn này lên trên thẻ </body> nhé
<script type="text/javascript">
function doiten(){ // function declaratioon
var str = document.getElementById("Blog1").innerHTML;
var res = str.replace((/Read More/g, "W3Schools");
document.getElementById("Blog1").innerHTML = res;
}
doiten();
</script>
mình viết script nhỏ luôn cho bạn đỡ cực.
lúc 22:31 31 tháng 3, 2015
Chữ "Read More" vẫn chưa đổi bạn ơi ? Giờ làm sao để nó đổi ?
lúc 20:00 1 tháng 4, 2015
Sorry bạn, code mình làm dư vài kí tự, thử lại nha
<script type='text/javascript'>
function doiten(){
var str = document.getElementById("Blog1").innerHTML;
var res = str.replace(/Read More/g,"Đọc tiếp");
document.getElementById("Blog1").innerHTML = res;
}
doiten();
</script>
lúc 21:18 1 tháng 4, 2015
Đã đổi được rồi, hay quá bạn :) cảm ơn bạn nhiều nha ! Nhưng không biết giờ mình muốn hỏi thêm nữa có làm phiền bạn quá không?
lúc 21:44 1 tháng 4, 2015
Không sao bạn cứ hỏi mình sẽ trả lời :D
lúc 23:50 1 tháng 4, 2015
Mình reply lại rồi mà không biết lỗi do mình hay sao mà không thấy nó hiện lên ta ? Lúc đầu thấy mà sao lát vào lại không thấy nữa nhỉ ? Khung comment bị lỗi hay do mình vậy bạn ?
lúc 21:12 14 tháng 4, 2015
Có cách nào để làm cho cái hình lớn hơn 72 px không thế, 1 đoạn CSS hay .js chẳng hạn. Cần lắm :)
lúc 21:16 14 tháng 4, 2015
anh có thể kết hợp css với cái này http://www.kslzone.net/2014/05/resize-va-cat-anh-thumbnail-ung-kich.html
lúc 12:19 29 tháng 4, 2016
bài viết rất hay .
lúc 12:22 29 tháng 4, 2016
cho mình hỏi trang này là blogspot hả .
lúc 12:42 29 tháng 4, 2016
Đúng rồi site mình làm bằng blogspot.