Car Reviews

Auto Show

Sự kiệnThông tinChi tiết
Vietnam Motor Show 20165/10 đến 9/10 tại I.C.E, 91 Trần Hưng Đạo, Hà Nội Tham gia
Vietnam International Motor Show 201626/10 đến 30/10 tại SECC, 799 Nguyễn Văn Linh, Sài Gòn Tham gia

Saturday, March 10, 2012

Cool Popular Posts style đẹp cho bài đăng phổ biến

Bài viết hướng dẫn bạn tạo Popular Posts có giao diện như hình dưới. Ban đầu mình định sử dụng CSS 3 tuy nhiên vì muốn hiển thị cả trên IE7 nên lại chuyển về CSS 2, trong đó thì việc đánh số là CSS 2.1 nên trên IE7 không có đánh số thứ tự

Chia sẻ:
Tiện ích Popular posts là 1 tiện ích được cung cấp bởi Blogger, nó 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).
Lâu rồi mới lại qu nhà Duyphan chơi , nên bữa nay rảnh ngồi online bên đó coi có gì mới không, tình cờ mình thấy tiện ích Cool Popular Postskhá đẹp mới ra lò không lâu, nên xin phép bác Duypham giới thiệu lại cho mọi người cùng coi.

Bài viết hướng dẫn bạn tạo Popular Posts có giao diện như hình dưới. Ban đầu mình định sử dụng CSS 3 tuy nhiên vì muốn hiển thị cả trên IE7 nên lại chuyển về CSS 2, trong đó thì việc đánh số là CSS 2.1 nên trên IE7 không có đánh số thứ tự


Cool Popular Posts style đẹp cho bài đăng phổ biến
- Đầu tiên các bạn phải xác định ID của Widget Popular Posts muốn chỉnh sửa bằng các vào. Thiết Kế => Phần Tử trang => Tìm đến Widget Popular Posts và ấn vào nút Chỉnh sửa (Edit) Sau đó bạn xem Id của Widget tại thanh địa chỉ.
Xác định Id để tiến hành thủ thuật Cool Popular Posts style đẹp cho bài đăng phổ biến
(Trong ví dụ bài này Id PopularPosts1)

☼ Cách tiến hành:
1- Đăng nhập (login) vào Blog
2- Vào Mẫu (template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Continue) => Xem video
4- Dán đoạn code bên dưới trước thẻ: ]]></b:skin>
/*
<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#fa4242"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ee6107"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#f0f"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#ff0"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#0ff"/>
</Group>
*/
#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:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#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{position:absolute;top:20px;right:-15px;border-radius:50%;background:#0a960a;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:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
5- Vào Chỉnh sửa HTML (không chọn Mở rộng Mẫu Tiện ích) và tìm trong template từ khóa
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
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.
6- Quay trở lại Bố cục và chọn Chỉnh sửa widget Popular Posts. Chọn Hiển thị tối đa 5 bài đăng, các thông số còn lại lựa chọn theo ý bạn.
Cool Popular Posts style đẹp cho bài đăng phổ biến
- Để dễ dàng cho mọi người thay đổi màu nền mình đã sử dụng Trình thiết kế Mẫu của Blogger. Bạn vào Thiết kế → Trình thiết kế Mẫu → Nâng cao → PopularPosts Backgrounds và thay đổi lần lượt background color1, background color2, background color3, background color4, background color5 theo ý muốn.
Cool Popular Posts style đẹp cho bài đăng phổ biến
Chúc thành công!
Theo: Duyphan

14 nhận xét:

  1. @maploiron Uk công nhận Bác duy phạm ra nhiều bài chất lượng thật :3) :3) :3)

    ReplyDelete
  2. đẹp...
    nhưng ko thể thay background tự do đc à? như chèn link hình chẳng hạn ^^!

    ReplyDelete
  3. @Pu 3k* bạn có thể chỉnh màu trong trình thiết kế mẫu đó. Ta dùng lệnh CSS để hoặt động như thế không ảnh hưởng tới tốc độ.
    - Nếu bạn thích cho thêm ảnh nền vẫn được bạn chỉ cần thêm thẻ Id và thêm thuộc tính background URL là Ok. Nếu bạn dùng ảnh nền như thế sẽ khiến blog bạn phải gửi phản hồi tới Sever 5 lần như thế sẽ ảnh hưởng tới tốc độ load của blog của bạn.:3) :3) :3) :3)

    ReplyDelete
  4. @Nông Lâm Vô Đối Uk duy phạm viết rất nhiều thủ thuật hay đó. Mình share lại cho tât cả mọi người cùng coi. :3) :3) :3)

    ReplyDelete
  5. @Fairstar Cái này mình kết mỗi phần điều chỉnh màu trong Trình thiết kế mẫu. Vì mình dốt trong cái phần chỉnh thủ công trong Template lắm :1) :1) :1) :1)

    ReplyDelete
  6. @Nông Lâm Vô Đối Tùy từng người thôi nhiều người thích rự chỉnh sửa thủ công để nâng cao tay nghề mà :3) :3) :3)

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. Cái đoạn "xem ID của Widget đó để làm gì vậy bạn, mình không nghe nhắc đến trong bài.

    ReplyDelete
  9. @hanh nguyen Đề nghị không Spam mình sẽ xóa link của bạn.

    ReplyDelete
  10. @pvmhienThông thường các blog có ID là PopularPosts1
    Tuy nhiên có blog lai co ID là PopularPosts2 hoặc PopularPosts3. Với những blog này thì bạn phải sửa toàn bộ ID là PopularPosts1 lại thành PopularPosts2 hoặc PopularPosts3

    ReplyDelete
  11. @Fairstar Mình đã cập nhật chi tiết hơn rùi đó bạn có thể theo dõi lại nha.

    ReplyDelete