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.
» Nếu càn giúp đỡ?
Nếu gặp bát kỳ vướng mắc nào trong khi áp dụng hãy để lại thắc mắc của bạn ở phần commnet mình sẽ trợ giúp.
Nhận xét
cái tiêu đề của mình nó lại ko lệch ra khỏi cái ảnh như hình trên, và cái ảnh của mình nó lại che mất giờ post :(
Trả lờiXóavà lại có 2 cái tiêu đề luôn :(
Trả lờiXóaBạn sửa đoạn:
Xóa<h3 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>
</h3>
thành:
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:blog.pageType == "item"'>
<h3 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>
</h3>
</b:if>
</b:if>
thank namkna nhé ^^
XóaMình tìm được 2 đoạn code cho dòng H3 trong html và làm theo hướng dẫn nhưng vẫn hệ thống không cho lưu. Nam giúp mình với
XóaBạn chú ý coi chừng copy thiếu đoạn mã của mình nha.
XóaQuái, mới hôm qua còn auto readmore ngon lành, hôm nay mình up lại mấy cái link ảnh, đến khi lưu lại thì ko còn auto read more đc nữa :(, mình mới khôi phục lại file xml lúc tói hôm qua mà auto read more xài bình thường, lạ là nó vẫn ko giống với hôm qua, đúng là ko thể hiểu nổi @@
Trả lờiXóaà, mình sửa đc rôi @@
Xóatks namkna
Trả lờiXóa:(( em sửa lại như cái comt của anh ở dưới vẫn bị lỗi 2 tựa đề thì làm sao bây giờ anh?
Trả lờiXóaCó 2 đoạn như vậy nha em, Một đoạn là iêu đề khi xem bằng mobile, một đoạn là tiêu đề khi xem bằng máy tính (deskop). Em phải thay đúng mới hết lỗi nha :))
Xóachao ban,minh lam theo hướng dẫn ma sao không được jif cả minh tim thấy 3 đoạn data.pót.body> minh thay đoạn 1 không dc giúp minh nhé cảm ơn
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóa2 Bạn hãy gửi template vào tavannam01@gmail.com và ghi rõ yêu cầu trợ giúp là bài này để mình thêm giúp cho nha.
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaLàm sao để top-bottom-left-right của blog vừa vặn màn hình vậy bạn ? Chỉ mình với. Blog của tôi là cotuongvacuocsong.blogspot.com
Trả lờiXóaPhần CSS của bạn chỉnh lại như sau:
Xóa1. Thay:
body {
font: normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #222222;
padding: 0;
background: url(http://vtechblog.com/wp-content/themes/vtechblog1/images/patterns/body-bg15.png)
no-repeat fixed top center
/* Credit: sbayram (http://www.istockphoto.com/googleimages.php?id=4571652&platform=blogger) */;
}
}
html body .region-inner {
min-width: 0;
max-width: 100%;
width: auto;
/* Credit: sbayram (http://www.istockphoto.com/googleimages.php?id=4571652&platform=blogger) */;
}
}
thành:
body {
font: normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #222222;
padding:0;
margin:0 auto;
background: url(http://vtechblog.com/wp-content/themes/vtechblog1/images/patterns/body-bg15.png)
no-repeat fixed top center;
}
html body .region-inner {
min-width: 0;
max-width: 100%;
width: auto;
}
Blog của em có 3-4 đoạn code thì thế vô đâu
Trả lờiXóacode ở bước 7 đó anh
Trả lờiXóaEm thay thế đoạn code nằm trong thẻ tườn tự như bên dưới:
Xóa<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
sau một lúc mày mò, đoạn code mà anh nói đã mất tiêu
Trả lờiXóachỉ còn lại 1 đoạn code như ở bước 7
giờ phải làm sao?
Bạn hãy gửi templat vào mail của admin đi. tavannam01@gmail/com. để amin thêm giúp cho.
Xóamình làm y hệt như trên rồi mà sao bài đăng trên trang chủ vẫn hiện y như trang trong read more vậy
Trả lờiXóaBạn đang dùng một tiện ích autoread more khác. hãy remover nó đi trước khi áp dụng tip này nha.
XóaBác Nam Tạ ơi, trang của em có 4 cái e thay các kiểu các loại rồi ko được bác ạ. Trang http://canho.chungcugiagoc.com/, bác giúp em cái nha. Thank bác nhiều lắm !
Trả lờiXóaGửi template vào tavannam01@gmail.com mình chỉnh cho nha.
XóaSao em thử làm phần "read more" này không được vậy anh, mấy bài khác anh viết em hiểu và làm thấy ok, còn phần read more này, em làm theo các bài đăng trong nhãn này mà sao không hiện, chỉ có phần ko dùng javascript chia 2 cột thì hiện, mà cũng hiện kỳ quá, không biết bị lỗi gì anh chỉ em với.
Trả lờiXóaEm phải xóa phần readmore cũ trước khi chèn code của thủ thuật này nếu khồn sẽ lỗi./.
Xóanam kha ơi cô cố làm đi làm lại mãi mà ko được cái bài này / Nam kha giúp cô đi
Trả lờiXóaCô có thể gủi template vào mail tavannam01@gmail.com cháu sẽ chỉnh giúp cô :)
Xóagiúp em với anh namta ơi làm giống anh bên trên.
Trả lờiXóaem cai đặt hiển thị trang chủ 20 bài viết mà sao. ap dung xong trang chủ của em hiện có 3 bài viết vậy Anh!
Có nhiều nguyên nhân của vấn đề đó em đọc thêm bài viết này để khắc phục nó nha.
XóaSửa lỗi không phân trang
vẫn không hiện được anh namta ơi! chỉ có 3 bài thui không hơn không kém
Trả lờiXóaanh xem dùm em với http://linkh8.blogspot.com/
hình ảnh và chữ nó đè lên nhau luôn rồi
Trả lờiXóaEm phải điều chỉnh lại CSS. NẾu không điều chỉnh được gửi nó vào tavannam01@gmail.com a chỉnh cho nha.
Xóakhông chỉnh được anh nam ta ơi! em gởi toàn bộ code HTML cho anh rồi đó
Trả lờiXóaanh xem có cách nào để nó không hiển thị những kí tự như hình em khoanh tròn này không ajk. email em : lamtv.36@gmail.com
Trả lờiXóahttps://lh4.googleusercontent.com/-4gUbpuLhyLI/UtAzKmthCwI/AAAAAAAAAtE/p8ndjqbTiu0/h120/123.PNG
Trả lờiXóaPhần đó là tổ hợp của rất nhiều code. như nút chỉnh sửa nhanh bài viết, nút chia sẻ, tên tác giả. Nếu muốn xóa nó đi chỉ cần tìm đoạn code tương ứng xóa đi là oke.
XóaCÒn về nội dụng của từng code thì có thể xem ở bài viết này nè bạn: CODE SỬ DỤNG Ở CHÂN BÀI VIẾT TRÊN BLOGSPOT
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaMình áp dụng như của bạn ngoài trang chủ thì được rồi, nhưng khi xem bài viết thì mất tiêu đề bài đăng, giúp mình với phải làm sao vậy Nam
Trả lờiXóaĐoạn tiêu đề ở trong mẫu của bạn đã bị xóa rồi. Bạn có thể tìm đoạn có dạng như bên dưới:
Xóa<div class='post-header-line-1'></div>
hoặc:
<div class='post-header-line-1'/>
(Lưu ý đoạn code trên trong blog đề có 2 đoạn giống hệt nhau, Bạn chỉ cần quan tâm đoạn gần vị trí của bước 7 trong bài này thôi. Đoạn còn lại là giao diện của mobile dán vào cũng không có tác dụng).
Và thêm vào trước nó đoạn code như bên dưới:
<b:if cond='data:blog.pageType != "index"'>
<h3 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>
</h3>
</b:if>
Với đoạn code trên thì ở những trang không phải trang chủ, trang nhãn và trang lưu trữ thì bài viết sẽ hiện tiêu đề.
Cám ơn Nam nhé, Mình làm dc rồi
XóaÀ nhưng Nam oi, làm sao cho chữ Chi tiết đưng ngay bên phải dưới các hàng chữ đó đc không, hiện nay nó đứng mãi dưới hình thumbnai nhìn xấu lắm. Nam giúp mình với nhé
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóa1. 1. Chữ chi tiết thực chất chỉ là đoạn mã jump-link của blogger. Nếu muốn để nó sau hàng chữ thì bạn vào trong mẫu và tìm đoạn mã bên dưới :
Xóa<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>
và dán nó vào trước thẻ </div> của đoạn bên dưới:
</div><div style='clear: both;'/>
</b:if>
<!-- XEM BAI VIET -->
p/s: Khi truy cập người ta thường bấm vào tiêu đề bài viết nên đoạn code đó có vẻ thừa. Bạn nên xóa nó đi bằng cách xóa cả đoạn jump-link bên trên đi.
2. Khi viết bài bạn nên viết từ trên xuống đừng đển cách dòng </br> để khong xuất hiện khoảng cách nha.
Mình viết cũng đâu có để khoảng cách xuống dòng đâu, nhưng vẫn có một khoảng cách khá lớn giữa tiêu đề và phần nội dung Nam à?
XóaCó khi nào do mình ko để xuất hiện ngày giờ đăng bài nên có một khảng cách như vậy? Nếu thế thì có cách nào khắc phục ko Nam. Giúp mình nhé.
Cám ơn Nam nhiều
Bạn gửi mẫu đó của bạn vào tavannam01@gmail.com để mình kiểm tra lại cho bạn nha.
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóabạn ơi cái chữ của mình nó ko ở cùng dòng với ảnh, bạn giúp mình nhé http://chungcucomat.blogspot.com/
Trả lờiXóaBạn ơi, phần mô tả mình tùy chỉnh theo ý của mình được không? ví dụ mình nhập giá bán, vị trí thì nó hiển thị ở phần mô tả ngắn ngoài trang chủ?
Trả lờiXóa