Trang chủ \21.1.11

Auto readmore không sử dụng javascript cho Blogger

Blogger đã có readmore tuy nhiên nó khá thủ công, với blog đã có nhiều bài viết thì việc tạo readmore cho từng bài là rất vất vả và blogger thường tìm đến với auto readmore javascript. Auto readmore javascript thực ra chỉ hiển thị một phần bài viết qua hàm document.write, nội dung cả bài viết vẫn được trình duyệt tải về. Nhược điểm của nó là không thân thiện với các bộ máy tìm kiếm và các công cụ dịch trực tuyến, ngoài ra với bài viết dài nếu không dùng thêm readmore của Blogger thì sẽ gặp lỗi phân trang do Blogger tự ngắt trang. Thủ thuật auto readmore mình giới thiệu sau đây hoàn toàn mới, không sử dụng javascript mà dùng các câu lệnh do chính Blogger cung cấp. Nó sẽ cải thiện tốc độ blog của bạn khi duyệt các trang kiểu index, archive do chỉ tải về trích đoạn nội dung của bài viết.

Các bước thực hiện:


Bước 1: Thêm class post-thumbnail để hiển thị hình ảnh. Có 2 dạng hiển thị hình ảnh là bên trái hoặc bên phải.

1. Hiển thị hình ảnh bên trái:

Thêm đoạn mã dưới đây vào bên trên thẻ ]]></b:skin>:
.post-thumbnail{float:left;margin-right:20px}

2. Hiển thị hình ảnh bên phải:

Thêm đoạn mã dưới đây vào bên trên thẻ ]]></b:skin>:
.post-thumbnail{float:right;margin-left:20px}

Bước 2: Thêm đoạn mã auto readmore. Có 4 dạng auto readmore để lựa chọn.

1. Auto readmore với hình ảnh:

Thay thế <data:post.body/> bằng đoạn mã dưới đây:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <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:

Thay thế <data:post.body/> bằng đoạn mã dưới đây:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <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/AVvXsEj1JJ_CbmxP74f5e43k-Od8yJ1ve_x9UarWrDcT39qR0hzXnxQG-sBbFgdwOMylVC4sNYQnq86KT7qMyB-jwxQxofTfMpbF8GHV4o6lo7sYI2Ipk6yCB4yPqW5FKvyU6NNZsYDMKw2TaRS-/' 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:

Thay thế <data:post.body/> bằng đoạn mã dưới đây:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <data:post.body/>
     <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>
   <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:

Thay thế <data:post.body/> bằng đoạn mã dưới đây:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <data:post.body/>
     <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>
   <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/AVvXsEj1JJ_CbmxP74f5e43k-Od8yJ1ve_x9UarWrDcT39qR0hzXnxQG-sBbFgdwOMylVC4sNYQnq86KT7qMyB-jwxQxofTfMpbF8GHV4o6lo7sYI2Ipk6yCB4yPqW5FKvyU6NNZsYDMKw2TaRS-/' 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/AVvXsEj1JJ_CbmxP74f5e43k-Od8yJ1ve_x9UarWrDcT39qR0hzXnxQG-sBbFgdwOMylVC4sNYQnq86KT7qMyB-jwxQxofTfMpbF8GHV4o6lo7sYI2Ipk6yCB4yPqW5FKvyU6NNZsYDMKw2TaRS-/' 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>

Việc hiển thị trích đoạn nội dung bài viết là thông qua thẻ <data:post.snippet/> của Blogger. Như đã từng đề cập tới ở bài đăng trước đoạn trích dẫn của Blogger chỉ gồm 140 ký tự (Blogger vừa update, số lượng ký tự của thẻ <data:post.snippet/> ở widget Blog giờ đây ít hơn số lượng ký tự của thẻ <data:post.snippet/> ở widget PopularPosts), khá là ngắn và việc ngắt ký tự không chú ý tới ký tự trống nên có câu bị mất vài từ trở nên vô nghĩa.

