Tạo widget Popular Post tuyệt đẹp cho Blogspot có số đếm
/ lúc / 129 bình luận
Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!
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êm một Style đẹp cho Widget Popular Post (Bài Đăng Phổ Biến) - Bác Sĩ Windows

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}
#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}
Bước 3. Lưu mẫu và tận hưởng thành quả!
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!

BÌNH LUẬN VỀ BÀI VIẾT (129)

Tui lại cướp cmt đầu ời hic

TRẢ LỜI
avatar
Trường Nguyễn ­

Hahaa nhanh ghê, vừa xuất bản đã bóc cmt đầu :))

TRẢ LỜI

Chỉ dám ước một vé ctv :>

TRẢ LỜI
avatar
Trường Nguyễn ­

Cộ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

TRẢ LỜI

Sợ hạn chế tuổi thôi :))

TRẢ LỜI
avatar
Trường Nguyễn ­

Mấ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 !!

TRẢ LỜI

Wow, phong cach va ngau qua

TRẢ LỜI
avatar
Trường Nguyễn ­

Hahaaa :)) chất lượng vẫn hơn số lượng

TRẢ LỜI
avatar
Star Cường IT ­

Chất quá

TRẢ LỜI
avatar
Duy Ripper

Chất quá

TRẢ LỜI
avatar
Trường Nguyễn ­

Hahaa đơn giản nhưng chất!

TRẢ LỜI
avatar
Trường Nguyễn ­

Chất quá chất :d

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

hahaha đẹp :v
http://www.linkthuthuat.com/2017/11/tao-widget-popular-post-tuyet-ep-co-so.html
share nào ae :v

TRẢ LỜI
avatar
Trường Nguyễn ­

Haha 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ỜI
avatar
Tính Getter

Trường đẹp trai :v

TRẢ LỜI
avatar
Nguyễn Đức Huy

Yêu a Trường qué :v

TRẢ LỜI
avatar
Trường Nguyễn ­

Hahaaa điều ai cũng biết =)))

TRẢ LỜI
avatar
Trường Nguyễn ­

Chia sẻ bài viết thể hiện cho tình yêu nhé =)))

TRẢ LỜI
avatar
Tính Getter

Cưới luôn đi =))

TRẢ LỜI
avatar
Trường Nguyễn ­

Trường là zai thẳng nhe :v ahihi

TRẢ LỜI
avatar
Tính Getter

Một câu chuyện cảm động giữa Trường & Huy 💞 :v

TRẢ LỜI
avatar
Trường Nguyễn ­

Ặc, đây là 1 câu chuyện buồn và không hề cảm động :v

TRẢ LỜI
avatar
Nguyễn Đức Huy

em xin code mai đăng bài viết luôn :v

TRẢ LỜI
avatar
Trường Nguyễn ­

Code gì hửm em!?

TRẢ LỜI
avatar
Nguyễn Đức Huy

e cào phím nhanh quá ghi nhầm
e mượn bài viết mai đăng trên blog á a

TRẢ LỜI
avatar
Star Cường IT ­

Thanh niên nói chuyện zễ thương quááá, mượn bài để up blog nhé :v

TRẢ LỜI
avatar
Nguyễn Đức Huy

hihi :v

TRẢ LỜI
avatar
Trường Nguyễn ­

Hahaa copy nhớ ghi Nguồn: www.bacsiwindows.com là Ok.

TRẢ LỜI
avatar
Nguyễn Đức Huy

oke a <3

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

:v :v

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

hợp tác a ưi :v
http://www.linkthuthuat.com/hop-tac

TRẢ LỜI
avatar
Trường Nguyễn ­

Hợp tác thế nào? Hình thức hợp tác ra sao!?

TRẢ LỜI
avatar
Trường Nguyễn ­

À, cho link blog xem với nào!

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

nôn na là: a đặt banner blog e, e cập nhật bài viết bên a <3

TRẢ LỜI
avatar
Trường Nguyễn ­

Còn hình thức khác không, anh không thích đặt quảng cáo trên blog.

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

get link tại đây thì sao a. dạng như a get link DEMo mấy cái widget á :v

TRẢ LỜI
avatar
Trường Nguyễn ­

Cũng được đấy, nhưng mà anh có demo.bacsiwindows.com rồi !? @@

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

thì a get cái link demo đó :v
vd nè a :v
http://ch.linkthuthuat.com/p/go-to-url.html?url=aHR0cDovL2RlbW8uYmFjc2l3aW5kb3dzLmNvbS8=

TRẢ LỜI
avatar
Trường Nguyễn ­

À cũng được đấy! :))
Mấy công cụ này em tự làm cả à?

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

vâng. tự mày mò a ạ :v

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

mak nếu khi chèn code cho ngta xem mak dài quá chèn lag thì a có thể mã hóa r chèn tại đây nha :v
http://notepad.linkthuthuat.com/

TRẢ LỜI
avatar
Trường Nguyễn ­

Javascript hay gì đấy e? Giỏi đấy :))

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

