Thư viện

Trải nghiệm

Thứ Năm, tháng 1 20, 2011

Popular pots có có số đếm và title trích dẫn

popular post Dạng này bao gồm số đếm (count), ảnh minh họa (thumbnail), và tiêu đề bài viết (post).

Chia sẻ:
Nice Popular Post Widget With Counter - Popular pots có có số đếm và title trích dẫn
PopularPosts là 1 widget được rất nhiều người dùng Blogger sử dụng, đây là widget cho biết những bài đăng phổ biến được nhiều người đọc trên blog của bạn. Ngoài 3 dạng thống kê: 7 ngày qua, 30 ngày qua mọi lúc nó có 4 kiểu hiển thị là: chỉ mình tiêu đề bài đăng, tiêu đề bài đăng và đoạn trích dẫn, tiêu đề bài đăng và hình ảnh, tiêu đề bài đăng kèm đoạn trích dẫn và hình ảnh. Thủ thuật sau đây sẽ hiển thị PopularPosts bao gồm số đếm (count), ảnh minh họa (thumbnail), và tiêu đề bài viết (post). Về cơ bản style này tương tự với style Cool Popular Posts mà mình từng giới thiệu đến các bạn.

Các bạn có thể xem 2 Demo mình thực hiện trên 2 blog khác nhau để xem hiệu quả nha:

DEMO 1     DEMO 2

☼ Có gì mới?

1- Hiển thị số đếm dựa trên một scip tương đối nhẹ, do vậy không ảnh hưởng nhiều tới tốc độ load của blog bạn.
2- Thêm ảnh no thumbnail chung cho những bài viết không có ảnh minh họa để giúp style đẹp hơn và không bị phá vỡ bố cục (Xem ở hình minh họa hoặc blog demo 1).
Để làm được vậy chúng ta quan tâm tới đoạn mã của kiểu hiển thị thứ 3 <!-- (3) Show only thumbnails --> và thứ 4 <!-- (4) Show snippets and thumbnails --> (mình sẽ đánh dấu màu xanh để các bạn dễ dàng theo dõi ở phần sau).
3- Có đoạn tittle mô tả khi dê chuột vào tiêu đề bài viết. Bạn có thể xem ở blog Demo hoặc hình dưới.
Popular pots có có số đếm và title trích dẫn

Lưu ý: Bạn nên sau lưu template để tránh những sai lầm có thể sảy ra trong quá trình chỉnh sửa. Nên tiến hành chỉnh sửa template được tải về (bạn có thể chỉnh trực tiếp trên Blogger nhưng sẽ dễ dàng hơn nếu dùng một trình text editor chuyên nghiệp, ngoài ra thì việc chỉnh trên Blogger sẽ gây lỗi font với blog Tiếng Việt).

☼ Bước 1: Thêm tiện ích bài đăng phổ biến (Popular pots):

- Hãy chắc chắn trên blog của bạn đã có widget PopularPosts này: Nếu chưa có thì hãy thêm vào blog và cài đặt như bước 1.5.
1.1- Đăng nhập vào Blog
1.2- Vào mẫu (Template)
1.3- Chọn Thêm Tiện ích (Add Widget)
1.4. Bấm chọn mục bài đăng phổ Biến (Popularposst) sau đó lưu lại:

Popular pots có có số đếm và title trích dẫn
1.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ố: đánh dấu vào lựa chọn kèm theo hình ảnh thu nhỏ và trích đoạn. Kiểu thống kê thì tùy bạn chọn 1 trong 3 kiểu: 7 ngày qua, 30 ngày qua hay mọi lúc. Lưu thiết lập và tiến hành bước tiếp theo.
Popular pots có có số đếm và title trích dẫn
- Bạn nên để số bài hiển thị tối đa là 10 bài.

☼ Bước 2: Chỉnh sửa style Popular pots :


   2.1- Đăng nhập vào Blog
   2.2- Vào Mẫu (Template)
   2.3- Chọn Chỉnh sửa HTML (Edit HTML)
   2.4- Thêm đoạn code sau vào trước thẻ ]]></b:skin> :
