Breaking News
Loading...
» »Unlabelled » Popular Posts - Bài viết phổ biến cho Blogger - Version 1
Thứ Ba, 10 tháng 6, 2014

Info Post
Popular Posts - Bài viết phổ biến cho Blogger - Version 1

Popular Posts 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. Việt sử dụng thủ thuật blogger để thiết kế website sẽ giúp website của bạn chuyên nghiệp hơ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. Và nó sẽ giúp bạn SEO tốt hơn là sử dụng các dịch vụ SEO với kiến thức SEO và thủ thuật SEO chuyên nghiệp. Ngoài ra bạn có thể vào các diễn đàn SEO, forum SEO để tìm hiểu.
Popular Posts - Bài viết phổ biến cho Blogger - Version 1
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.
Để 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 Posts - Bài viết phổ biến cho Blogger - Version 1
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: 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 Posts - Bài viết phổ biến cho Blogger - Version 1

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.
Cuối cùng: Bấm Lưu Mẫu (save template) lại. 
Người đăng: vào lúc 22:29
Share:

0 nhận xét:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)