Trang chủ \9.3.12

Cool Popular Posts

Đây là bài viết thứ 4 trên Duy Pham Blog liên quan đến widget Popular Posts và là bài thứ 2 chỉ tập trung vào thiết kế. Bài viết hướng dẫn bạn tạo Popular Posts có giao diện như hình dưới. Ban đầu mình định sử dụng CSS 3 tuy nhiên vì muốn hiển thị cả trên IE7 nên lại chuyển về CSS 2, trong đó thì việc đánh số là CSS 2.1 nên trên IE7 không có đánh số thứ tự.

popular posts


Trong bài viết này mình sẽ áp dụng cho Popular Posts có id là PopularPosts1.

Bước 1: Thêm đoạn mã dưới đây vào sau thẻ <b:skin><![CDATA[ trong template của bạn.
/*
<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#fa4242"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ee6107"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#f0f"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#ff0"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#0ff"/>
</Group>
*/

Bước 2: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#0a960a;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

Bước 3: Vào Chỉnh sửa HTML (không chọn Mở rộng Mẫu Tiện ích) và tìm trong template từ khóa <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>. Thay thế nó bằng đoạn mã dưới đây.
<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'>
      <li>
       <b:if cond='data:showThumbnails == &quot;false&quot;'>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.snippet'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1JJ_CbmxP74f5e43k-Od8yJ1ve_x9UarWrDcT39qR0hzXnxQG-sBbFgdwOMylVC4sNYQnq86KT7qMyB-jwxQxofTfMpbF8GHV4o6lo7sYI2Ipk6yCB4yPqW5FKvyU6NNZsYDMKw2TaRS-/'/>
         </b:if>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1JJ_CbmxP74f5e43k-Od8yJ1ve_x9UarWrDcT39qR0hzXnxQG-sBbFgdwOMylVC4sNYQnq86KT7qMyB-jwxQxofTfMpbF8GHV4o6lo7sYI2Ipk6yCB4yPqW5FKvyU6NNZsYDMKw2TaRS-/'/>
         </b:if>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.snippet'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>
 </b:widget>

Bước 4: Quay trở lại Bố cục và chọn Chỉnh sửa widget Popular Posts. Chọn Hiển thị tối đa 5 bài đăng, các thông số còn lại lựa chọn theo ý bạn.

popular posts setup

Để dễ dàng cho mọi người thay đổi màu nền mình đã sử dụng Trình thiết kế Mẫu của Blogger. Bạn vào Thiết kế → Trình thiết kế Mẫu → Nâng cao → PopularPosts Backgrounds và thay đổi lần lượt background color1, background color2, background color3, background color4, background color5 theo ý muốn.

popular posts background setup

Hướng dẫn thủ thuật Blogger, Blogspot

71

Nhận xét
1

Cái này hay nhỉ.Hay nhất là cái chọn màu ở Trình thiết kế mẫu

Reply Xóa nhận xét
2

Vừa mới test xong, rất tuyệt, nhưng mà mình không thích vụ Variable nên chơi trực tiếp luôn. Bác nào muốn xem demo thì vào xem nhé.
http://webs.chanhdat.com

Reply Xóa nhận xét
3

Nhìn bắt mắt thật đó :))

Reply Xóa nhận xét
5

@Hồng Hòa Vi Cái này bên simplex có rồi những không đẹp bằng của Duy, vừa may lại rất hợp với cái trang nhiều màu của mình. Thật là long lanh :))

Reply Xóa nhận xét
6

bác cho em hỏi có cách nào khi người dùng truy cập vào ảnh thuôc trang web của mình trên google image thì nó trỏ thẳng vào trang có ảnh của mình mà không hiện như thông thường là cái ảnh thì nổi bật lên còn trang của mình thì mờ mờ đằng sau!

Reply Xóa nhận xét
7

Hơ hơ... nhìn cái này quen quen, hình như rất giống bên wordpress :)
Blogger bị hạn chế nhưng người code như bác Duy Pham pro thật, cái gì cũng làm được =D>

Reply Xóa nhận xét
8

@thế hiện ngôHiển thị thế nào là do Google image, mình k can thiệp dc.

Reply Xóa nhận xét
9

@ArchitionWP cũng có kiểu này à? Mình làm theo style của trang metrolyrics.com. Xem nó lâu rồi nhưng chỉ nhớ mang máng, vừa thử search lại thì thấy nó đẹp hơn thì phải :D. Với lại dùng mỗi CSS nên áp dụng cho cả recent posts, random posts... những thứ liên quan đến danh sách (list) cũng dc.

Reply Xóa nhận xét
10

@Hồng Hòa Vi:-? suốt ngày bị đụng hàng với trang này :D

Reply Xóa nhận xét
11

em lam theo anh rui nhung sao no ko hien thi mau nhun demo ha a
http://dj.xemlien.com/
P/S : e muon thay cai hinh mac dinh thi lam sao . ve trang em la trang nhac DJ nen ko co hinh anh thummai nen e muon bo no di

Reply Xóa nhận xét
12

@Dat NguyenBạn làm lại thử xem, mình k thấy nhận background từ khai báo. Còn thumbnail thì Blogger có lựa chọn k hiển thị mà.

