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.
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):
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.
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ó/
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ả.!
Nhận xét
Namkna ơi làm ơn giúp dùm mình với mình muốn đổi màu link footer khi rê chuột vào màu xanh nước biển thì phải làm sao ? chỉ giúp mình với
Trả lờiXóahttp://2.bp.blogspot.com/-syMhBm0vbqQ/UV_pMtD3oAI/AAAAAAAAAro/gaiq4LGgQ-A/s1600/Untitled.png
Thank Namkna
Cho mình xin link blog đó để mình chỉnh code giúp nha.
Xóahttp://alorenting.blogspot.com/ trang này nè Namkna ơi chỉ giúp mình cách sửa nha , thank
XóaThêm đoạn này trước thẻ:
Xóa.left a:hover,.left a:active{color:#666 !important;text-decoration:none}
thay #666 thành mã màu bạn muốn:
- Xem bảng mã màu: XEM NGAY
Thêm trước thẻ này nha: ]]></b:skin>
Xóaanh nam ơi anh hướng dẫn em làm 1 cái như trang này dc không http://itvovantien.com/
Trả lờiXóaCụ thể làm cái gì trên trang đó hả em ?
Xóaem muốn thay số bằng hình ảnh thì làm thế nào ảnh, ví dụ 1 là huy chương vàng 2 là huy chương bạc
Trả lờiXóaĐây là bản đơn giản mình sẽ cập nhạt bản thay bằng ảnh trong ves tới.
XóaHoặc bạn có thể xem bài nay:
XEM NGAY
Ok, link hợp tác vui vẻ hi?
Trả lờiXóaOk. Hợp tác vui vẻ!
XóaDemo: http://namkna-demo.blogspot.com/2013/04/demo-popular-posts-co-so-em-va-thay-oi.html
Trả lờiXóakì quá em dùng mẹo ctrl + f mà tìm ko ra ]]>
Trả lờiXóaEm Ctrl + F để tìm kiếm nội tuyến nha, Hãy em cách tìm kiếm nội tuyến ở đây ne. NỘI TUYẾN
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaBước này làm sao vậy Ad: Chọn Mở rộng tiện ích mẫu ( Expand Template Widgets)
Trả lờiXóaBước đấy thực chất bây giờ không còn cần thiết đâu, bạn có thể bỏ qua cái Expand Template Widgets.
Xóa