Tiện ích Popular Posts với CSS3

/
Thêm 1 style mới cho tiện ích bài đăng phổ biến, ưu điểm của style này là giúp tiết kiệm không gian, và không sử dụng javascript mà dùng các lệnh CSS3 để làm đẹp nên rất nhẹ.





Đầu tiên bạn chèn đoạn CSS sau phía trên ]]></b:skin> trong template:
#PopularPosts1{max-width:300px}
#PopularPosts1 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0}
#PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

Tiếp theo, bạn tạo một tiện ích bài đăng phổ biến (nếu trong blog đã có tiện ích Popular Posts thì bỏ qua bước này), rồi chỉnh như sau:


Cuối cùng, bạn vào phần chỉnh sửa HTML, không click mở rộng tiện ích, tìm đoạn sau:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
Thay thế nó bằng đoạn 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'>
<ul>
<b:loop values='data:posts' var='post'>
<dd>
<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 -->
<b:if cond='data:post.thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='60px' width='60px'/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' height='60px' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' width='60px'/></a>
</b:if>
</b:if>
</b:if>
</dd>
</b:loop>
</ul>
<div class='clear'/>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Lưu lại mẫu và kiểm tra kết quả.
Add a Comment

85 comments

Em đang tìm cái tiện ích popular đẹp chút cho cái banggiahosting.com. Vừa nhận mail là vào xem ngay bài của anh Noct. Thanks anh nhé!

10/17/2011 comment-delete

@Võ Thanh Duy

Anh noct ơi sao để popular post 9 bài đăng mà nó chỉ tối đa 5 bài ngoài trang chủ vậy?

10/17/2011 comment-delete

Anh chơi thêm cái tooltip cho nó nữa thì quá tuyệt!

10/17/2011 comment-delete

Quá tuyệt vời! Blogger ngày càng đỉnh nhỉ?

10/18/2011 comment-delete

Cái này mượt phết
Tuyệt lắm bác ah

10/18/2011 comment-delete

@Mít Tơ Ngố
Nhưng khi em thay

thành đoạn HTML phía dưới rồi save lại thì nó vẫn ra