Reply Xóa nhận xét
14

@Nguyễn Anh DuyỢ, gái nhiều làm bác nhìn đâu cũng ra "hàng" =))

Reply Xóa nhận xét
15

@Hồng Hòa Vi: Ava bác này giống Người áo lam thế nhỉ :D

Reply Xóa nhận xét
16

@Duy PhamBác chỉnh ava to nhỏ ở phân cấp ngon quá :D

Reply Xóa nhận xét
17

Màu mè quá :))
Yêu rồi đới :D
Ghét bộ emo này quá [-(

Reply Xóa nhận xét
18

@Duy Pham "áp dụng cho cả recent post, random posts...những thứ liên quan đến danh sách (list) cũng được" Duy hướng dẫn mình áp dụng cho cái random post với !!! mình đã thử nhưng hình như blogger k có cung cấp tiện ích random post thì phải (hiện giờ mình đang dùng tiện ích bài viết ngẫu nhiên tốc độ cao của Duy).

Reply Xóa nhận xét
20

tuỳ biến thành 10 bài nhưng hok dc bác duy ơi :(

Reply Xóa nhận xét
21

@Budd Hoag Không được vì nó ngắn giới hạn thôi chứ, lui hoài đến bao nhiêu % đây :D

Reply Xóa nhận xét
22

ngắn hay dài mình sua lại đc mà bác :D

Reply Xóa nhận xét
23

so cool !!
Một ý tưởng mới . Bác Duy đổi emoticons không bằng cái trước nhờ :D

Reply Xóa nhận xét
24

keke sua đc roài, thanks thanks :D

Reply Xóa nhận xét
25

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

Reply
26

@D4UBạn thay #PopularPosts1 ul thành #random-posts là dc.

Reply Xóa nhận xét
27

@NoctLà fan của Ubuntu nên chọn emo theo nó :D

Reply Xóa nhận xét
28

@Duy Pham

Em cũng nghiện Ubuntu rồi nên giờ cũng không hay dùng windows nữa, cần thiết thì mới dùng =.='ùng

Reply Xóa nhận xét
29

@Shioon Năm 2008 đã dùng 6 tháng rất thoải mái vì máy móc nhẹ nhàng phần mềm cần thiết cũng tìm đủ cả.

Chỉ hiềm một cái là muốn giúp đỡ bạn bè thì kg được. Vả lại làm việc công ty toàn file Excel. Nội convert file qua lại cũng mệt. Cuối cùng phải dùng Win trở lại

Reply Xóa nhận xét
30

Duy làm cái này hơi chậm chân hơn Simplex:D....nhưng màu mè quá....mình ko sài được...dù sao cũng rất vui khi dạo này Duy viết bài đều trở lại:X

Reply Xóa nhận xét
31

nhưng simplex ^^ ko có ảnh đại diện:D:D

Reply Xóa nhận xét
32

@Hồng Hòa ViEm thì cần dùng CAD nên k bỏ Win dc. Excel thì dùng OOo Sheet đọc dc mà bác, có điều Text Document khi mở bằng Word thì format k dc chính xác lắm.

Reply Xóa nhận xét
33

@HoxamMình cố gắng 1 tháng ít nhất cũng có 1 bài cho đỡ vắng thôi :((

Reply Xóa nhận xét
35

@Duy Pham Nó chỉ đọc được mấy file bình thường thôi... mấy file của mình nó kg hiểu được do có mấy hàm tương đối phức tạp, vả lại đối với các file dung lượng lớn khi dùng Open Office quả thật là ác mộng

Reply Xóa nhận xét
36

Mình gặp 2 vấn đề nè duy ơi:
1. Ở các mẫu blog của blogger nó báo là lỗi phần khai báo PopularPosts.background.color2
http://1.bp.blogspot.com/-hGNjbak7eWw/T2MQttAFz4I/AAAAAAAAAoQ/vK-wSrR09LA/s1600/5.png
2. Blog mình đang dùng hình ảnh không hiện đủ số đếm và không có mã màu ở trong template để chỉnh khi bấm vào nhãn nâng cao.
http://3.bp.blogspot.com/-DBRJ9vaTBkM/T2MPgJaeh5I/AAAAAAAAA-A/r678dUqYDW0/s1600/3.png
và hình 2 ở blog không hiện màu, lỗi số đếm:
http://3.bp.blogspot.com/-yLAfoOSXEwQ/T2MQFRuk90I/AAAAAAAAA-M/ubTeiO9L4qU/s1600/4.png
Bạn cso thể xem:
http://www.nongnghiep.tk/

Reply Xóa nhận xét
37

@namknaBạn di chuyển phần CSS variable lên sát <b:skin><![CDATA[ xem dc k. Còn số đếm bị che khuất là do thuộc tính overflow:hidden trên sidebar.

Reply Xóa nhận xét
39

@Duy Phambạn teen này được ưu tiên add vào blacklist của mình rồi bác ợ

Reply Xóa nhận xét
40

Hình như bên SimplexDesign cũng có một thủ thuật màu mè tương tự bác ạ :)
Mà cái emo này nhìn không đã mắt bằng cái emo cũ :-?

Reply Xóa nhận xét
41

@Duy Pham

e có contact cho bác mà ko thấy có hồi âm, ko biết bác nhận đc chua :D

Reply Xóa nhận xét
42

@Budd HoagMấy ngày mình k online nên contact nhiều quá, bỏ sót mất của bạn :D Mình reply lại rồi!

Reply Xóa nhận xét
58

Bác Duy hướng dẫn add cho 10 bài đi, chứ e làm hoài mà bị lỗi.
mail e là : xemlien.com@gmail.com

Reply Xóa nhận xét
43

@Joseph TrinhSimple dùng js bác ạ, mà bác là CAA+ ? Sao đổi tên vậy?

Reply Xóa nhận xét
44

@Duy Pham

bác rep lại vào mail nào nhỉ, e chưa thấy j :D

Reply Xóa nhận xét
45

@Budd HoagMail nhầm người =))

Reply Xóa nhận xét
46

Thông báo Tham số không hợp lệ trên nền trang: Biến số được sử dụng nhưng chưa được xác định. Thông tin đầu vào: PopularPosts.background.color2

Reply Xóa nhận xét
47

@Duy Pham Em tính xây dựng lại từ đầu bác ạ. Nhân tiện làm mới lại tất cả, thay domain và sử dụng tên thường dùng luôn bác ạ :)

Reply Xóa nhận xét
48

@Joseph Trinh Rất khoái cái màu xanh ngọt ngào của bác :))

Reply Xóa nhận xét
49

@Duy Pham

hix đọc mail mà bùn wa, bác có thể giúp e đc hok :(

Reply Xóa nhận xét
50

@Hồng Hòa Vi Cảm ơn bác, em yêu màu xanh của cỏ cây hoa lá :)

Reply Xóa nhận xét
51

http://www.vatinam.net
Hihi... Bác đổi bộ emo khác rùi à :))

