Popular Posts có số đếm giống blog đang sử dụng đẹp

Thủ thuật này sẽ hướng dẫn các bạn cách thêm nhiều màu khác nhau và số đếm trong Popular Post Widget của blogger. Điểm nổi bật của thủ thuật này là bạn không cần phải thêm bất kỳ JavaScript nặng hoặc bất thuộc tính nào khác, bạn chỉ cần thêm 1 đoạn CSS đơn giản. Ngoài ra, bạn có thể tùy chỉnh widget này với việc sử dụng trình thiết kế mẫu của blogger. Chúng ta hãy đi đến hướng dẫn.
Multi Color Popular Posts count ves 3

Bước 1 » Thêm widget Popular Posts vào blogspot của bạn!

Lưu ý: - Nếu blog bạn đã có tiện ích Popular Posts rồi thì bắt đầu thực hiện từ bước 1.5.
1.1- Đăng nhập vào Blog
1.2- Vào mẫu (Template)
1.3- Chọn Thêm Tiện ích (Add Widget)
1.4. Bấm chọn mục bài đăng phổ Biến (Popularposst):
Multi Color Popular Posts có số đếm cho blogspot (v3)
1.5- Bấm chỉnh sửa tiện ích Popularposts và cài đặt như bên dưới:
  • Chọn "hiển thị tối đa" 9 bài viết.
  • Bỏ chọn hình ảnh thu nhỏ và đoạn trích.
Multi Color Popular Posts có số đếm cho blogspot (v3)
1.6- Lưu tiện ích lại.

Bước 2 » Tùy biến widget Popular Posts của bạn!
1- Đăng nhập vào blog
2- Chọn Mẫu (Template)
3- Chọn  Chỉnh sử HTML (Edit HTML)
4- Tìm thẻ  ]]></b:skin>:(Mẹo: Bấm Ctrl+F để tìm). Và dán code bên dưới vào trước nó/
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#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:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#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:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
Lưu mẫu lại và xem kết quả.!
Nguồn : http://www.terocket.com/

Bài Viết Liên Quan

Phản Hồi Độc Giả

2 nhận xét

» Hướng Dẫn Chèn Liên Kết: <a href="Link" rel="nofollow">Tên</a>
» Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin
» Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
» Bình luận của bạn sẽ được gửi đến Admin để kiểm duyệt.
Biểu Tượng Cảm XúcBiểu Tượng Cảm Xúc