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 == "false"'>
<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href'>
<data:post.title/>
</a>
<b:else/>

<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 == "false"'>

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

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

Nguồn : chúng tôi sưu tầm từ nhiều nguồn

Thiết kế web chuyên nghiệp giá rẻ

Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn