Share : Đăng nhập Đăng ký
Close

Vui lòng khai báo chính xác tên truy cập và mật khẩu!

Close

Bạn phải điền đầy đủ thông tin đăng ký!






hit counter script



Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down

avatar
Admin
Administrator
Administrator
Tổng số bài gửi :
162

Danh vọng :
429

Cảm ơn :
0

Join date :
09/03/2015

Age :
22

Đến từ :
HCM City

Xem lý lịch thành viên http://www.4rgameprivate.com

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 và 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ó 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.
[You must be registered and logged in to see this image.]

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:
[You must be registered and logged in to see this image.]

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.
[You must be registered and logged in to see this image.]

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

Code:
/*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> :
Code:
<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ạn code đi.

2.6- Tiếp tục tìm đoạn code của tiện ích popular post như bên dưới:
Code:
<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:
Code:
<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.

Về Đầu Trang Go down

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang


Permissions in this forum:
Bạn không có quyền trả lời bài viết