Thư viện

Trải nghiệm

Chủ Nhật, tháng 3 10, 2013

Popular Post dạng ảnh Gallery cho blogspot

Bài viết này sẽ hướng dẫn các bạn cách sửa đổi giao diện cũ nhàm chán của blogger. Trong thủ thuật này các bài viết phổ biến sẽ hiển thị dưới dạng ảnh thumbnail và có tóm tắt trên nền thumbnail đó. Tiện ích thích hợp với các blog chia sẻ hình ảnh, bán hàng. Với các blog chia sẻ thông tin thì sẽ không hợp cho lắm (tất nhiên vẫn có thể áp dụng nếu bạn thấy thích).

Chia sẻ:
Popular Post dạng ảnh Gallery cho blogspot
Bài viết này sẽ hướng dẫn các bạn cách sửa đổi giao diện cũ nhàm chán của blogger. Trong thủ thuật này các bài viết phổ biến sẽ hiển thị dưới dạng ảnh thumbnail và có tóm tắt trên nền thumbnail đó. Tiện ích thích hợp với các blog chia sẻ hình ảnh, bán hàng. Với các blog chia sẻ thông tin thì sẽ không hợp cho lắm (tất nhiên vẫn có thể áp dụng nếu bạn thấy thích).

Các bạn hãy xem Demo hoặc ảnh minh họa để thấy rõ hơn:

XEM DEMO

☼ Bước 1: Tạo một tiện ích Popular post.

- Nếu blog bạn đã có tiện ích Popular post rồi thì có thể bỏ qua bước này tiến hành luôn bước 2:
1- Đăng nhập vào Blog
2- Vào mẫu (Template)
3- Chọn Thêm Tiện ích (Add Widget)
4. Bấm chọn mục bài đăng phổ Biến (Popularposst) sau đó lưu lại:
5. Bấm vào chỉnh sửa (Edit) tiện ích Bài Đăng Phổ Biến (Popularposst) bạn vừa tạo để xác định Id của tiện tích popular post và cài đặt các thông số.

☼ Bước 2: Tùy chỉnh tiện ích Popular post.

1- Đăng nhập vào blog
2- Chọn mẫu (template)
3- Chọn chỉnh sửa HTML.
4- Dán mã dưới đây trước thẻ ]]></b:skin> :
.PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}
.PopularPosts ul{padding:5px 0}
.PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}
.PopularPosts .item-content{position:relative;float:left;margin:0}
.PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}
.PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}
.PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}
.PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}
Tùy chỉnh:
  • width:110px; là chiều rộng của hình ảnh thumbnail.
  • height:110px; là chiều cao của hình ảnh thumbnail.
5- Tìm code của tiện ích popular post đã tạo ở bước 1 với id PopularPosts1 như sau:
<b:widget id='PopularPosts1' locked='false' title='Popular post' type='PopularPosts'/>
- Thay thế thành đoạn code bên dưới:
<b:widget id='PopularPosts1' locked='false' title='Popular post' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
6- Lưu mẫu lại và xem kết quả nha.

