--------------- CHIA SẺ CÔNG NGHỆ - KẾT NỐI ĐAM MÊ ----------------

--------------- CHIA SẺ CÔNG NGHỆ - KẾT NỐI ĐAM MÊ ----------------
Tạo Popular Posts Widget nhiều màu sắc trong blogspot với CSS

Tạo Popular Posts Widget nhiều màu sắc trong blogspot với CSS

Edit
Popular Posts Widget là một widget cho phép chủ blog đăng những bài viết được xem nhiều nhất trong tháng, trong tuần hoặc tất cả thời gian cho khách viếng thăm blog của họ. Widget này có sẵn trong blogspot và chúng ta có thể dễ dàng cho nó hiển thị ngoài trang chủ. Mặc định nó sẽ hiển thị hình (nếu bài viết đó có) và tiêu đề của bài viết đó, cùng với một nội dung ngắn mô tả (khoảng từ 20 – 25 chữ).
blogspot tips, css3, Popular Posts Widget, tiện ích, widget
Hôm nay, mình sẽ chia sẻ cho các bạn một thủ thuật tô điểm thêm màu sắc cho những bài viết này. Thủ thuật này sẽ sử dụng một ít CSS3 , và đặc biệt là màu sắc sẽ được tô điểm theo kiểu Flat UI color, vì thế nó sẽ dễ dàng thu hút cái nhìn của khách viếng thăm blog của các bạn nhiều hơn.
Bước 1 : Vào  Layout  rồi chọn  “Add a Gadget”  và chèn Popular Posts Widget từ danh sách Widget.
Bước 2 : Đặt tiêu để (title) của Widget, chọn cách hiển thị popular post (theo tháng, tuần, hay tất cả) rồi click Save.
Bước 3 : Vào Template -> Edit HTML , tìm (nhấn Ctrl + F) đoạn code sau :
?
1
]]></b:skin>
Sau đó copy đoạn code sau và dán (paste) ngay trên nó :
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!-- Popular posts multi colored UI theme -->
 
#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:#ff4c54;width:97%}
 
#PopularPosts1 ul li:first-child:after{content:"1"}
 
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
 
#PopularPosts1 ul li:first-child + li:after{content:"2"}
 
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
 
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
 
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
 
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
 
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
 
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
 
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
 
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
 
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
 
#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,
 
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;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:70px;height:70px;}
 
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
 
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
 
#PopularPosts1 img{
 
-moz-border-radius: 130px;
 
-webkit-border-radius: 130px;
 
border-radius: 130px;
 
-webkit-transition: all 0.3s ease;
 
-moz-transition: all 0.3s ease;
 
transition: all 0.3s ease;
 
padding:4px;
 
border:1px solid #fff !important;
 
}
 
#PopularPosts1 img:hover {
 
border-radius: 0 0 0 0;
 
-moz-transform: scale(1.2) rotate(-711deg) ;
 
-webkit-transform: scale(1.2) rotate(-711deg) ;
 
-o-transform: scale(1.2) rotate(-711deg) ;
 
-ms-transform: scale(1.2) rotate(-711deg) ;
 
transform: scale(1.2) rotate(-711deg) ;
 
}
 
<!-- popular posts multicolored UI theme -->
Click Save để hoàn tất.
CHÚC BẠN THÀNH CÔNG 
NGUỒN : SHARECODE.VN
Share on Google Plus

Admin Admin

Một số bài đăng trong blog có sử dụng nhiều nguồn thông tin khác nhau nên dễ xảy ra vấn đề trùng bài hoặc vi phạm bản quyền, mong các bạn thông cảm. Nếu phát hiện bài đăng vi phạm bản quyền vui lòng comment ngay bên dưới để được hỗ trợ tốt nhất ! Xin cảm ơn và chúc các bạn có trải nghiệm vui vẻ tại blog :)
    Blogger Comment
    Facebook Comment

0 nhận xét:

Đăng nhận xét

Đăng ký: Đăng Nhận xét ( Atom )