Tùy biến PopularPost Blogger

PopularPost là một thành phần quan trọng trong một web blog. Giúp thống kê các bài viết xem nhiều nhất trong một tháng hoặc một tuần. Cũng có thể hiển thị dạng thumbnail...

Bài viết trước mình hướng dẫn mọi người cách đánh số thứ tự 1..10 cho bài viết xem nhiều nhất.

Trong bài viết này hướng dẫn cách thêm các nút social(như like, +1, tweet...) vào bài xem nhiều nhất.

Thêm nút like trên PopularPost cho blogger 

View Demo

Nếu bạn đã có bài viết xem nhiều nhất trên trang rồi. Thì làm theo các bước sau :

Bắt đầu từ: 

 <b:section id='section' type='section'><b:widget id='PopularPosts1' locked='false' title='Bài xem nhiều nhất' type='PopularPosts'>....</b:section>

Thay toàn bộ bằng code sau (Đoạn màu đỏ chính là button like. Bạn có thể thay button like bằng nút share...)

<b:section id='section19' type='section'>
<b:widget id='PopularPosts1' locked='false' title='Bài xem nhiều nhất' 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;'>
                                      <!-- (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>
                                        12
                                      </div>
                                      <div class='item-snippet'>
                                        <data:post.snippet/>
                                      </div>
                                    </b:if>
                                    <b:else/>
                                    <b:if cond='data:showSnippets == &quot;false&quot;'>
                                      <!-- (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:if>
                                        <div class='item-title'>
                                          <a expr:href='data:post.href'>
                                            <data:post.title/>
                                          </a>
                                          <br/>
                                          <div style='margin-top:15px'>                                          <fb:like expr:href='data:post.href' layout='button_count'/>                                          </div>                                        </div>
                                      </div>
                                      <div style='clear: both;'/>
                                      <b:else/>
                                      <!-- (4) Show snippets and thumbnails -->
                                      <div class='item-content'>
                                        <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>
                                        <div class='item-title'>
                                          <a expr:href='data:post.href'>
                                            <data:post.title/>
                                          </a>
                                       
                                        </div>
                                        <div class='item-snippet'>
                                          <data:post.snippet/>
                                        </div>
                                      </div>
                                      <div style='clear: both;'/>
                                    </b:if>
                                  </b:if>
                                </li>
                              </b:loop>
                            </ul>
                            <b:include name='quickedit'/>
                          </div>
                        </b:includable>
                      </b:widget>
</b:section>

Tùy chỉnh CSS cho PopularPost :

.PopularPosts img {} :Chỉnh kích thước ảnh
.PopularPosts .item-thumbnail {} : Chỉnh toàn bộ thumbnail ảnh
.PopularPosts .item-title {} : Chỉnh tiêu đề bài viết
.PopularPosts .item-title a {} : Chỉnh style chữ tiêu đề...
.widget .popular-posts ul {} : Chỉnh style ul (list bài viết)