29 nhận xét:

  1. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  2. minh muốn tạo thanh nay dưới mỗi bài viết làm thế nào, mình tìm mãi mà ko thấy hướng dẫn, ai biết cho mình link bai hướng dẫn với
    http://sphotos-g.ak.fbcdn.net/hphotos-ak-ash3/602914_146567748852077_1781033716_n.jpg

    Trả lờiXóa
  3. qua www.erhay.com .rảnh mình làm cho

    Trả lờiXóa
  4. bạn cho mình link bài hướng dẫn với

    Trả lờiXóa
    Trả lời
    1. Bạn tải code này về dán trước dòng <div class='post-footer'> trong Mở rộng tiện ích mẫu nha
      DOWNLOAD NOW

      Xóa
  5. chào bạn cho mình hỏi chút. M có tạo 1 blog để bán hàng thời trang online. M muốn bài đăng trên blog chỉ hiển thị hình ảnh theo từng mục và khi click vào hình đó sẽ dẫn tới bài viết đầy đủ thì phải làm thế nào? cám ơn nhìu

    Trả lờiXóa
    Trả lời
    1. Bạn có thể xem bài này: http://namkna.blogspot.com/2013/03/recent-post-for-home-page-travel.html

      Xóa
  6. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  7. nếu làm theo hàng ngang 1 dòng thì phải làm như nào bạn nhỉ @@

    Trả lờiXóa
    Trả lời
    1. Chỉ ần đặt ở vị trí có độ rộng đủ là sẽ thành một hàng thôi. Ví dụ đặt trên phần bài đăng, hay dưới chân blog hoặc dưới phần header.

      Xóa
  8. minh lam ma no noi la loi o cot so 5

    Trả lờiXóa
  9. minh lam ma no noi la loi o cot so 5

    Trả lờiXóa
    Trả lời
    1. bạn xem lại đi vì code này không hề tác dộng đến cột thứ 5.

      Xóa
  10. sao chất lượng của ảnh thumbnail lại xấu vậy hả anh Namka

    Trả lờiXóa
    Trả lời
    1. Nó lấy ảnh 72x72 mà. ves tới anh sẽ cập nhật lỗi này.

      Xóa
    2. cập nhật thêm phần mô tả mặc định là 2 dòng chứ lên 3 4 dòng nó che hết cả ảnh

      Xóa
  11. Anh namkna ơi ! em add vào site em thì thấy có chấm nhỏ ở góc ảnh ! Anh xem giúp và làm sao để loại bỏ chấm đó ạ ?


    My Blog

    Trả lờiXóa
    Trả lời
    1. Sorry ! Câu hỏi của em là hỏi bên này ạ ! :D Nhầm bài
      http://namkna.blogspot.com/2011/10/bai-viet-ngau-nhien-toc-o-cao-cho.html?showComment=1381139477105#c4274724690031520202

      Xóa
    2. Anh đã trả lời em ở bài viết đó rồi nha em.

      Xóa
  12. khi thay thế đoạn code thì bị lỗi này
    Bài đăng
    Trang
    Google+
    Thống kê
    Bố cục
    Mẫu
    Cài đặt
    Trở lại Lưu mẫu Chuyển đến tiện ích Chỉnh sửa mẫuXem trước mẫu Hoàn nguyên mẫu tiện ích về mặc định Hoàn nguyên thay đổi Định dạng mẫu
    Lỗi khi phân tích cú pháp XML, dòng 1501, cột 5: The element type "b:section" must be terminated by the matching end-tag ""

    Trả lờiXóa
    Trả lời
    1. Khi thay em xóa nhầm mất thẻ đóng b:section của tiện ích nên nó mới báo lỗi đó em làm lại nhớ chú ý bước 5 nha.

      Nó thường có dạng:

      <b:widget id='PopularPosts1' locked='false' title='Popular post' type='PopularPosts'>...</b:widget>

      Xóa
    2. Vậy là xóa hết từ thẻ mở luôn phải không anh?

      Xóa
    3. Đúng thế xóa từ thẻ mở tới thẻ đóng tương ứng của thẻ mở đó.

      Xóa
  13. Mình muốn thay đổi tiêu đề của một blog bằng tiêu đề của mình thì làm sao ?

    Trả lờiXóa
    Trả lời
    1. Bạn chèn đoạn code bên dưới vào sau thẻ <head>

      <b:if cond='data:blog.pageTitle == data:blog.title'>
      <title>Tiêu đề blog</title>
      <b:else/>
      <title>Tiêu đề trang đang xem | Tiêu đề blog</title>
      </b:if>

      - Nếu muốn dạng mặc định theo tên blog và tên bài viết thì bạn dùng đoạn code sau:

      <b:if cond='data:blog.pageTitle == data:blog.title'>
      <title><data:blog.title/></title>
      <b:else/>
      <title><data:blog.pageName/> | <data:blog.title/></title>
      </b:if>

      Xóa
  14. Cho hỏi tý, mình muốn điều chỉnh ảnh thumbnail về kích thước 131x72 thì làm thế nào? Mình nói tiện ích popular mặc định của blogspot chứ không phải tùy chỉnh như trong bài này.
    Cám ơn bạn nhé! Link blogspot http://dailyozone.blogspot.com/2016/04/khach-hang-tin-tuong.html

    Trả lờiXóa