js a ạ :v
p/s: thanks a <3

TRẢ LỜI
avatar
Trường Nguyễn ­

Hahaa chắc mình cũng phải tập tành học hỏi theo nhỉ :))
Javascript là js đấy (js viết tắt)

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

e biết mà :v

TRẢ LỜI
avatar
Trường Nguyễn ­

Học từ đâu và học cái gì trước vậy? :v

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

e down giáo trình trên mạng về a. Học từ cơ bản đến nâng cao ạ






















TRẢ LỜI
avatar
Trọng Khanh Nguyễn

đây nek a
https://drive.google.com/file/d/1i-ay1ZZz9W30rMmgmYl5Fv9muk8e4Zpo/view?usp=sharing

TRẢ LỜI
avatar
Trường Nguyễn ­

Ok cám ơn e nhé, để a mò mò tìm hiểu xem :3

TRẢ LỜI
avatar
Nguyễn Đức Huy

http://www.nguyenhuyit.tk/
nè a

TRẢ LỜI
avatar
Văn Huy SYSTEM

. Hay <3

TRẢ LỜI
avatar
Văn Huy SYSTEM

http://www.vanhuyy-it.tk/2017/11/tao-widget-popular-post-tuyet-ep-cho.html em mượn bài luôn nha a

TRẢ LỜI
avatar
Star Cường IT ­

Và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ỜI
avatar
Trường Nguyễn ­

Ok :))

TRẢ LỜI
avatar
Trường Nguyễn ­

OK nhớ thi nguồn nhé e ;))

TRẢ LỜI
avatar
Huỳnh Hoài Bảo

cho 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ỜI
avatar
Trường Nguyễn ­

Mình dùng zotabox.com đó bác.

TRẢ LỜI
avatar
Tính Getter

Sao hôm nay không thấy ai comment hết nhỉ ?

TRẢ LỜI
avatar
Nguyễn Đức Huy

vào comment nè :v

TRẢ LỜI
avatar
Trường Nguyễn ­

Chắc bài viết nhạt quá đó =))

TRẢ LỜI
avatar
SHuyTarUT

Hóng bài viết đưa menu lên trên :)

TRẢ LỜI
avatar
Lý Văn Bảo

Hay ^^

TRẢ LỜI
avatar
Trường Nguyễn

Hóng thôi, chưa có đâu :v

TRẢ LỜI
avatar
Trường Nguyễn

Cảm ơn bạn ;)

TRẢ LỜI
avatar
Niệm Style Blog

Kéo bài viết này lên 100 Comment đi :v

TRẢ LỜI
avatar
Trường Nguyễn

Cá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

TRẢ LỜI
avatar
Tính Getter

Chà, canh chừng người ta lên blog comment ghê nhỉ :3

TRẢ LỜI
avatar
Trường Nguyễn

Haahaaa rảnh mà =))))

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

cmter 100 có quà ko ta

TRẢ LỜI
avatar
Niệm Style Blog

Sao footer bên phải chừa trống làm gì vậy?

TRẢ LỜI
avatar
Trường Nguyễn

Đư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

TRẢ LỜI
avatar
Trường Nguyễn

Không nhé :v

TRẢ LỜI
avatar
Star Bình

nhét nhạc vào cho chất :v

TRẢ LỜI
avatar
Trường Nguyễn

Nhé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!

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

top comments

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

nhầm 1000 thì sao :v

TRẢ LỜI
avatar
Star Bình

http://www.starbinhit.net/2017/11/them-giong-chi-google-xin-chao-cho-trang-web.html
Nhạc xin chào sao lại phiền :3

TRẢ LỜI
avatar
Trường Nguyễn

Cũng không luôn nhé :v

TRẢ LỜI
avatar
Trường Nguyễn

Hay đấy :v để tí nghịch thử xem ahaha

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

https://dantricdn.com/k:2015/1-rlmnxau-xi-1-1448471527152/chiem-nguong-nguoi-dan-ong-xau-nhat-the-gioi.jpg

TRẢ LỜI
avatar
Trường Nguyễn

https://media.tenor.co/images/1095600804c7b10415ae65df35bbf566/tenor.gif

TRẢ LỜI
avatar
Star Bình

tôi thu gọn lại cho dễ :V https://goo.gl/j8qDms

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

đổi lời ko đc hả [pre]Star Bình[/pre]

TRẢ LỜI
avatar
Trường Nguyễn

Muốn đổi chữ khác, làm sao để copy link vậy??

TRẢ LỜI
avatar
Star Bình

muốn nó kêu tên gì gửi lời thoại đây a làm cho

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

Chà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é !

TRẢ LỜI
avatar
Star Bình

https://goo.gl/rB77rF

TRẢ LỜI
avatar
Trường Nguyễn

https://media.tenor.co/images/065972681bf9bfbb564024333fc9e214/tenor.gif

TRẢ LỜI
avatar
Star Bình

lời thoại đâu làm cho ông

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

https://cdn.worldvectorlogo.com/logos/facebook-like.svg

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

