Trang chủ \ 18:18

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='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'/>
         </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='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'/>
         </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
Chia sẻ Phần mềm và Tài liệu cho người dùng Windows, Ubuntu. Hướng dẫn Thủ thuật cho người dùng Blogger, Blogspot.

Chia sẻ

72

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

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

Reply
4

Đẹp kinh

Reply
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
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
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
8

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

Reply
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
10

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

Reply
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
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
14

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

Reply
15

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

Reply
16

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

Reply
17

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

Reply
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
19

@Nguyễn Anh Duy Bác tinh mắt thật :)

Reply
20

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

Reply
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
22

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

Reply
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
24

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

Reply
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
27

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

Reply
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
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
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
31

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

Reply
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
33

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

Reply
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
36

mời bạn trao đổi link và tham gia thành viên .Nếu bạn đồng ý hãy để lại 1 comment trên bài viết của www.boxgiatri.net

Reply
37

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
38

@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
39

@wWw.Boxgiaitri.netBạn đang liên tục spam.

Reply
40

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

Reply
41

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
42

@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
43

@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
59

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
44

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

Reply
45

@Duy Pham

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

Reply
46

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

Reply
47

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
48

@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
49

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

Reply
50

@Duy Pham

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

Reply
51

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

Reply
52

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

Reply
53

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

Reply
54

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

Reply
55

hay lam anh oi .=))

Reply
56

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
57

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

Reply
58

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

Reply
60

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
61

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

Reply
62

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

Reply
63

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

Reply
Nặc danh 1/5/12 22:55
64

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

Reply
65

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
66

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
67

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

Reply
68

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
69

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

Reply
70

Dung cai minh can

Reply
71

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
72

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

Đăng nhận xét

Cancel reply

• Những nhận xét spam sẽ bị xóa.
• Public tài khoản Blogger để được trợ giúp.
• Nặc danh thường không được chào đón.