• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tùy biến tiện ích Bài xem nhiều nhất

10
13/01/2011

Gần đây Blogger đã tích hợp tiện ích Bài đăng phổ biến (Popular Posts) tuy nhiên có một số điểm mà nó vẫn chưa được ưa thích và sử dụng rộng rãi. Một nguyên do có thể thấy rõ là người dùng chưa biết cách điều chỉnh thuộc tính CSS định dạng cho tiện ích trở nên đẹp hơn, lấy ví dụ ở phần tóm tắt bài viết, đoạn text không thể căn đều hai bên mặc dù chúng ta dùng thuộc tính text-align:justify cho phần sidebar là nơi thường bố trí tiện ích này. :21)

Mình đã nghĩ đến việc tạo CSS cho tiện ích này và đã áp dụng thành công và làm cho tiện ích này trở nên đẹp hơn.

Bạn có thể xem Demo ở bên phần sidebar của trang này.

Để làm được như vậy bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Page Elements >> Add a Gadget (trên sidebar) >> Chọn Popular Posts >> Điều chỉnh Title thành Bài xem nhiều nhất, tick chọn image thumbnail và snippet. Sau đó nhấn SAVE để lưu tiện ích.



Bước 2. Vào Edit HTML, chọn Expand Widget Templates. Tìm từ khóa PopularPosts1 hoặc Bài xem nhiều nhất rồi tìm toàn bộ đoạn code tương tự đoạn code bên dưới

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

Rồi thay nó bằng đoạn code bên dưới.

<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></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></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<div class='item-thumbnail'>
<b:if cond='data:post.thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img class='item-thumb' alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
<b:else/>
<img class='item-nothumb' src='http://bit.ly/hGWr7r'/>
</b:if>
</div>
<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>
</div>
</b:includable>

Những phần được đánh dấu màu đỏ là phần được thêm vào. Ở đoạn code trên, tôi đã viết thêm code để cho bài viết không có ảnh vẫn hiển thị ảnh đại diện mặc định là ảnh nothumbnail (tiện ích Popular Posts của Blogger không có chức năng này, chỉ hiển thị phần tóm tắt đối với bài viết không có ảnh).

Bước 4. Đặt đoạn code sau đây vào sau dòng ]]></b:skin>.

<!-- Popular Posts Widget Styled by Huynh Nhat Ha -->
<style type="text/css">
.popular-posts ul {border-bottom: 1px dotted #555; list-style-type: none; margin: 0; padding: 0; }
.popular-posts ul li {background-color: transparent; border-top: 1px dotted #555; clear: both; list-style: none; }
.popular-posts ul li:hover {background-color: #123; }
.popular-posts .item-content { padding: 5px; }
.popular-posts .item-title {height: 50px; }
.popular-posts .item-title a {color: #5CB3FF; font-family: Arial; font-size: 12px; font-weight: bold; }
.popular-posts .item-title a:hover {color: #CDE; text-decoration: none;}
.popular-posts .item-thumbnail { float: left; margin: 0 5px 0 0;}
.popular-posts img {height: 50px; width: 50px;} // Điều chỉnh số chỉ chiều rộng và chiều cao ảnh đại diện
.popular-posts .item-snippet {clear: both; color: #999; font-family: Arial; font-size: 12px;text-align:justify}
</style>

Lưu Template là thành công.

{10 bình luậnAdd yours ?}

13:14:00, 16 thg 1, 2011

nếu muốn nó ko hiển thị ảnh và đoạn văn chỉ hiển thị tiêu đề thì làm thế nào bạn

Reply
13:42:00, 16 thg 1, 2011

@phuocnam246 Điều đó thì quá đơn giản. :4) Nếu chỉ muốn hiển thị tiêu đề bài viết không thôi thì ở Bước 1, bạn đừng có tick chọn image thumbnail và snippet.

Reply
21:43:00, 30 thg 1, 2011

sao cái tiện ích của mình có bài thì có ảnh có bài thì không có là sao ấy ???

Reply
18:06:00, 20 thg 2, 2011

có thể chỉnh cách hiển thị giống với tiện ích bài viết mới nhất có ảnh đại diện được không?
http://huynh-nhat-ha.blogspot.com/2011/01/recent-posts-with-thumbnails-full.html
Cảm ơn!

Reply
13:02:00, 22 thg 2, 2011

sao rồi,cậu có thể giúp mình không vậy,mình nghĩ việc này không khó đối với cậu đúng không?Trả lời mình nhanh nha.Cảm ơn!

Reply
13:12:00, 22 thg 2, 2011

@XDN Thì nó vốn dĩ giống tiện ích Bài viết mới nhất có ảnh đại diện rồi mà. Bạn còn muốn giống cái nào nữa, thì nói rõ hơn nhé

Reply
19:14:00, 23 thg 2, 2011

à,phần tóm tắt nằm ngay dưới tiêu đề chứ không nằm dưới ảnh hiển thị.

Reply
17:46:00, 15 thg 11, 2011

A Ơi sao không hiện ảnh vậy! http://wusongpro.blogspot.com/

Reply
21:39:00, 23 thg 5, 2012

hình không hiện bạn à,

Reply
12:57:00, 25 thg 5, 2012

Vẫn hiện mà bạn ơi :1)

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn