Ảnh thumbnail sẽ được lấy một cách đẹp và nhanh hơn thay vì resize lại:
----->
Tuy vậy đối với ảnh không phải từ Picasa mà copy từ site khác thì vẫn được resize lại nhưng không được đẹp cho lắm :
----->
Trước khi thực hiện thủ thuật này thì bạn nên sao lưu lại template gốc để đề phòng, sau đó vào phần chỉnh sửa HTML rồi chèn đoạn CSS sau phía trên ]]></b:skin>
.thumb,.no-thumb{float:left;margin-right:15px;width:164px;height:164px;overflow:hidden;position:related}
.no-thumb{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVde8DwT-_WABGnMw_USprNkJQBndtSfVJI3Mm0oB7Vg4iwl_T6hQ57vV0SJPuXPfB5Ksb6zFuy-2KHWKRCxO2C2_mH0Gh1VGfUwXnY8j_ysGX1BSOXwzl1geXSUMl742YP1Mw4tGA_a8/) 0 0 no-repeat;}
a.jump-link{font-weight:bold}
<script type='text/javascript'>//<![CDATA[
var snippet=60; G="s164-p";
function H(b,a){return
b.replace(/<.*?>/gi,"").split(/\s+/).slice(0,a-1).join(" ")}
function rm(b){var
b=document.getElementById(b),a="",a=b.getElementsByTagName("img");if(1<=a.length){C=a[0].src;B=C.split("/");D=B[2];if(-1!=D.indexOf("blogspot")||-1!=D.indexOf("googleusercontent")||-1!=D.indexOf("ggpht"))F=B[7],C=-1==F.indexOf(".")?C.replace(F,G):B[0]+"//"+B[2]+"/"+B[3]+"/"+B[4]+"/"+B[5]+"/"+B[6]+"/"+G+"/"+B[7];a='<div
class="thumb"><img src="'+C+'" /></div>'}else a='<div
class="no-thumb"></div>';b.innerHTML=a+H(b.innerHTML,snippet)+"..."};
//]]></script>
Màu xanh là url ảnh thumb mặc định khi bài đăng không chứa ảnh nào.
60 là số kí tự đoạn trích dẫn, có thể sửa lại.
Cuối cùng, chọn mở rộng tiện ích tìm đến <data:post.body/> sửa nó thành:
<b:if cond='data:blog.pageType == "index"'>
<span expr:id='"p" + data:post.id'><data:post.body/></span>
<script
type='text/javascript'>rm("p<data:post.id/>")</script><b:else/><data:post.body/></b:if>
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + "#more"'>Read More</a><b:else/>
<b:if cond='data:blog.pageType == "index"'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Read More</a>
</b:if>
</b:if>
<div class='clear'/>
<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>
Code này hoàn toàn tương thích với read-more mặc định của Blogger, và nếu bạn siêng chèn thẻ more cho bài đăng thì tốc độ của nó có thể gần ngang thủ thuật auto-readmore không dùng javascript, và đoạn trích dẫn thì chắc chắn là dài hơn. Về SEO thì có thể yên tâm là toàn bộ HTML của bài đăng vẫn hiển thị trong source của blog nên không ảnh hưởng.
(Nguồn: noct blog)
Không có nhận xét nào:
Đăng nhận xét