Auto readmore cho Blogger 2013

Trước đây mình đã giới thiệu Auto readmore không sử dụng javascript cho Blogger với khả năng tăng tốc cho blog và thân thiện với các bộ máy tìm kiếm. Một trong những nhược điểm mình nhận được qua nhận xét của các bạn là hình ảnh hơi nhỏ. Dùng javascript có thể nâng cao kích cỡ ảnh mà không làm ảnh bị nhòe, tuy nhiên vì tiêu đề là không sử dụng javascript nên mình không cập nhật thêm. Trong bài này mình sẽ hướng dẫn một auto readmore mới mà hình ảnh được giữ nguyên kích cỡ ban đầu và tuyệt vời hơn nữa là cũng không cần đụng chạm đến javascript.

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

.dp-thumbnail{margin-bottom:20px;border:1px solid #ccc;box-shadow:0 0 transparent inset,0 5px 0 -4px #fff,0 5px 0 -3px #ccc;padding:10px 0;width:100%;height:90px;text-align:center}
.dp-thumbnail img{border:0;padding:0;max-width:96%;max-height:90px}
.dp-thumbnail span{font-size:26px;line-height:70px;font-weight:bold}

Bước 2: Thay thế toàn bộ <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 class='dp-thumbnail'>
   <b:if cond='data:post.firstImageUrl'>
    <img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
   <b:else/>
    <b:if cond='data:post.thumbnailUrl'>
     <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
    <b:else/>
     <span>No thumbnail</span>
    </b:if>
   </b:if>
  </div>
  <data:post.snippet/>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

Hình ảnh phải được lưu trên Picasa, video từ Youtube. Tự động hiển thị thông báo với bài viết không có hình ảnh và video.

Nguồn : chúng tôi sưu tầm từ nhiều nguồn

Thiết kế web chuyên nghiệp giá rẻ

Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn