Thư viện

Trải nghiệm

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

Rainbow PopularPosts với thumbnail và số cho blogger(V4)

Popular posts là 1 tiện ích được cung cấp bởi Blogger, Tiện ích này hiển thị các bài viết được xem nhiều nhất trong blog với các khoảng thời gian như : 1 tuần, 1 tháng, hay mọi lúc. Và nó cũng có 3 chế độ hiển thị: chỉ hiển thị tiêu đề, hiện thị tiêu đề và ảnh thumbnail, và thứ 3 là kiểu hiện thị đầy đủ (gồm : tiêu đề, ảnh thumbnail và trích dẫn).

Chia sẻ:
Rainbow PopularPosts multiple lever (V4)
Popular posts là 1 tiện ích được cung cấp bởi Blogger, Tiện ích này hiển thị các bài viết được xem nhiều nhất trong blog với các khoảng thời gian như : 1 tuần, 1 tháng, hay mọi lúc. Và nó cũng có 3 chế độ hiển thị: chỉ hiển thị tiêu đề, hiện thị tiêu đề và ảnh thumbnail, và thứ 3 là kiểu hiện thị đầy đủ (gồm : tiêu đề, ảnh thumbnail và trích dẫn).

¤ Bài viết này mình sẽ hướng dẫn các bạn cách tạo tiện ích Rainbow popularpost với một số đặc điểm.

» Chỉ dùng CSS (giống dạng 1 của duypham)
» Hiệu ứng xoay ảnh thumbnail bằng mã CSS.
» CÓ dố đếm tối đa 9 bài nhiều hơn so với mẫu cũ chỉ có 5 bài.
» Bài viết hiển thị dạng phân cấp thụt vào (tối đa 9 cấp)

¤ Bước 1 » Thêm Rainbow PopularPosts multiple lever and count cho blogger!

Lưu ý: - Nếu blog bạn đã có tiện ích Popular Posts rồi thì bắt đầu thực hiện từ 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):
Id Popular posts - Rainbow PopularPosts multiple lever blogspot
1.5- Bấm chỉnh sửa tiện ích Popularposts để xác định Id và cài đặt như bên dưới:
Id Popular posts - Rainbow PopularPosts multiple lever blogspot
(Trong ví dụ bài này Id là PopularPosts1)
  • Chọn "hiển thị tối đa" 9 bài viết.
  • Chọn hình ảnh thu nhỏ và bỏ chọn mục đoạn trích.
Rainbow PopularPosts với thumbnail và số cho blogger(V4)
1.6- Lưu tiện ích lại.

¤ Bước 2 » Tùy biến widget Popular Posts của bạn!

2.1- Đăng nhập vào blog
2.2- Chọn Mẫu (Template)
2.3- Chọn Chỉnh sử HTML (Edit HTML)
2.4- Tìm 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.). Và dán code bên dưới vào trước nó:
/* Rainbow Popular repost by http://jomkenalislam.my*/
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
    -moz-border-radius: 130px;
    -webkit-border-radius: 130px;
    border-radius: 130px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
padding:4px;
    border:1px solid #fff !important;
    background: #F2F2F2;}
#PopularPosts1 img:hover {
    -moz-transform: scale(1.2) rotate(-560deg) ;
    -webkit-transform: scale(1.2) rotate(-560deg) ;
    -o-transform: sbale(1.2) rotate(-560deg) ;
    -ms-transform: scale(1.2) rotatd(-560deg) ;
    transform: scale(1.2) rotate(-560deg) ;
}
2.5- Tìm trong template đoạn code như bên dưới:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>...</b:widget>  
- Thay thế nó bằng đoạn mã dưới đây.
<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'>
    <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;'>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.snippet'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'/>
         </b:if>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'/>
         </b:if>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.snippet'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>
 </b:widget>
Lưu ý: VỚi những Blog có Id là PopularPosts2 (hoặc PopularPosts3) thì các bạn đổi toàn bộ phần PopularPosts1 (màu xanh) thành PopularPosts2 (hoặc PopularPosts3) nha.

17 nhận xét:

  1. Blog của bạn phong phú thật! Rất vui được kết thân và học hỏi cùng bạn! Chúc bạn luôn vui!
    Thân ái!
    Caocongkien

    Trả lờiXóa
    Trả lời
    1. Cảm ơn bạn đã ghé thăm và ủng hộ blog mình :))

      Xóa
  2. blog của bác load nhanh thật đấy bái phục
    sharevnblog.blogspot.com

    Trả lờiXóa
    Trả lời
    1. Cảm ơn bạn. Blog bạn giao diện rất đẹp :)

      Xóa
  3. cái chức năng xoay này hay quá . hôm trước thấy bên blog nguyenhai có mà ko biết làm.

    Anh Nam ơi hôm nào anh tạo một bài hướng dẫn tạo autoblog cho blogspot đi mấy trang khác có viết mà sử dụng pipes.yahoo.com em áp dụng thử mà hình như bài đó cũ rồi ko áp dụng dc , thank bác trước nhé

    Trả lờiXóa
  4. mình đã test nhưng check vào hiện thị ảnh thu nhỏ nó mới hiện ảnh
    còn ko check thì ko hiện

    Trả lờiXóa
    Trả lời
    1. Đúng rồi phải bấm chọn vào đó nha bạn. tyaij mình dùng hình ảnh trong style 1 nên quyên không sửa cho các bạn. :))

      Xóa
  5. kiểu này hay đó, bữa nào sẽ áp dụng ảnh bìa facebook

    Trả lờiXóa
    Trả lời
    1. Oke hãy áp dụng và cho mình biết kết quả nha :))

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

    Trả lờiXóa
  7. anh ơi làm sao để resize ảnh thumbnail to hơn mà ko làm giảm chất lượng ảnh ko anh. Em cho to lên thì nó mờ đi nhìn xấu quá

    Trả lờiXóa
    Trả lời
    1. Ảnh mục này là s72 khá to rồi mà em. Nếu cho lên S1200 sẽ làm chậm tố độ load đó.

      Xóa
  8. anh Nam ơi, chỉ em cách chèn ảnh no-thumbnail khi bài viết không có ảnh ở trong widget bài viết phổ biến với anh, em chèn thử như trên mà không được

    Trả lờiXóa
    Trả lời
    1. Em tìm 2 đoạn có dạng như bên dưới:

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

      và chỉnh nó thành:

      <b:if cond='data:post.thumbnail'>
      <div class='item-thumbnail'>
      <img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
      <b:else/>
      <img alt='no image' class='item-thumbnail' src='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'/>
      </div>
      </b:if>


      Lưu lại là oke.

      Ngoài ra em có thể xem bài viết này: Hiển thị đoạn trích dẫn dạng title cho bài đăng phổ biến

      Xóa
  9. Chào bạn!Mình mới tìm hiểu về web mới đây thôi.Mình rất đam mê nó.Trang web của bạn thật phong phú và đa dạng lắm.Chúc blog của bạn ngày càng phát triển nhiều hơn nữa

    Trả lờiXóa
  10. Chào bạn!Mình mới tìm hiểu về web mới đây thôi.Mình rất đam mê nó.Trang web của bạn thật phong phú và đa dạng lắm.Chúc blog của bạn ngày càng phát triển nhiều hơn nữa

    Trả lờiXóa