Reply Xóa nhận xét
52

Quá đỉnh,bạn duy ơi bạn học trường nào thế!!!!!!!!!!!!!!!!!
ĐH Công nghiệp à!!!!!! =)) =)) =))

Reply Xóa nhận xét
53

@123oap.comMình hết tuổi đi học rồi :D

Reply Xóa nhận xét
54

hay lam anh oi .=))

Reply Xóa nhận xét
55

Cool Popular Posts KHÔNG HIỆN MÀU NỀN TRÊN SIDEBAR CỦA THEME "Nexis Blogger Template - A free premium Blogger template" DUY ƠI.
nHỜ BẠN HƯỚNG DẪN GIÚP NHÉ.BLOG CỦA MÌNH KHÔNG HIỆN ĐƯỢC MÀU NỀN: http://nthcivilengineer.blogspot.com/

Reply Xóa nhận xét
56

@Nguyễn Thanh HiếuĐã cập nhật lại, bạn thử làm lại xem nhé!

Reply Xóa nhận xét
57

thank Duy nhiều, mình làm được rồi.

Reply Xóa nhận xét
59

Duy ơi cậu hướng dẫn tớ làm thành 10 bài nha ! chứ tớ làm hoài mà ko dc

Reply Xóa nhận xét
60

Oh. Nice
http://youofworld.blogspot.com

Reply Xóa nhận xét
61

ơ sa0 blog mình không có dòng nhĩ. Bạn tìm dùm mình đi tinnhanh.cuibap.vn

Reply Xóa nhận xét
62

à thì ra mình chưa cài cái widget Poppular post haha

Reply Xóa nhận xét
Nặc danh 1/5/12 22:55
63

làm sao để thay đổi số thứ tự bằng 1 hình ảnh khác đc ad ?

Reply Xóa nhận xét
64

bác duy cho e hỏi là ảnh Poppular bị nhoè có cách nào khác phục chất lượng ko :D

Reply Xóa nhận xét
65

Sử dụng hàm replace để lấy ảnh độ phân giải cao hơn (ảnh mặc định chỉ 72px thôi)

Reply Xóa nhận xét
Nặc danh 9/6/12 21:45
66

Hình ảnh minh họa hình như bị lỗi rùi

Reply Xóa nhận xét
67

mình chỉ thik công cụ nào đơn giản hơn, mà chỉ cần một mã nhúng vô widget HTML nào đó là xog thì tốt, như thế này ....cũng ngại nghịch ghê :D

Reply Xóa nhận xét
68

Nhìn đẹp phết... trắc phải bê về blog mình thui!

Reply Xóa nhận xét
70

Nó không tương thích với theme "Premium Blogger Templates - Metro Modern Solar V.1 "
http://blog.nguoiaolam.net/2012/11/premium-blogger-temaplte-metro-modern.html
Giúp mình fix cho nó phù hợp được ko ?

Reply Xóa nhận xét
71

sao của mình cái dòng code ở bước 3 để dán đè lên
nó không có cái dấu gạch chéo gần cuối :( mình dán vào thì lỗi loạn cả lên hiz hiz

Reply Xóa nhận xét

Đăng nhận xét

Cancel