Hình ảnh được lấy thông qua lệnh data:post.thumbnailUrl. Đây là đường dẫn ảnh thứ nhất trong bài viết đã được Blogger resize về kích thước 72x72 pixels. Cần chú ý là ảnh của bài viết phải được upload thông qua công cụ Chèn hình ảnh của Blogger, hoặc lấy địa chỉ ảnh từ Picasa và địa chỉ ảnh phải có s1600, s800...thì công cụ resize của Blogger mới hoạt động, khi đó ảnh mới xuất hiện. Thủ thuật trên đã thêm thuộc tính alt là tiêu đề bài viết cho hình ảnh, nó giúp tăng khả năng SEO cho blog của bạn.

Trước khi thực hiện thủ thuật auto readmore này bạn cần loại bỏ đoạn mã auto readmore javascript nếu đang dùng nhé.

Hướng dẫn thủ thuật Blogger, Blogspot

219

Nhận xét
202

bạn ơi.sao khi mình sử dụng code thì những trang dạng .com/p/lien-he.html bị mất chữ thành ... vậy bạn

Reply Xóa nhận xét
204

Nếu bạn dùng code trên thì không có hiện tượng đó.

Reply Xóa nhận xét
203

bạn cho mình hỏi sao những trang dạng /p/abc.html cũng bị rút gọn vậy

Reply Xóa nhận xét
205

mình đang sử dụng code của bạn mà

Reply Xóa nhận xét
206

blog bạn là phimmobi phải k? nó đâu bị

Reply Xóa nhận xét
207

bài viết hay lắm duy,nhưng cho mình hỏi một điều là sao hình ảnh hiện thị nó nhòe và k rõ vậy mặc dù hình gốc thì rõ lắm

Reply Xóa nhận xét
208

Chào bác #Duy Pham
Hiện tại mình đang làm một site bán hàng bằng blogspot

Thấy có cái site này hiệu ứng ở trang chủ thích quá.

Mình muốn áp dụng vào blogspot của mình hiệu ứng di chuột qua sản phẩm thì lấy thông tin sản phẩm ra. Và lấy được giá tiền ra nữa

đây là demo: http://boutique-soratemplates.blogspot.com/

đây là gốc : http://www.soratemplates.com/2013/09/boutique-blogger-template.html

mong bác có thể giúp đỡ mình vì đang rất cần cái này.

Reply Xóa nhận xét
209

Mình đang dùng cái này của bạn.Mình thấy cái bạn đang dùng đỡ chiếm diện tích,thấy mấy blog cũng đang dùng(Troll..namkna...) nhưng tìm ko thấy bài nào hướng dẫn cả.Bạn có thể chia sẻ được không :D

Reply Xóa nhận xét
210

cho mình hỏi thế còn tự động post thumbnail youtube thì làm sao hả bạn?

Reply Xóa nhận xét
211

Sangat bermanfaat. :)

Reply Xóa nhận xét
212

Mình chỉ muốn hiển thị mỗi title mà không có mô tả thì làm thế nào bạn nhỉ

Reply Xóa nhận xét
213

bác tìm trên đoạn code bác duy share rồi xóa nó đi :D

Reply Xóa nhận xét
214

data:post.snippet đoạn này nhé bác

Reply Xóa nhận xét
215

tim data:post body o cho nao vay mn . e tim mai k thay

Reply Xóa nhận xét
216

Hello, This is very nice trick but how to increase Post Snippet Words

Reply Xóa nhận xét
218

Muốn hỏi điều này mà khó diễn tả quá :v

Mình muốn cầu trúc của cái auto-readmore thứ tự như sau:
- Data post thumbnail
- Data data post title
- Data post snippet
Mục đích là để cho title thấp xuống ngang với tấm hình.

Nếu được thì bác chỉ cho em cách làm như vậy với : "3. Auto readmore với hình ảnh. Không readmore với bài viết mới nhất:"

P/s: khoảng 21h em mới về hóng tin bác, iem phắn đây :3


Reply Xóa nhận xét
219

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

Reply

Đăng nhận xét

Cancel