cái đó đăng ký đâu vậy anh

TRẢ LỜI
avatar
Star Bình

@Trường Nguyễn - https://goo.gl/A8Uk7y

TRẢ LỜI
avatar
Star Bình

Cách làm: http://www.starbinhit.net/2017/11/3-cach-don-gian-de-tai-file-phat-am-tren-google-dich.html

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

https://goo.gl/3366s6

TRẢ LỜI
avatar
Star Bình

a định thay cái thông báo ting ting khi inb tới thành ứ, á, ớ :))

TRẢ LỜI
avatar
Trường Nguyễn

Định mệnh =))
https://media.tenor.co/images/aa440153baa6f34405ef831cbf58531c/tenor.gif

TRẢ LỜI
avatar
Star Bình

https://i.imgur.com/S0f5d.gif

TRẢ LỜI
avatar
Trường Nguyễn

Quỳ
https://media.tenor.co/images/6f567ef7cae93ca76de2346f28764ee9/tenor.gif

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

https://goo.gl/RSL5cZ
p/s: bx nay chắc cmt kiểu này quá :v admin chèn thêm âm thanh khi cmt luôn đi :v

TRẢ LỜI
avatar
Trường Nguyễn

Muốn bình loạn bằng âm thanh thì URL phải có đuôi .mp3 mới được.
Mà thêm vào chắc blog loạn hết mất :v

TRẢ LỜI
avatar
Star Bình

k giống chút nào, á hơi lâu, phải thêm ớ ứ nữa mới giống

TRẢ LỜI
avatar
Tính Getter

http://gifimage.net/wp-content/uploads/2017/06/gif-4-2.gif

TRẢ LỜI
avatar
Star Bình

https://38.media.tumblr.com/906cde665f2818b71a6eb4725c92fe69/tumblr_nvnfytsR921tlyjpto1_500.gif

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

https://goo.gl/LtsZxz

TRẢ LỜI
avatar
Star Bình

http://i1.kym-cdn.com/photos/images/newsfeed/000/718/067/1b0.gif

TRẢ LỜI
avatar
Niệm Style Blog

Ơ 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ỜI
avatar
Trường Nguyễn

https://media.tenor.co/images/58da3874fbf792c6682bdbb577052e9d/tenor.gif

TRẢ LỜI
avatar
Việt Hưng

bị lỗi rồi
https://viethungtest.blogspot.com/
Ông giúp tui được không

TRẢ LỜI
avatar
Star Bình

Xóa đoạn css này
<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>

TRẢ LỜI
avatar
Star Bình

.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;
}

TRẢ LỜI
avatar
Trường Nguyễn

Có đọc phần lưu ý trên bài viết không?

TRẢ LỜI
avatar
Star Bình

chưa :#

TRẢ LỜI
avatar
Trường Nguyễn

Chưa thì đọc lại đê.

TRẢ LỜI
avatar
Việt Hưng

Sorry... tại xóa thiếu vì khi tìm popularposts1

TRẢ LỜI
avatar
Nguyễn Văn Vỹ

https://vanvyiit.blogspot.com/
Bác sĩ xem dùm em với huhu

TRẢ LỜI
avatar
Trường Nguyễn

Tìm [tag].PopularPosts .widget-content ul li[/tag] thêm [code]height:40px[/code] nhé

TRẢ LỜI
avatar
Nguyễn Văn Vỹ

nhiều .PopularPosts .widget-content ul li lắm bác sĩ ơi

TRẢ LỜI
avatar
Nguyễn Văn Vỹ

Tui add bác sĩ vào giúp được không @@

TRẢ LỜI
avatar
Trường Nguyễn

Email: truongdz.2069@gmail.com

TRẢ LỜI
avatar
Nguyễn Văn Vỹ

Đã add

TRẢ LỜI
avatar
Trường Nguyễn

Set lên Admin đi.

TRẢ LỜI
avatar
Nguyễn Văn Vỹ

Rồi á bác sĩ

TRẢ LỜI
avatar
Trường Nguyễn

Xong nhé!

TRẢ LỜI
avatar
Nguyễn Văn Vỹ

Ju bác sĩ nhiều :v

TRẢ LỜI
avatar
Nguyễn Quang Sáng

Anh Trường ơi làm sao cho bài viết hiển thị ngoài index được ạ, em lỡ tay xóa hết rồi

TRẢ LỜI
avatar
Trường Nguyễn

Là sao? Xóa hết bài viết hay sao?

TRẢ LỜI
avatar
Nguyễn Quang Sáng

Dạ không có nghĩa là ngoài index không hiển thị một bài viết nào ý

anh qua bên em xem nè: http://sangblog.com

TRẢ LỜI
avatar
Trường Nguyễn

Tìm [tag]#Blog1[/tag] xóa display:none; visibility:hidden đi nhé.

TRẢ LỜI
avatar
Nguyễn Quang Sáng

dạ rồi em cảm ơn ạ

TRẢ LỜI

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.