Thư viện

Trải nghiệm

Thứ Sáu, tháng 4 19, 2013

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

Chia sẻ:
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ả.
Auto readmore use scripts for blogspot style 3 - Auto readmore với thumbnail dùng scripts cho  blogspot style 3
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.

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 == &quot;index&quot;'> 
<!-- readmore style 3 http://namkna.blogspot.com/ -->  
<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
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 == &quot;index&quot;'>
<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 =&#39;<data:post.dateHeader/>&#39;;</script><script>document.write(ngaygio);</script></b:if></span>
<div style='clear: both;'/>    
<div class='post-body'>    
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
</div><div style='clear: both;'/>       
</b:if>  
      <!-- XEM BAI VIET -->
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<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.

53 nhận xét:

  1. 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óa
  2. và lại có 2 cái tiêu đề luôn :(

    Trả lờiXóa
    Trả lời
    1. Bạn sửa đoạn:

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

      Xóa
    2. Mì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óa
    3. Bạn chú ý coi chừng copy thiếu đoạn mã của mình nha.

      Xóa
  3. Quá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
  4. :(( 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óa
    Trả lời
    1. Có 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óa
  5. chao 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óa
  6. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
    Trả lời
    1. 2 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óa
  7. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  8. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  9. Là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óa
    Trả lời
    1. Phần CSS của bạn chỉnh lại như sau:

      1. 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;
      }


      Xóa
  10. Blog của em có 3-4 đoạn code thì thế vô đâu

    Trả lờiXóa
  11. Trả lời
    1. Em thay thế đoạn code nằm trong thẻ tườn tự như bên dưới:

      <b:if cond='data:blog.pageType == "item"'>
      <data:post.body/>
      </b:if>

      Xóa
  12. sau một lúc mày mò, đoạn code mà anh nói đã mất tiêu
    chỉ còn lại 1 đoạn code như ở bước 7
    giờ phải làm sao?

    Trả lờiXóa
    Trả lời
    1. Bạn hãy gửi templat vào mail của admin đi. tavannam01@gmail/com. để amin thêm giúp cho.

      Xóa
  13. mì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óa
    Trả lời
    1. Bạ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óa
  14. Bá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óa
    Trả lời
    1. Gửi template vào tavannam01@gmail.com mình chỉnh cho nha.

      Xóa
  15. Sao 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óa
    Trả lời
    1. Em 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óa
  16. nam 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óa
    Trả lời
    1. Cô có thể gủi template vào mail tavannam01@gmail.com cháu sẽ chỉnh giúp cô :)

      Xóa
  17. giúp em với anh namta ơi làm giống anh bên trên.
    em 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!

    Trả lờiXóa
    Trả lời
    1. 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.

      Sửa lỗi không phân trang

      Xóa
  18. vẫn không hiện được anh namta ơi! chỉ có 3 bài thui không hơn không kém
    anh xem dùm em với http://linkh8.blogspot.com/

    Trả lờiXóa
  19. hình ảnh và chữ nó đè lên nhau luôn rồi

    Trả lờiXóa
    Trả lời
    1. Em 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óa
  20. không chỉnh được anh nam ta ơi! em gởi toàn bộ code HTML cho anh rồi đó

    Trả lờiXóa
  21. anh 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óa
  22. https://lh4.googleusercontent.com/-4gUbpuLhyLI/UtAzKmthCwI/AAAAAAAAAtE/p8ndjqbTiu0/h120/123.PNG

    Trả lờiXóa
    Trả lời
    1. Phầ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.

      CÒ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

      Xóa
  23. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  24. Mì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
    Trả lời
    1. Đ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:

      <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 != &quot;index&quot;'>
      <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 đề.

      Xóa
    2. Cám ơn Nam nhé, Mình làm dc rồi

      Xóa
    3. À 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óa
  25. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
    Trả lời
    1. 1. 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 :

      <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
      <a expr:href='data:post.url + &quot;#more&quot;' 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.

      Xóa
    2. 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 à?
      Có 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

      Xóa
    3. 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óa
  26. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  27. bạ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óa
  28. Bạ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