Auto readmore với thumbnail dùng scripts cho blogspot style 3
Hôm nay namkna sẽ giới thiệu thêm cho các bạn một kiểu tóm tắt bài viết ở trang chủ (Auto readmore) sử dụng javarscripts. Trong tiện ích này có ảnh thumbnail cùng một hàng với tiêu đề và mô tả.
Phiên bản này sẽ khắc phục lỗi lặp lại tiêu đề và nhận xét của style 2.
Các bạn có thể xem ảnh minh họa hoặc demo.
Các bạn có thể xem ảnh minh họa hoặc demo.
VIEW DEMO
» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Dán code bên dưới vào trước thẻ ]]></b:skin> (Mẹo: Bấm chuột vào một vị trí bất kỳ trong ô chỉnh sửa HTML vào để sử dụng khung tìm kiếm nội tuyến như bài này.)
/*read more by http://namkna.blogspot.com/ */
.post-body.entry-content{border: 1px solid #ddd;padding:5px}.post-header-line-1{font-style:italic;font-size:11px;margin:0 0 6px 133px}
.post img{margin:10px 0 6px}
.post h2{margin-left:133px;font-size:110%}
.numberingcomments a:link,.numberingcomments a:visited{float:right;color:#36F;text-decoration:none;padding-right:10px;padding-top:5px;padding-left:10px;font-weight:700}
.numberingcomments a:hover,.numberingcomments a:active{color:#FF0A47}
.ngay-gio{font-size:11px;font-style:italic;float:right;color:#454545;font-weight:400;margin:0;padding:0}
5. Chèn tiếp code bên dưới vào trước thẻ </head><b:if cond='data:blog.pageType == "index"'> <!-- readmore style 3 http://namkna.blogspot.com/ --> <script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 400; summary_img = 160; img_thumb_height = 85; img_thumb_width = 124; </script> <script type='text/javascript'> //<![CDATA[ eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('l m(a,b){6(a.5("<")!=-1){3 s=a.O("<");N(3 i=0;i<s.4;i++){6(s[i].5(">")!=-1){s[i]=s[i].8(s[i].5(">")+1,s[i].4)}}a=s.J("")}b=(b<a.4-1)?b:a.4-2;A(a.v(b-1)!=\' \'&&a.5(\' \',b)!=-1)b++;a=a.8(0,b-1);t a+\'...\'}l r(a){3 b=D.p(a);3 c="";3 d=b.q("7");3 e=u;6(d.4>=1){c=\'<k w="x:y; z:j B 0 j;;C:-P 0 0 0"><7 E="ẢF G họa" g="\'+d[0].g+\'" H="\'+I+\'9" K="\'+L+\'9" /></k>\';e=M}3 f=c+\'<n>\'+m(b.o,e)+\'</n>\';b.o=f}',52,52,'|||var|length|indexOf|if|img|substring|px|||||||src|||0px|span|function|removeHtmlTag|div|innerHTML|getElementById|getElementsByTagName|createSummaryAndThumb||return|summary_noimg|charAt|style|float|left|padding|while|10px|margin|document|alt|nh|minh|width|img_thumb_width|join|height|img_thumb_height|summary_img|for|split|38px'.split('|'),0,{})) //]]> </script> </b:if>
Trong đó:
- summary_noimg = 400; là số ký tự của phần mô tả
summary_img = 160; là số ký tự của phần tiêu đề.
img_thumb_height = 85; là chều cao của ảnh thumbnail
img_thumb_width = 124; là chều rộng của ảnh thumbnail
7. Tiếp theo bạn hãy tìm đến dòng code bên dưới
<data:post.body/>
- Thay thế code vừa tìm được thành đoạn code bên dướ (Lưu ý có tùy theo template mà có từ 2 đến 4 đoạn code như bên trên. bạn phải thay đúng vị trí thì mới hoạt động nha.):
<!-- Start auto read more namkna.blogspot.com -->
<!-- BAI VIET KHI XEM LABEL -->
<b:if cond='data:blog.pageType == "index"'>
<h2><a expr:href='data:post.url'><data:post.title/></a></h2>
<span class='post-header-line-1'><b:if cond='data:top.showAuthor'>
<data:post.timestamp/> | <script>var ngaygio ='<data:post.dateHeader/>';</script><script>document.write(ngaygio);</script></b:if></span>
<div style='clear: both;'/>
<div class='post-body'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
</div><div style='clear: both;'/>
</b:if>
<!-- XEM BAI VIET -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<div class='clear'/>
<!-- End Auto readmore use scripts for blogspot style 3 - http://namkna.blogspot.com/-->
8. Lưu mẫu lại và xem kết quả nha.Nguồn Terocket
Nguyễn Đạt Khánh | Thứ Ba, tháng 2 16, 2016 |
Thủ thuật Blogger
|
Thumbnail
|
Trang chủ
Be the first to comment!
Được viết bởi Khánh Nguyễn
Blog của tôi, Nguyễn Đạt Khánh là tên của tôi :Nghề nghiệp: IT Computer Networking - Kỹ thuật viên Mạng máy tính Viễn thông
Bạn đang xem Blog của tôi. Đừng quên nhấn Like và Share để ủng hộ. Một điều tốt nhất mà tôi mong đợi, là những dòng Comments thiện chí với nhau. Xin chân thành cảm ơn tất cả các bạn.
Nơi truy cập vào Nick của Tôi trên mạng:
