Tạo widget Popular Post tuyệt đẹp cho Blogspot có số đếm
/ lúc / 131 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!

131 nhận xét:

Dii Nô nói...

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

Trường Nguyễn ­ nói...

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

Dii Nô nói...

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

Trường Nguyễn ­ nói...

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

Dii Nô nói...

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

Trường Nguyễn ­ nói...

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

Dii Nô nói...

Wow, phong cach va ngau qua

Trường Nguyễn ­ nói...

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

Star Cường IT ­ nói...

Chất quá

Duy Ripper nói...

Chất quá

Trường Nguyễn ­ nói...

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

Trường Nguyễn ­ nói...

Chất quá chất :d

Trọng Khanh Nguyễn nói...

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

Trường Nguyễn ­ nói...

Haha nhanh quá, nảy vào linkthuthuat không thấy bài viết, tí F5 lại thấy liền :))

Tính Getter nói...

Trường đẹp trai :v

Nguyễn Đức Huy nói...

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

Trường Nguyễn ­ nói...

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

Trường Nguyễn ­ nói...

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

Tính Getter nói...

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

Trường Nguyễn ­ nói...

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

Tính Getter nói...

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

Trường Nguyễn ­ nói...

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

Nguyễn Đức Huy nói...

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

Trường Nguyễn ­ nói...

Code gì hửm em!?

Nguyễn Đức Huy nói...

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

Star Cường IT ­ nói...

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

Nguyễn Đức Huy nói...

hihi :v

Trường Nguyễn ­ nói...

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

Nguyễn Đức Huy nói...

oke a <3

Trọng Khanh Nguyễn nói...

:v :v

Trọng Khanh Nguyễn nói...

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

Trường Nguyễn ­ nói...

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

Trường Nguyễn ­ nói...

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

Trọng Khanh Nguyễn nói...

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

Trường Nguyễn ­ nói...

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

Trọng Khanh Nguyễn nói...

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

Trường Nguyễn ­ nói...

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

Trọng Khanh Nguyễn nói...

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

Trường Nguyễn ­ nói...

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

Trọng Khanh Nguyễn nói...

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

Trọng Khanh Nguyễn nói...

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ường Nguyễn ­ nói...

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

Trọng Khanh Nguyễn nói...

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

Trường Nguyễn ­ nói...

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ọng Khanh Nguyễn nói...

e biết mà :v

Trường Nguyễn ­ nói...

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

Trọng Khanh Nguyễn nói...

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






















Trọng Khanh Nguyễn nói...

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

Trường Nguyễn ­ nói...

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

Nguyễn Đức Huy nói...

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

Văn Huy SYSTEM nói...

. Hay <3

Văn Huy SYSTEM nói...

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

Star Cường IT ­ nói...

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ường Nguyễn ­ nói...

Ok :))

Trường Nguyễn ­ nói...

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

Huỳnh Hoài Bảo nói...

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ường Nguyễn ­ nói...

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

Tính Getter nói...

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

Nguyễn Đức Huy nói...

vào comment nè :v

Trường Nguyễn ­ nói...

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

SHuyTarUT nói...

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

Lý Văn Bảo nói...

Hay ^^

Trường Nguyễn nói...

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

Trường Nguyễn nói...

Cảm ơn bạn ;)

Niệm Style Blog nói...

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

Trường Nguyễn nói...

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

Tính Getter nói...

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

Trường Nguyễn nói...

Haahaaa rảnh mà =))))

Trọng Khanh Nguyễn nói...

cmter 100 có quà ko ta

Niệm Style Blog nói...

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

Trường Nguyễn nói...

Đư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ường Nguyễn nói...

Không nhé :v

Star Bình nói...

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

Trường Nguyễn nói...

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ọng Khanh Nguyễn nói...

top comments

Trọng Khanh Nguyễn nói...

nhầm 1000 thì sao :v

Star Bình nói...

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ường Nguyễn nói...

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

Trường Nguyễn nói...

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

Trọng Khanh Nguyễn nói...

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

Trường Nguyễn nói...

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

Star Bình nói...

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

Trọng Khanh Nguyễn nói...

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

Trường Nguyễn nói...

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

Star Bình nói...

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

Trọng Khanh Nguyễn nói...

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

Star Bình nói...

https://goo.gl/rB77rF

Trường Nguyễn nói...

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

Star Bình nói...

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

Trọng Khanh Nguyễn nói...

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

Trọng Khanh Nguyễn nói...

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

Star Bình nói...

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

Star Bình nói...

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

Trọng Khanh Nguyễn nói...

https://goo.gl/3366s6

Star Bình nói...

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

Trường Nguyễn nói...

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

Star Bình nói...

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

Trường Nguyễn nói...

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

Trọng Khanh Nguyễn nói...

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ường Nguyễn nói...

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

Star Bình nói...

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

Tính Getter nói...

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

Star Bình nói...

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

Trọng Khanh Nguyễn nói...

https://goo.gl/LtsZxz

Star Bình nói...

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

Niệm Style Blog nói...

Ơ 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ường Nguyễn nói...

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

Việt Hưng nói...

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

Star Bình nói...

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>

Star Bình nói...

.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ường Nguyễn nói...

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

Star Bình nói...

chưa :#

Trường Nguyễn nói...

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

Việt Hưng nói...

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

Nguyễn Văn Vỹ nói...

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

Trường Nguyễn nói...

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

Nguyễn Văn Vỹ nói...

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

Nguyễn Văn Vỹ nói...

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

Trường Nguyễn nói...

Email: truongdz.2069@gmail.com

Nguyễn Văn Vỹ nói...

Đã add

Trường Nguyễn nói...

Set lên Admin đi.

Nguyễn Văn Vỹ nói...

Rồi á bác sĩ

Trường Nguyễn nói...

Xong nhé!

Nguyễn Văn Vỹ nói...

Ju bác sĩ nhiều :v

Nguyễn Quang Sáng nói...

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ường Nguyễn nói...

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

Nguyễn Quang Sáng nói...

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ường Nguyễn nói...

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

Nguyễn Quang Sáng nói...

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

Star Đức IT nói...

=)) hay

Trường Nguyễn nói...

(y) /=clap

Đăng nhận xét