Hello xin chào tất cả các bạn, chào mừng các bạn đã quay lại với blog Bác Sĩ Windows.
Theo yêu cầu của một bạn yêu cầu mình chia sẻ cách làm widget bài đăng phổ biến có số đếm ở phía trước (giống blog của mình), thì bài viết hôm nay mình sẽ chia sẻ đoạn CSS mà mình viết để tùy biến widget popular post (hay bài đăng phổ biến) mà mình đang sử dụng trên blog.
Thủ thuật rất đơn giản, chỉ cần một ít CSS và ngoài ra không cần làm thêm bất kỳ việc gì nữa, xem cách làm nhé.
Bước 2. Tìm thẻ
Lưu ý: Bạn phải xóa hết các CSS tùy biến cũ (nếu có) nhé, nếu không sẽ bị xung đột và... lỗi đấy. Nếu không thích màu có sẵn thì bạn có thể thay mã màu khác vào ba chỗ in đậm ở trên nhé.
Nếu thấy bài viết hay & hữu ích thì hãy cho mình một bình luận hoặc chia sẻ nhé, nếu thực hiện không được hoặc có lỗi xảy ra thì cũng bình luận bên dưới để mình giúp đỡ và sửa lỗi. Chúc các bạn thành công!
Theo yêu cầu của một bạn yêu cầu mình chia sẻ cách làm widget bài đăng phổ biến có số đếm ở phía trước (giống blog của mình), thì bài viết hôm nay mình sẽ chia sẻ đoạn CSS mà mình viết để tùy biến widget popular post (hay bài đăng phổ biến) mà mình đang sử dụng trên blog.
Thủ thuật rất đơn giản, chỉ cần một ít CSS và ngoài ra không cần làm thêm bất kỳ việc gì nữa, xem cách làm nhé.
Các bước thực hiện
Bước 1. Truy cập vào trang chỉnh sửa HTML.Bước 2. Tìm thẻ
]]></b:skin> và dán CSS bên dưới vào phía trước nó.#PopularPosts1 ul li:first-child:after{content:"1";color:#ff6262!important;border:2px solid!important}Bước 3. Lưu mẫu và tận hưởng thành quả!
#PopularPosts1 ul li:first-child + li:after{content:"2";color:#55579e!important;border:2px solid!important}
#PopularPosts1 ul li:first-child + li + li{background:#fff}
#PopularPosts1 ul li:first-child + li + li:after{content:"3";color:#FDB713!important;border:2px solid!important}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#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:#fff}
#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:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li{background:#fff}
#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:after{content:"10"}
#PopularPosts1 ul li:first-child: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,#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 + 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:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after{position:absolute;top:8px;text-align:center;line-height:1em;font:300 20px "Roboto",sans-serif;padding:5px 12px;border-radius:50%;color:#888;border:2px solid #eee}
#PopularPosts1 ul li a{display:block;margin-left:55px}
Lưu ý: Bạn phải xóa hết các CSS tùy biến cũ (nếu có) nhé, nếu không sẽ bị xung đột và... lỗi đấy. Nếu không thích màu có sẵn thì bạn có thể thay mã màu khác vào ba chỗ in đậm ở trên nhé.
Lời kết
Mẫu Popular Post này phù hợp với các theme dạng đơn giản, cá nhân (như của mình), không có miêu tả và hình ảnh thu nhỏ.Nếu thấy bài viết hay & hữu ích thì hãy cho mình một bình luận hoặc chia sẻ nhé, nếu thực hiện không được hoặc có lỗi xảy ra thì cũng bình luận bên dưới để mình giúp đỡ và sửa lỗi. Chúc các bạn thành công!
Mọi bài viết đều thuộc bản quyền Bác Sĩ Windows, được viết bởi Admin. Hãy thể hiện mình là người văn minh, có văn hóa bằng cách copy ghi rõ "Nguồn: www.bacsiwindows.com". Tìm hiểu thêm
Với nhiều năm kinh nghiệm, chúng tôi sẵn sàng đáp ứng nhu cầu của khách hàng với những tiêu chí hàng đầu là Uy tín - Chất lượng - Lòng tin. Đã có nhiều người tin tưởng và sử dụng dịch vụ cao cấp của chúng tôi, bạn có phải là người tiếp theo?
Tui lại cướp cmt đầu ời hic
Trả lờiXóaHahaa nhanh ghê, vừa xuất bản đã bóc cmt đầu :))
XóaChỉ dám ước một vé ctv :>
XóaCộng tác viên chắc chưa cần đến bây giờ, từ từ tuyển sau, hóng đi nhé :D
XóaSợ hạn chế tuổi thôi :))
XóaMấy cái đó không quan trọng nữa, quan trọng là phong cách viết bài với sự siêng năng & sáng tạo thôi !!
XóaWow, phong cach va ngau qua
XóaHahaaa :)) chất lượng vẫn hơn số lượng
XóaChất quá
Trả lờiXóaHahaa đơn giản nhưng chất!
XóaChất quá
Trả lờiXóaChất quá chất :d
XóaHaha nhanh quá, nảy vào linkthuthuat không thấy bài viết, tí F5 lại thấy liền :))
Trả lờiXóaTrường đẹp trai :v
Trả lờiXóaHahaaa điều ai cũng biết =)))
XóaYêu a Trường qué :v
Trả lờiXóaChia sẻ bài viết thể hiện cho tình yêu nhé =)))
XóaCưới luôn đi =))
XóaTrường là zai thẳng nhe :v ahihi
XóaMột câu chuyện cảm động giữa Trường & Huy 💞 :v
XóaẶc, đây là 1 câu chuyện buồn và không hề cảm động :v
Xóaem xin code mai đăng bài viết luôn :v
XóaCode gì hửm em!?
Xóae cào phím nhanh quá ghi nhầm
Xóae mượn bài viết mai đăng trên blog á a
Thanh niên nói chuyện zễ thương quááá, mượn bài để up blog nhé :v
Xóahihi :v
Xóaoke a <3
XóaÀ, cho link blog xem với nào!
Xóa:v :v
Trả lờiXóaHợp tác thế nào? Hình thức hợp tác ra sao!?
Trả lờiXóanôn na là: a đặt banner blog e, e cập nhật bài viết bên a <3
Trả lờiXóaCòn hình thức khác không, anh không thích đặt quảng cáo trên blog.
Trả lờiXóaCũng được đấy, nhưng mà anh có demo.bacsiwindows.com rồi !? @@
Trả lờiXóaÀ cũng được đấy! :))
Trả lờiXóaMấy công cụ này em tự làm cả à?
vâng. tự mày mò a ạ :v
Trả lờiXóaJavascript hay gì đấy e? Giỏi đấy :))
Trả lờiXóajs a ạ :v
Trả lờiXóap/s: thanks a <3
Hahaa chắc mình cũng phải tập tành học hỏi theo nhỉ :))
Trả lờiXóaJavascript là js đấy (js viết tắt)
e biết mà :v
Trả lờiXóaHọc từ đâu và học cái gì trước vậy? :v
Trả lờiXóae down giáo trình trên mạng về a. Học từ cơ bản đến nâng cao ạ
Trả lờiXóaOk cám ơn e nhé, để a mò mò tìm hiểu xem :3
Trả lờiXóa. Hay <3
Trả lờiXóaOK nhớ thi nguồn nhé e ;))
XóaVào cài đặt tên miền thứ 3 trong blogspot mà ấn tick vào chuyển hướng bacsiwindows.com sang www.bacsiwindows.com nhé, vừa vào thì thấy lỗi.
Trả lờiXóaOk :))
Xóacho em Xin cái back-top được không bác ơi :( đang tìm cái back-top bo tròn như vậy
Trả lờiXóaMình dùng zotabox.com đó bác.
XóaSao hôm nay không thấy ai comment hết nhỉ ?
Trả lờiXóavào comment nè :v
XóaChắc bài viết nhạt quá đó =))
XóaHóng bài viết đưa menu lên trên :)
Trả lờiXóaHóng thôi, chưa có đâu :v
XóaHay ^^
Trả lờiXóaCảm ơn bạn ;)
XóaKéo bài viết này lên 100 Comment đi :v
Trả lờiXóaCác ông cứ tích cực bình loạn chém gió đi thế nào cũng lên 100 thôi :v
XóaChà, canh chừng người ta lên blog comment ghê nhỉ :3
XóaHaahaaa rảnh mà =))))
Xóacmter 100 có quà ko ta
Trả lờiXóaKhông nhé :v
Xóanhầm 1000 thì sao :v
XóaCũng không luôn nhé :v
Xóahttps://dantricdn.com/k:2015/1-rlmnxau-xi-1-1448471527152/chiem-nguong-nguoi-dan-ong-xau-nhat-the-gioi.jpg
XóaSao footer bên phải chừa trống làm gì vậy?
Trả lờiXóaĐưa cái recent comment lên sidebar rồi nên không biết nhét cái gì vào chỗ trống đó nữa :v
Xóanhét nhạc vào cho chất :v
XóaNhét nhạc vào làm chậm blog, với lại làm phiền một số người không thích!
Xóatop comments
XóaHay đấy :v để tí nghịch thử xem ahaha
Xóađổi lời ko đc hả [pre]Star Bình[/pre]
XóaMuốn đổi chữ khác, làm sao để copy link vậy??
Xóamuốn nó kêu tên gì gửi lời thoại đây a làm cho
XóaChào mừng các bạn đến với Blog Trọng Khanh Nguyễn. Nhớ theo dõi blog và ủng hộ Admin nhé !
Xóalời thoại đâu làm cho ông
Xóacái đó đăng ký đâu vậy anh
Xóaa định thay cái thông báo ting ting khi inb tới thành ứ, á, ớ :))
Xóak giống chút nào, á hơi lâu, phải thêm ớ ứ nữa mới giống
XóaMuốn bình loạn bằng âm thanh thì URL phải có đuôi .mp3 mới được.
Trả lờiXóaMà thêm vào chắc blog loạn hết mất :v
Ơ cái đệt lúc trưa c/m bài này mới đúng 70 c/m, bây giờ lên hơn 100 c/m. toàn c/m ảnh biến thái ko chứ :v
Trả lờiXóaXóa đoạn css này
Trả lờiXóa<code>.PopularPosts .item-thumbnail {
width:90px;
height:65px;
float:left;
overflow:hidden;
display:block;
vertical-align:middle;
margin:0 15px 0 0 !important;
border-radius:3px;
}
.PopularPosts .item-thumbnail a {
position:relative;
display:block;
overflow:hidden;
line-height:0;
}
.PopularPosts ul li img {
width:100px;
height:80px;
object-fit:cover;
padding:0;
transition:all .3s ease;
}
.PopularPosts .widget-content ul li {
overflow:hidden;
padding:15px 0;
border-top:1px solid #eee;
}
.sidebar .PopularPosts .widget-content ul li:first-child,.sidebar .custom-widget li:first-child {
padding-top:0;
border-top:0;
}
.sidebar .PopularPosts .widget-content ul li:last-child,.sidebar .custom-widget li:last-child {
padding-bottom:0;
}
.PopularPosts .item-title {
font-size:14px;
font-weight:500;
line-height:1.4em;
margin:0 0 5px;
padding:0;
}
.PopularPosts ul li a {
color:#333333;
transition:color .3s;
}
.PopularPosts ul li a:hover {
color:#0078d7;
}</code>
.PopularPosts .item-thumbnail {
Xóawidth:90px;
height:65px;
float:left;
overflow:hidden;
display:block;
vertical-align:middle;
margin:0 15px 0 0 !important;
border-radius:3px;
}
.PopularPosts .item-thumbnail a {
position:relative;
display:block;
overflow:hidden;
line-height:0;
}
.PopularPosts ul li img {
width:100px;
height:80px;
object-fit:cover;
padding:0;
transition:all .3s ease;
}
.PopularPosts .widget-content ul li {
overflow:hidden;
padding:15px 0;
border-top:1px solid #eee;
}
.sidebar .PopularPosts .widget-content ul li:first-child,.sidebar .custom-widget li:first-child {
padding-top:0;
border-top:0;
}
.sidebar .PopularPosts .widget-content ul li:last-child,.sidebar .custom-widget li:last-child {
padding-bottom:0;
}
.PopularPosts .item-title {
font-size:14px;
font-weight:500;
line-height:1.4em;
margin:0 0 5px;
padding:0;
}
.PopularPosts ul li a {
color:#333333;
transition:color .3s;
}
.PopularPosts ul li a:hover {
color:#0078d7;
}
Có đọc phần lưu ý trên bài viết không?
Trả lờiXóachưa :#
XóaChưa thì đọc lại đê.
XóaSorry... tại xóa thiếu vì khi tìm popularposts1
Xóa