:(( Giúp em với bác

10/18/2011 comment-delete

@Võ Thanh Duy Tại vì site của em mới chỉ có 5 bài đó là hot :D

10/18/2011 comment-delete

@Mít Tơ Ngố không hoạt động với ảnh copy từ nơi khác nhé

10/18/2011 comment-delete

Sao tôi làm y như các bước, nhưng các ảnh lại không nằm cùng dãy mà lại xuống hàng . Nhờ anh xem hộ tôi lỗi ở đâu nhé .
http://giangquynhgtvt.blogspot.com. Cảm ơn anh

10/18/2011 comment-delete

làm thử và đã thành công http://www.namlang.info/ nhưng có thể căn chỉnh cho nó cân đều ở giữa được ko Noct?

10/18/2011 comment-delete

ô! tự làm được rồi!.... tăng kích thước thumbnails là được

10/18/2011 comment-delete

thủ thuật hay mà trông bắt mắt phết, thật tiện dụng với css3.

10/18/2011 comment-delete

Hiệu ứng vào tay bác cứ gọi là mượt :* Trông vui mắt nhỉ, move nhiều hoa hết cả mắt :D

10/18/2011 comment-delete

Mấy bác bóc tem nhanh thiệt, cái hiệu ứng xoay đến hoa cả mắt:D

10/18/2011 comment-delete

@giangquynhgtvt
Em cũng bị y như bác này. Anh noct vào xem giùm:D

10/18/2011 comment-delete

đã test rất bổ ích thank

10/18/2011 comment-delete

@Quang do cái temp của em nhiều thẻ style quá, nếu em dùng trên template khác thì sẽ thấy không có vấn đề gì.

10/18/2011 comment-delete

@Noct
Vậy bác co cách nào khắc phục ko? Em giờ mà đổi lại tem là em nản lun:((

10/18/2011 comment-delete

@Quang vào phần liên hệ rồi send link tải template của em để anh sửa.

10/18/2011 comment-delete

@Noct
Cảm ơn bác nhiều:D

10/18/2011 comment-delete

@Duy Pham ở đâu cấm hun hít nhé bác b-( :D

10/18/2011 comment-delete

Noct làm cái tuts về CHUYỂN ĐỔI màu cho blog đi, mình laoy hoay hý hoáy tọc mạch mà chẳng được, chắc do ngu quá hoặc do khó quá cũng thế, nên ko làm được.

10/18/2011 comment-delete

Hay, +1

NAD
10/18/2011 comment-delete

Tiện ích rất hay, nhưng gặp những trình duyệt cũ lại không hiểu CSS3 mới buồn chứ :(

10/19/2011 comment-delete

Anh em hộ em, em làm đúng hướng dẫn rồi mà không được, nó không hiện thị ảnh thu nhỏ http://blogvtvnews.blogspot.com/

10/20/2011 comment-delete

@Hoàng Văn Hợp ảnh copy thì không hiển thị, ảnh phải tự đăng.

10/20/2011 comment-delete

@Noct

đăng từ url có được không ah

10/20/2011 comment-delete
10/20/2011 comment-delete

@Noct

em tải ảnh từ máy lên cũng không được anh ơi

10/20/2011 comment-delete

Anh có thể hướng dẫn cho em làm : Popular Posts, Recent Posts, Comments . giống của anh được không, em làm mà không được

10/20/2011 comment-delete

CSS 3 quả thật là rất hay, sau mày chắc có thể sử dụng CSS mà thiết kế không cần xài đồ họa nửa.

10/20/2011 comment-delete

Thanks! Mình đã áp dụng thành công.

10/20/2011 comment-delete

Thủ thuật này hay lắm, cảm ơn bạn đã chia sẻ, mình làm được rồi (^_^)!

10/21/2011 comment-delete

@Phạm Minh Tâm giá lúc nào bạn cũng góp ý vài câu lọt tai thế này thay vì đi spam nhảm.

10/21/2011 comment-delete

Hihi... Mình thay đổi rồi, từ nay không thế nữa, khi nào rảnh qua nhà mình còm chơi nhé. Thanks!^^

10/21/2011 comment-delete

Cảm ơn Noct nhiều nhé, tiện ích này rấ hay. Mong bạn sẽ có nhiều thủ thuật hay hơn nữa :))

10/22/2011 comment-delete

mình vừa áp dụng Popular post cho blog của mình, mà sao hok hiện lên dc image thumbails nhỉ, Noct có thể xem qua và hướng dẫn cho mình cách fix dc hok.
P/s: Cám ơn vì những thủ thuật của Noct, rất hay và đẹp mắt

10/22/2011 comment-delete

@TheVirus bạn đọc kĩ các comment ở trên nhé.

10/22/2011 comment-delete

@Noct

ồh...mình thấy gòi ...thanks

10/22/2011 comment-delete

Mấy tấm hình khi đặt chuột vào cứ xoay xoay, hay quá. Cám ơn anh Noct

10/23/2011 comment-delete

hiệu ứng chuyển động thật tuyệt vời, cảm ơn noct rất nhiều

10/23/2011 comment-delete

lấy ảnh thumbnail chất lượng tốt hơn được không noct, chứ bên mình blogktv.net để thumbnail to thì hơi mờ

10/24/2011 comment-delete

@Việt Nam max là 72x72 thôi bạn à

10/24/2011 comment-delete

Noct ơi, cho mình hỏi tẹo nhé...
Chả là blog của mình cứ mỗi khi thêm một tiện ích nào đó, thì lại xuất hiện một dòng gạch ngang phía dưới, mình muốn xóa nó đi thì phải làm thế nào hả bạn, chỉ giùm mình với nha (^_^)!

10/25/2011 comment-delete

@Phạm Minh Tâmxóa dòng
.sidebar .widget, .main .widget { border-bottom: 1px dotted #CCCCCC; }

lần sau mấy cái này thì vào mục hỏi đáp nhé.

10/25/2011 comment-delete

Cảm ơn Noct nhiều nhé !
Tại mình thấy ở mục hỏi đáp bạn chưa trả lời nên...

10/25/2011 comment-delete

Thank admin tiện ích thật tuyệt vời

10/26/2011 comment-delete

e chao anh ạ!hiện e đang dùng template của anh.nhưng tại sao khi thay tem thỳ blog e nó không hiện đúng size anh nhỉ. nhưng trong khi đó e dùng tem khác thỳ ok à?a noct giúp e vs nha.thnks!
blog ni ạ:http://tomyquyen.blogspot.com

10/27/2011 comment-delete

Cám ơn anh rất nhiều x'D
em đã làm được rồi x'D
*big hug* x'D :)

10/28/2011 comment-delete

Bài mới đê Noct ơi

NAD
10/29/2011 comment-delete

Thank, cái này hay lắm anh Noct ạ

10/30/2011 comment-delete

Ơ sao PR của Noct chỉ có 2/10 thôi nhỉ b-)

11/11/2011 comment-delete

@Phạm Minh Tâm khiêm tốn thôi bác ạ, cũng có thể vì chưa mua domain riêng.

11/11/2011 comment-delete

Mình trông cũng được đó,nhưng cái của blog duy pham hay hơn,cũng nhẹ hơn 1 chút,cái của bạn mình ko thích cái hiệu ứng xoay xoay,bạn chỉ cần khi ng ta chỉ vào ảnh,nảy ra 1 dùng chú thích là ok,

11/12/2011 comment-delete

Sắp 1 tháng rồi chưa có bài mới đâu nhé bác :(

NAD
11/13/2011 comment-delete

Noct ơi...
Tại sao bên blog của mình một số bài nó không hiện ảnh đại diện ra mà toàn để ảnh mặc định (No Image Yet) vậy?

11/19/2011 comment-delete

a noct có thể giúp e 1 chút ko,blog cua e tạo khoảng hơn 10 ngày,mà bản lưu google nó vẫn ghi là khong có bài đăng nào,bản lưu thỳ chỉ có skin lúc đầu,mặc dù đã spot nhìu bài và đang dùng skin của anh,:(

11/20/2011 comment-delete

@Omegakd Đọc lại các comment ở trên

11/20/2011 comment-delete

@keima mới tạo thì nó thế, chưa được google ưu tiên, có thể submit feed lên google webmastertools để cải thiện.

11/20/2011 comment-delete

mình cần được giúp đỡ !
mình imfort blog ko được. khi nhập blog vào luôn báo lỗi máy chủ. mã lỗi là BX-.... mình tắt tường lửa và dùng trình duyệt khác nhưng vẫn thế. rất mong sư giúp đỡ của các bạn!!

11/23/2011 comment-delete

Cái này hay đấy, cảm ơn bạn, đang cần nghiên cứu cái này

11/24/2011 comment-delete

Mình mới thử thấy hay quá. Cảm ơn vì đã chia sẻ. Sự hiện diện của những blog như bạn thật ý nghĩa cho những người thích blogspot.

11/28/2011 comment-delete

Cám ơn bạn. Mình đã làm nhưng chỉ được 2 cột chứ ko 3 cột mặc dù đã set 9 bài. Do vậy nhìn hơi kéo dài xuống.

D CHO MÌNH HỎI LÀ CÓ CÁCH NÀO TẠO MỤC CÁC BÀI VIẾT TƯƠNG TỰ KHI XEM MỘT "TRANG" KHÔNG( Trang chứ không phải bài viết blog bình thường)
Với lại code các bài viết ngẫu nhiên, mình có thể nào cho các bài viết ngẫu nhiên xuất hiện trên một module nào đó ko ta?
Thanks.
YM: ytuongquang
Email: ytuongquang@gmail.com

Chờ hoài mà không thấy noct share thủ thuật chuyển đổi màu he!

12/17/2011 comment-delete

Anh Noct ơi, anh giúp em với. ANh xem blog bên dưới của em, sao em để số lượng bài đọc nhiều nhất là 10 mà nó vẫn cứ hiện có 8 bài:((
http://snowautumn.blogspot.com/

van
12/19/2011 comment-delete

@van xem bài này nhé : http://noct-land.blogspot.com/2011/05/blogspot-mot-so-van-e-thuong-gap.html

12/20/2011 comment-delete

Thanks Noct very much, great!

12/26/2011 comment-delete

Cái này có thể áp dụng cho Related Post đặt ở dưới mỗi bài viết ko anh? Giốg kiểu của anh í? Anh hướng dẫn em với :-ss

Q.B
12/31/2011 comment-delete

Cho mình hỏi, dùng javaship với ko dùng có gì khác nhau, mình mới tham gia nên hỏi vậy... đừng cười nhá

1/13/2012 comment-delete

@NV.Thắngcái hiệu ứng mà bạn thấy ở trên nếu dùng javascript thì nó sẽ rất dài và chậm (trừ khi dùng jquery), còn dùng CSS thì chỉ đoạn code ngắn như bạn thấy :D

1/14/2012 comment-delete

Thanks Noct, cái này áp dụng vào trông mượt đẹp lắm :) Mà mình thích cái related post của Noct wá, đợi bao giờ Noct share để áp dụng mới được :D

1/24/2012 comment-delete

Khửa khửa,đãlàm cho cái bờ lốc của tớ
Nếu cậu rảnh ,làm ơn chỉ dùm tớ cách làm gọn đoạn CSS phía trên ]]> trong template với nhé,do tớ dùng cùng với 1 thủ thuật khác nên code hơi rối và thừa,mà tớ thì không biết phải bỏ hay rút gọn cái nào :D:D:D:D:D

Có thể làm cái hiệu ứng tấm hình xoay vù vù cho cái Autoreadmore không Noct,nếu được thì chỉ dùm tớ với nhá :D:D:D

Noct ơi, mình muốn đổi màu cam cam khi xoay xong thì đổi ở đâu :(? Xin lỗi nếu câu hỏi của mình hơi ngớ ngẩn !! :"> Hihi

3/17/2012 comment-delete

Noct ơi cho mình hỏi. Sao mình áp dụng mà nó chỉ ra 2 cột trông rất xấu. Mặc dù mình đã chỉnh lại đoạn css : #PopularPosts1{max-width:300px} mãi mà ko lên được 2 cột, 3 dòng

3/23/2012 comment-delete

Giúp mình với Noct! mình muốn hiện 6 bài nhưng không thể được, chỉ hiện 5 bài hà! mặt dù mình viết đủ 6 bài! temp mặc định cũng gặp trường hợp này! vậy mình phải làm sao

KT
4/04/2012 comment-delete

@KTcó vẻ bạn đã giải quyết được rồi nhỉ.

4/04/2012 comment-delete

Thanks bác Noct, em đã làm được :)

5/01/2012 comment-delete

Nhận xét này đã bị quản trị viên blog xóa.

khen cũng tốt nhưng không cần thiết phải chèn link quảng cáo của bạn

5/25/2012 comment-delete

Noct ơi, cho mình hỏi, có cách nào tăng số lượng popular posts ko? Mình thấy ở mục tùy chọn popular posts số lượng không thể >10. Mình định tăng số popular posts lên để mọi người có thể coi được dễ dàng hơn, thay cho mục lưu trữ Blog. Nếu bạn biết hãy chỉ giúp mình với. Thanks.

6/01/2012 comment-delete

Cảm ơn mình đã làm được :D

6/21/2012 comment-delete

em post ảnh trong bài viết rất nét.nhưng khi hiện thị trên Popular Posts thì mờ lắm vì em chọn kích thước 140x140.vậy phải làm thế nào?thank a Noct trước nhé.

9/25/2012 comment-delete

e cũng đang gặp vấn đề khi thay đổi kích thước hình hiển thị trong popular posts thì bị mờ. Mong a Noct chỉ giùm! cảm ơn a.

1/02/2013 comment-delete

Đăng nhận xét

- Không chèn liên kết quảng cáo khi đăng nhận xét.
- Nội dung nên liên quan tới chủ đề của bài.
- Use English if you do not understand what we are talking about.

Chèn Emoticons
Top
Copyright © 2011 Noct Blog. Content is licensed under a Creative Commons Attribution-NonCommercial 3.0 License