/*POPULAR POST http://namkna.blogspot.com/2011/01/cac-trang-web-lay-code-nhac-chen-vao.htm */
.top1, .top2, .top3, .top4, .top5, .top6, .top7, .top8, .top9, .top10 {border-bottom:1px dotted #ccc;padding-top:6px;font:bold 12px Tahoma;width:280px;margin-left:10px;font: bold 13px Tahoma;color:#FF6600}
.top1 {background: url(https://lh3.googleusercontent.com/-Pe9zNU7cpT8/T5WLOj1PiII/AAAAAAAABQs/-C0sfi0jWyM/h120/1-popular-namkna-blogspot-com.png) no-repeat  left}
.top2 {background: url(https://lh4.googleusercontent.com/-EQdFbgW3wXI/T5WLQJxeuhI/AAAAAAAABQ8/3HlG3j9dols/h120/2-popular-namkna-blogspot-com.png) no-repeat  left}
.top3 {background: url(https://lh5.googleusercontent.com/-OYE0ZRqtlF8/T5WLRSDSmmI/AAAAAAAABRA/1FNAuRIJm6c/h120/3-popular-namkna-blogspot-com.png) no-repeat  left}
.top4 {background: url(https://lh6.googleusercontent.com/-_UKjMoChCa4/T5WLSRfz0sI/AAAAAAAABRM/ntYZtZtYvb4/h120/4-popular-namkna-blogspot-com.png) no-repeat  left}
.top5 {background: url(https://lh6.googleusercontent.com/-1cXmP5ZLyeM/T5WLUGYk5sI/AAAAAAAABRQ/ljURM_yvJ64/h120/5-popular-namkna-blogspot-com.png) no-repeat  left}
.top6 {background: url(https://lh4.googleusercontent.com/-46Y7mZS50Io/T5WLUzWzcHI/AAAAAAAABRY/XZk5p8Auu80/h120/6-popular-namkna-blogspot-com.png) no-repeat  left}
.top7 {background: url(https://lh5.googleusercontent.com/-Xu42Dh6wL6c/T5WLVuVB6fI/AAAAAAAABRk/_YnNqMfXAK4/h120/7-popular-namkna-blogspot-com.png) no-repeat  left}
.top8 {background: url(https://lh6.googleusercontent.com/-QS5RczNg-xI/T5WLWw_VL9I/AAAAAAAABRo/kY3FFv4Syb0/h120/8-popular-namkna-blogspot-com.png) no-repeat  left}
.top9 {background: url(https://lh3.googleusercontent.com/-9e-9oZjc09U/T5WLYB_tFMI/AAAAAAAABRw/_Cjhqjpl2Qs/h120/9-popular-namkna-blogspot-com.png) no-repeat  left}
.top10 {background: url(https://lh3.googleusercontent.com/-DYNKfhtG1lw/T5WLPQpw24I/AAAAAAAABQw/s5Don-mWjhE/h120/10-popular-namkna-blogspot-com.png) no-repeat  left}
.widget-item-control {display:none}
.popular-posts ol{list-style-type:none;}
.popular-posts ol li a, .randoms ul li a {color:#333333}
.PopularPosts img { border: 1px solid #CCCCCC; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); height: 65px;
margin-left: 27px; padding: 2px; z-index: -1;width: 90px;z-index:10}
   2.5- Thêm đoạn code sau vào trước thẻ </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script>
 $(document).ready(function () {
  $(".popular-posts ol>li:eq(0)").addClass("top1");
  $(".popular-posts ol>li:eq(1)").addClass("top2");
  $(".popular-posts ol>li:eq(2)").addClass("top3");
  $(".popular-posts ol>li:eq(3)").addClass("top4");
  $(".popular-posts ol>li:eq(4)").addClass("top5");
  $(".popular-posts ol>li:eq(5)").addClass("top6");
  $(".popular-posts ol>li:eq(6)").addClass("top7");
  $(".popular-posts ol>li:eq(7)").addClass("top8");
  $(".popular-posts ol>li:eq(8)").addClass("top9");
  $(".popular-posts ol>li:eq(9)").addClass("top10");
 });
</script>
Lưu ý: Nếu blog của bạn đã có file Jquery rồi thì hãy xóa đoạncode màu vàng đi.
   2.6- Tiếp tục tìm đoạn code của tiện ích popular post như bên dưới:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
Trong đó: PopularPosts1 là Id của tiện ích PopularPosts, tùy vào tiện ích bạn muốn áp dụng khác nhau thì có Id khác nhau như PopularPosts1, PopularPosts2, PopularPosts3,....

- Thay thành đoạn code sau:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ol>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (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 == "false"'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <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:else/>
               <div class='item-thumbnail'>
                 <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png'/></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'>
                 <div class='item-title'>
                     <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:else/>
                        <div class='item-thumbnail'>
                           <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png'/></a>
                        </div>
                     </b:if>
                        <a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a>
                 </div>
             </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ol>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
- Nếu Id ở bước 2.6 khác thì hãy thay PopularPosts1 màu xanh ở trên thành id đó nha.
  7- Bấm Lưu Mẫu (save template) lại.

Cập nhật!

- Để dùng lâu dài bạn hãy tải 10 file ảnh về và Upload trực tiếp lên blog rồi thay vào code của thủ thuật để dùng lâu dài nha.
- Tiện ích lấy ảnh thumbnail từ album picasa, do vậy hãy tải ảnh trực tiếp lên blog hoặc album picasa.
- Nếu gặp bất kỳ vướng mắc nào trong quá trình áp dụng hãy comment ở dưới bài đăng này namkna sẽ trợ giúp.
Chúc thành công!

18 nhận xét:

  1. NHỜ ADMIN XEM GIÙM MÌNH TẠI SAO BỐ CỤC Popular pots CỦA MÌNH LẠI BỊ ẢNH CÁCH 1 KHOẢNG RỒI MỚI ĐẾN TEXT VÀ ẢNH LẠI THU NHỎ VẬY. NẾU ADMIN BIẾT CÓ THỂ CHỈ MÌNH CÁCH CĂN CHỈNH LẠI BỐ CỤC PHẦN ĐÓ KHÔNG. LINK TRANG WEB MÌNH http://toisvutehy.blogspot.com/. THANK BẠN!

    Trả lờiXóa
  2. ảnh hiện thị không float sang bên trái anh ơi

    Trả lờiXóa
  3. có thể show luôn cả tên nhãn dưới tiêu đề bài đăng của tiện ích này không anh

    Trả lờiXóa
    Trả lời
    1. Có chứ em. nhưng em kéo thêm cái đó làm gì cho rối mắt/

      Xóa
    2. Anh hướng dẫn cách hiện thị tên nhãn dưới tiêu đề luôn đi. Em cần cái này lắm :(

      Xóa
  4. nhờ bạn hướng dẫn mình cách khi chỉ chuột vào nhãn thì tất cả các bài biết trong nhãn hiện ra dùm nhé.
    Cảm ơn bạn,
    Chúc bạn khỏe

    Trả lờiXóa
    Trả lời
    1. Bình thường khi bấm chuột vào nhãn thì các bài viết đó sẽ hiện ra mà em./

      Xóa
  5. Anh namka cho e hỏi là, nếu e có 1 đoạn code show/hide nội dung, em muốn chèn nó vào blogger để khi viết bài chỉ cần ghõ câu lệnh thì nó sẽ tự động load code đó vào bài viết không ại:

    Code show/hide: http://pastebin.com/8gcJRxEP

    Khi đã add vào blogger: [spoiler]NỘI DUNG[/spoiler]

    Trả lờiXóa
  6. ANH NAMKNA CHO EM HỎI LÀ, CÓ CÁCH NÀO NHÚNG CÁC EMBED VIDEO VÀO THÀNH 1 PLAYLIST VIDEO KO A

    Trả lờiXóa
  7. sao của mình nó ko load ảnh nhỉ

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

      .PopularPosts img { border: 1px solid #CCCCCC; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); height: 65px;
      margin-left: 27px; padding: 2px; z-index: -1;width: 90px;z-index:10}

      Thành:

      .PopularPosts img { border: 1px solid #CCCCCC; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); height: 65px;margin-left: 27px; padding: 2px; width: 90px;z-index:9999}

      Xóa
  8. Bạn ơi Cho mình hỏi cách tạo "Popular Posts" chỉ riêng một nhãn thôi có được không?

    Trả lờiXóa
    Trả lời
    1. Hiện tại ta không thể làm thủ thuật pupularpost cho một nhãn riên biệt bạn ak. Vì tiện ích này nó load bài trên toàn feed nên không thể làm như bạn nói.

      tuy nhiên bạn có thể tạo tiện ích bài đăng mới cho từng nhãn như một số hướng dẫn tại đây" XEM NGAY

      Xóa
  9. mình làm mãi không đc, ko biết nó lỗi gì? http://visatovn.blogspot.com/
    bạn giúp mình chút. thanks

    Trả lờiXóa
  10. Sao mình làm giống bạn nhưng cái title lại chèn lên ảnh luôn vậy?
    newbiesshare,blogspot.com

    Trả lờiXóa