Tạo Dark mode (chế độ tối) cho blog/website

Cùng theo trào lưu Dark mode thì bài viết này sẽ giúp bạn đưa vào blog/website của mình nút bật tắt chế độ tối. Không những bật tắt bằng tay mà còn có chế độ tự động bật tắt theo giờ nhất định. Tính năng tự động này hiện tại mình chưa thấy blog/website nào có kể cả Youtube hay Twitter. Ngoài ra thì những thiết lập này được lưu lại trên trình duyệt và khi người dùng truy cập lần sau thì chế độ tối này vẫn giữ nguyên như trước khi tắt trình duyệt. Có nghĩa người dùng đang để chế tối và thủ công thì lần sau bật trình duyệt lên vẫn là chế độ tối đó.






Chọn giờ chuyển sang chế độ tối (mặc định là từ 22h đến 7h) sau đó nhấn Get code.

From to



Chèn đoạn mã trên vào sau thẻ <body>.

Chèn đoạn mã dưới đây vào vị trí muốn hiển thị nút bật đóng chế độ tối:
<div class='dark-mode'>
 <button class='toggle' onclick='toggle()' type='button'/>
 <button class='mode' onclick='mode()' type='button'/>
</div>

Bước cuối cùng, cũng là bước tốn thời gian nhất: thiết kế giao diện tối cho blog/website. Vì là màu sắc nên ta quan tâm đến màu nền (background-color), màu chữ (color), màu viền (border-color)... Giả sử blog/website có class header khai báo như sau:
.header{
background-color:#ddd;
color:#000;
}

Thì chúng ta sẽ khai báo thêm class dark với màu nền và màu chữ có xu hướng ngược màu ban đầu như sau:
.header{
background-color:#ddd;
color:#000;
}
.dark .header{
background-color:#444;
color:#eee;
}

Sau khi thực hiện thành công thì giờ đây blog/website của bạn có tới 2 giao diện để "đổi gió", và hơn cả là nó dịu mắt khi ở chế độ tối buổi đêm.

Hướng dẫn thủ thuật Blogger, Blogspot

147

Nhận xét
1

Giống iOS 13 quá :D

Reply Xóa nhận xét
6

E cũng Fan của Apple bác ạ. Mua ko trượt phát nào :D
Cơ mà hôm qua nghịch dại nâng lên iOS 13 beta xong lỗi tùm lum, hôm nay hạ xuống 12.3.1 mất gần hết dữ liệu :(

Reply Xóa nhận xét
7

Mình chỉ chờ bản chính thức thôi. Qua giai đoạn thích cập nhật phiên bản mới rồi. Chắc dấu hiệu tuổi già :p

Reply Xóa nhận xét
2

Nhận xét này đã bị tác giả xóa.

Reply
3

Nhận xét này đã bị tác giả xóa.

Reply
5

Một cái thủ công, một cái auto mà

Reply Xóa nhận xét
9

dùng cho wp chắc ổn anh nhỉ, để test thử vậy

Reply Xóa nhận xét
10

Cho nền tảng nào cũng được thôi.

Reply Xóa nhận xét
11

Đang làm theo bác thủ thuật này nhưng không đổi được cái màu khung comments bác ơi
https://1.bp.blogspot.com/-Lw2KFXNFOJg/XQahDZDcL8I/AAAAAAAAFCI/-4kiivf5G_sDaoLKYQ_BRURStUxaAJaoACLcBGAs/s320/trucblog%2B%25282%2529.png

Reply Xóa nhận xét
12

Khung đó là iframe, mình sẽ có một bài hướng dẫn can thiệp vào css của nó để có background trong suốt

Reply Xóa nhận xét
24

thử chèn vào blog wp ko chạy, buồn quá

Reply Xóa nhận xét
25

Nó thuần HTML, JS thôi mà nên k phân biệt nền tảng nào. Cho mình xem blog bạn chèn

Xóa nhận xét
26

em cài cho blog https://totnhatvina.com/

Xóa nhận xét
27

JS vẫn hoạt động. Class dark bạn khai báo thêm trong css hay là có sẵn từ trước.

Xóa nhận xét
14

Làm thế nào để cho dark-mode center đc thớt ơi

Reply Xóa nhận xét
15

.dark-mode{margin:0 auto}

Reply Xóa nhận xét
16

Blog e để phối lại màu cho ok mất time mà khó vđ. Thank bác

Mà ko biết sao cái nút bên e tắt bật nó ko đc mượt như blog bác nhỉ???

Reply Xóa nhận xét
17

Bác đang dùng transition: all .3s ease cho button nên có hiệu ứng vậy. Còn code này em chỉ thêm hiệu ứng chuyển động sang trái phải của button auto thôi.

Reply Xóa nhận xét
21

Test phân cấp

Reply Xóa nhận xét
22

Phân cấp hay vđ, share cho ae đi thớt ơi

Reply Xóa nhận xét
19

Nhận xét này đã bị tác giả xóa.

Reply
20

Hình như mình ko làm j thì nút bên phải buổi tối nó cũng tự động bật dark mode? Và nút đấy thừa?

Reply Xóa nhận xét
23

Đó là nút auto dark mode. Khi được bật thì tự động đến giờ đặt trước sẽ tự chuyển. Còn khi bật thủ công dark mode bên trái thì nút auto bên phải tự tắt và dark hay light sẽ tự lưu cho tới khi người dùng tự thay đổi tiếp

Reply Xóa nhận xét
28

Nhận xét này đã bị tác giả xóa.

Reply
29

https://www.nguyenanhduy.com/p/binh-loan-moi.html

Bác Duy ơi làm thế nào để nó hiểu đc các dấu xuống dòng trong comments?

Reply Xóa nhận xét
30

Trong widget này thì những tag như a, i, br... đều dc loại bỏ nên không có xuống dòng. Widget nên k cần

Reply Xóa nhận xét
31

Hừm, bác có thể cải tiến thêm cho e br ko, để e làm page :D

Reply Xóa nhận xét
32

Nếu k xoá tag <br/> đi thì khi comment dài và tới giới hạn ngắt lại rơi vào đúng tag này thành <br... chẳng hạn, nó mất thẻ đóng > trông rất “ngố”

Reply Xóa nhận xét
33

Widget "Nhận xét mới" trước đẹp hơn bây giờ bác ạ :D

Reply Xóa nhận xét
34

Avatar nó nổi thành ra tách rời widget, sai với triết lý thiết kế :D

Reply Xóa nhận xét
35

Bác có định edit ko ạ? :D

Reply Xóa nhận xét
36

Edit cho hết nổi rồi mà

Reply Xóa nhận xét
37

Bác có thể chia sẻ cách đánh số thứ tự comment được không ạ?

Reply Xóa nhận xét
38

Bạn xem ở đây https://duy-pham.blogspot.com/2012/05/danh-so-thu-tu-cho-nhan-xet.html

Reply Xóa nhận xét
41

Cách này không áp dụng được nữa bạn ạ.

Reply Xóa nhận xét
42

Là do Blogger thay đổi tên id của comment reply nên code trên không còn hoạt động đúng nữa.

Reply Xóa nhận xét
39

Thành công, tôi đã thực hiện nó trên blog của mình Aurelia

Reply Xóa nhận xét
Nặc danh 7/8/19 11:17
40

Cái này áp dụng cho wordpress thì sao bạn

Reply Xóa nhận xét
43

Nhận xét này đã bị tác giả xóa.

Reply
44

Đã làm xong. Cảm ơn bác Duy :)

Ps: nếu có cách thay đổi luôn màu của thanh địa chỉ của trình duyệt khi bật dark-mode thì bác chỉ luôn với nhá. Chúc bác vui vẻ :)

Reply Xóa nhận xét
45

Bác chỉ can thiệp dark mode của trình duyệt khi vào cài đặt trình duyệt hoặc cài đặt hệ thống, chứ js ở trang web k can thiệp đâu :)

Reply Xóa nhận xét
46

Ý em là như này:
Trên trình duyệt của di động đổi màu Bar theme
<meta content='#CC3278' name='theme-color'/>
<meta content='#CC3278' name='msapplication-navbutton-color'/>
<meta content='#CC3278' name='apple-mobile-web-app-status-bar-style'/>

Mình muốn hỏi liệu có cách nào để làm đổi màu luôn khi dùng thủ thuật dark mode này ? Ví dụ có lệnh điều kiện nào cho cái dark mode làm Bar theme?

Cảm ơn bác. Hihi :)

Reply Xóa nhận xét
47

Em k biết vụ bar theme trên trình duyệt di động này. Nếu dùng tag meta kia thay được thì thêm code cho dark mode chuyển chế độ sẽ đổi màu bar theme luôn được đó bác. Để lúc nào em thêm code nhé :)

Reply Xóa nhận xét
48

Ok. Hóng bác

Ps: nhớ hồi trước bác Noct có cái thanh đổi màu vui mắt lắm. Bạn nào còn thích thanh đổi màu ấy chịu khó "chế" từ thủ thuật này cũng hay

Reply Xóa nhận xét
49

Thử trên iPhone mà safari không thay đổi gì cả bác. Code meta kia giờ cũ rồi hay sao? Không dùng Android nên k biết trên Chrome thế nào.

Xóa nhận xét
50

Trên Android cũng được, bác cứ chia sẻ đê :D

Reply Xóa nhận xét
51

Hình như nhà Táo không cho sửa status bar nưa, thử hoài mà chẳng được.

Mình làm theo:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Reply Xóa nhận xét
52

Có cái thủ thuật này khi chuyển màu nó chuyển luôn cả ô địa chỉ trình duyệt (trên mobile), gửi đến bác https://www.duetds.com/

PS: Em chưa biết chuyển sang blogspot bằng cách nào

Reply Xóa nhận xét
53

Em xem ở đây https://caniuse.com/#feat=meta-theme-color thì thấy không hỗ trợ safari trên ios kia :(

Reply Xóa nhận xét
54

Chỉ cần trên Android thôi cũng được mà bác. Hihi.
Bác sớm update nha :)

Reply Xóa nhận xét
55

Vừa muộn máy Android test thử thấy khá hay. Bác thêm code này vào phần tag head

<meta content='#ddd' name='theme-color'/>

Rồi thay dùng đoạn js sau:

function auto(){document.body.classList.add('auto');if(new Date().getHours()>21||new Date().getHours()<7){document.body.classList.add('dark');localStorage.setItem('668037dark','true');document.querySelector('meta[name=theme-color]').setAttribute('content','#000')}else{document.body.classList.remove('dark');localStorage.setItem('668037dark','false');document.querySelector('meta[name=theme-color]').setAttribute('content','#ddd')}}function dark(){if(localStorage.getItem('668037dark')=='true'){document.body.classList.add('dark');document.querySelector('meta[name=theme-color]').setAttribute('content','#000')}else{document.body.classList.remove('dark');document.querySelector('meta[name=theme-color]').setAttribute('content','#ddd')}}if(localStorage.getItem('668037auto')=='true'){auto()}else{localStorage.getItem('668037dark')==null?auto():dark()}function toggle(){localStorage.setItem('668037auto',localStorage.getItem('668037auto')=='true'?'false':'true');localStorage.getItem('668037auto')=='true'?auto():document.body.classList.remove('auto')}function mode(){document.body.classList.remove('auto');localStorage.removeItem('668037auto');localStorage.setItem('668037dark',localStorage.getItem('668037dark')=='true'?'false':'true');dark()}

Reply Xóa nhận xét
56

Đã thực hiện xong, đẹp tuyệt. Cảm ơn bác :)

Reply Xóa nhận xét
57

Hi bác Duy,
Bác giúp em tí tì ti nhé
Vấn đề 1: Tiêu đề bài viết đã đăng ở dạng VIẾT HOA giờ muốn chuyển sang dạng capitalize
Câu hỏi: Có CSS hay js nào để tiêu đề chuyển sang capitalize không bác
PS: dùng text-transform: capitalize nó không chuyển.

Vấn đề 2: Có cách nào khi cuộn trang web nó chạy theo chiều ngang không bác? Em định làm ở homepage cho nó khác người :D

Cảm ơn bác

Reply Xóa nhận xét
58

1. Bác khai báo css kiểu này:


.calss-text{text-transform:lowercase}
.calss-text::first-letter{text-transform:uppercase}


2. Cuộn trang ngang khó chịu lắm bác ơi :(

Reply Xóa nhận xét
59

Thật cảm ơn vì anh vẫn còn giữ lại trang blog này. Cảm ơn vì anh vẫn chia sẻ.

Reply Xóa nhận xét
60

Vì nó viết về thủ thuật Blogger nên chỉ khi nào Blogger dừng thì nó mới nghỉ :D

Reply Xóa nhận xét
61

Mở tiệc mừng tên miền mới đê :D

Reply Xóa nhận xét
62

Được bạn Huy tặng bác ơi :D

Reply Xóa nhận xét
63

Cảm ơn bạn Duy đã chia sẻ

Reply Xóa nhận xét
64

Hi bác Duy và anh em,
Mình sử dụng 1 font lạ cho web tuy nhiên có 1 điều khó hiểu đó là nét chữ ở trang index và trang tĩnh thường đậm nét hơn so với trang item cho dù CSS weit-font như nhau.

Ngay cả khi dùng GoogleFont cũng vậy.

Nếu anh em biết cách khắc phục thì chỉ giúp mình vớ nhá.

Cảm ơn anh em nhiều

Ps: xin phép Duy cho mình đăng ở đây câu hỏi chẳng liên quan tới bài viết. Vì ở đây mới có anh em liên quan tới Blogspot và chăm chỉ bàn tán

Reply Xóa nhận xét
65

Sắp đc năm r, bài mới đi bác

Reply Xóa nhận xét
66

H mới để ý tên miền mới

Reply Xóa nhận xét
Nặc danh 10/4/20 07:48
68

Ad cho mk hỏi làm sao để xoá dấu gạch đứt trong khung cmt vs cả làm sao để font chữ khi mk vào blog bằng điện thoại dùng chế độ máy tính mà chữ nó ko to lên, blog của ad chữ nó ko to lên còn các theme khác hầu hết đều bị

Reply Xóa nhận xét
69

Dấu gạch đứt đó là check lỗi chính tả của trình duyệt, bạn có thể tắt nó ở cài đặt của trình duyệt, vào mục ngôn ngữ.

Để chữ không bị phóng to thì bạn cần có thuộc tính initial-scale=1. Nó thường được khai báo chung như sau <meta content='width=device-width,initial-scale=1' name='viewport'/>

Reply Xóa nhận xét
Nặc danh 12/4/20 05:50
70

Cả 2 vấn đề mk hỏi đều ko đc. Khung comment đó ko pk do trình duyệt, nhiều blog khung cmt ko có, còn cái chữ thì blog mk có sẵn thuộc tính đó r nhưng nó vẫn bị to

Reply Xóa nhận xét
77

Bạn đưa link blog lên đây mình xem lỗi.

Reply Xóa nhận xét
Nặc danh 18/4/20 21:23
83

Nhờ ad, có cách nào ẩn luôn thanh cuộn trong khung cmt ko ad
Link blog: https://www.sinhhocsquad.xyz/

Reply Xóa nhận xét
84

Bạn thử thêm vào css
#commentBodyField{overflow: hidden;}

Xóa nhận xét
Nặc danh 12/4/20 05:55
71

Cho mk hỏi thêm 1 điều nữa là làm sao để ở phần blog1, bài trên trang chủ chỉ hiển thị bài viết của 1 số nhãn nhất định v ad

Reply Xóa nhận xét
72

Nhận xét này đã bị tác giả xóa.

Reply
Nặc danh 13/4/20 13:44
73

Mk thêm vào thì ở trang bài viết nó cũng mất luôn

Reply Xóa nhận xét
74

Nhận xét này đã bị tác giả xóa.

Nặc danh 14/4/20 03:36
76

nó ẩn nhưng phân trang sẽ ko đủ bài viết. Ví dụ cài phân trang 7 bài, 2 bài ko thuộc mấy nhãn đó thì nó ko đẩy bài phía sau lên mà chỉ hiện có 5 bài thôi

Xóa nhận xét
75

Nhận xét này đã bị tác giả xóa.

Reply
78

Trong feeds comments sẽ có id của từng bài viết comment, tiếp tục gọi feed có dạng https://www.blogger.com/feeds/BLOG_ID/posts/default/POST_ID, trong feed này sẽ có tiêu đề bài viết.

Reply Xóa nhận xét
79

Nhận xét này đã bị tác giả xóa.

Reply
80

Nhận xét này đã bị tác giả xóa.

Reply
81

Nhận xét này đã bị tác giả xóa.

Reply
82

Bạn có thể nhập địa chỉ blog vào để test mà.

Reply Xóa nhận xét
85

Nhận xét này đã bị tác giả xóa.

Reply
86

Bác Duy có biết những trang nào liệt kê ra các code, các thẻ dữ liệu trong blogger không.

Reply Xóa nhận xét
87

Mình hay xem trong temp Blogger mẫu. Bạn có thể xem thêm ở đây cho chi tiết https://support.google.com/blogger/answer/47270?hl=en

Reply Xóa nhận xét
88

Cảm ơn nhe, trang đó mình biết rồi. Thiết nghĩ Blogger nên công khai mấy cái này từ A đến Z.

Reply Xóa nhận xét
89

E test thử trên một số máy mới chưa vào bao giờ vào ban ngày nhưng ra giao diện đêm bác ạ

Có cách nào để khi chưa có cache mà trình duyệt nó nhận đc đúng ngày đêm ko bác Duy?

Reply Xóa nhận xét
90

Ví dụ cái

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.duypham.net&tab=desktop

Nó đag nhận theme mặc định của bác ban đầu là dark

Reply Xóa nhận xét
91

Mình xài FF, Chrome, vào blog bác Duy lúc nào cũng skin sáng hết. Mặc dù chế độ auto ON hay OFF.
Hiện giờ là 20h00.

Reply Xóa nhận xét
93

Bạn bật auto rồi qua 22h nó sẽ tối

Reply Xóa nhận xét
92

Ngày đêm dựa vào giờ hệ thống trên máy của trình duyệt, như blog em thì từ 22h đến 7h là giao diện tối. Bác xem lúc test giờ trên máy của trình duyệt là mấy giờ. Có thể chương trình test của bác trình duyệt đang chạy trên máy ảo mà giờ của nó đang là buổi đêm, bên Mỹ chẳng hạn.

Reply Xóa nhận xét
94

Bác Duy này, bác có nắm được cấu trúc template mới b:templateVersion='1.3.0' của Blogger không.
Mình đang muốn tìm hiểu mà còn mù mờ quá.

Reply Xóa nhận xét
95

Từ bản 2 mình ít tìm hiểu về temp nữa. Nhưng mình thấy các câu lệnh cũng k thêm nhiều lắm, một số lệnh được sửa lại ngắn gọn hơn.

Reply Xóa nhận xét
96

Đang làm theo bác thủ thuật này nhưng không đổi được cái màu khung comments bác ơi
https://1.bp.blogspot.com/-Lw2KFXNFOJg/XQahDZDcL8I/AAAAAAAAFCI/-4kiivf5G_sDaoLKYQ_BRURStUxaAJaoACLcBGAs/s320/trucblog%2B%25282%2529.png

Reply Xóa nhận xét
97

Bạn thêm <Variable default="transparent" description="Background color" name="body.background.color" type="color"/> vào trong <Group description="Body"> để nền khung comments trong suốt nhé

Reply Xóa nhận xét
98

Nhận xét này đã bị tác giả xóa.

Reply
99

Vậy bạn tìm đến body.background.color và thay giá trị default là transparent

Reply Xóa nhận xét
101

Chào bác Duy,
web của mình các <div id=... và các <class=... lung tung beng cả
Duy cho mình hỏi thứ tự id và class nên sắp xếp ra sao?
PS: đừng xúi mình hỏi Google vì mình có đọc nhưng chẳng hiểu gì

Reply Xóa nhận xét
102

Mất đêm qua và tới giờ mới tạm ổn. Vui ghe. Nhờ lò mò làm mà hiểu ra vài thứ.
PS: - Xin được dùng mấy ý tưởng trong template của bác Duy :D, công nhận nhanh gọn và....thông minh :D

- Chưa test các kiểu

Reply Xóa nhận xét
103

Thường thì em sắp xếp theo thứ tự cái nào xuất hiện trước thì đưa lên trước. Chọn class khi nó xuất hiện nhiều lần, chọn id nếu nó chỉ xuất hiện 1 lần. Thuộc tính bên trong mỗi class, id cũng sắp xếp theo thứ tự...

Nói chung thì nó là phong cách riêng mỗi người nữa, làm nhiều thì tự nhiên sẽ ra cách mà mình cảm thấy thuận tiện và dễ bảo dưỡng sau này nữa.

Ngoài ra có cả cách đặt tên class, id theo quy luật để phù hợp với làm việc team. Em thì đang đặt theo ngẫu hứng :D

Reply Xóa nhận xét
104

Cho mình hỏi cái này, comment form của mình báo lỗi, không biết tại sao.
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>


Khi chạy ra là:

<a href="https://www.blogger.com/comment-iframe.g?blogID=3805857869603399852&postID=6458224298027819007&skin=contempo" id="comment-editor-src"></a>
<iframe allowtransparency="true" class="blogger-iframe-colorize blogger-comment-from-post" id="comment-editor" name="comment-editor" src="https://www.blogger.com/comment-iframe.g?blogID=3805857869603399852&postID=6458224298027819007&skin=contempo" width="100%" height="410" frameborder="0"></iframe>

Mình thấy lỗi là do &skin=contempo, nhưng mà các mẫu template cũ vẫn chạy bình thường???.

Hiện tại đang chữa cháy bằng: expr:src='"https://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&postID=" + data:post.id'

Không biết lỗi ở đâu nữa, hi vọng bác Duy chỉ cho.

Reply Xóa nhận xét
105

Ăn tết vẫn chăm thế bác :D

Reply Xóa nhận xét
111

Lười thấy mồ, giờ mới lết vào xem này!

Reply Xóa nhận xét
106

Bạn dùng code này cho nó tự động <a expr:href='data:post.commentFormIframeSrc + &quot;&amp;skin=contempo&quot;' id='comment-editor-src'/>

Reply Xóa nhận xét
113

Ầy, vẫn k được rồi.
Nếu mở link https://www.blogger.com/comment-iframe.g?blogID=3805857869603399852&postID=6458224298027819007 trong một thẻ riêng biệt thì chạy bình thường.
Mà link https://www.blogger.com/comment-iframe.g?blogID=3805857869603399852&postID=6458224298027819007&skin=contempo mở riêng 1 tap thì báo lỗi.
Tức là hễ có thêm &skin=contempo thì blogger báo lỗi.

Reply Xóa nhận xét
114

Bạn thêm b:layoutsVersion='3' vào sau tag <html nhé

Reply Xóa nhận xét
117

Bạn phải thêm các thẻ khai báo biển CSS của theme đó vì 1 số thành phần của form comment chịu ảnh hưởng bởi mấy thẻ đó nên nếu thiếu sẽ sinh ra lỗi ;)

Xóa nhận xét
118

Nhận xét này đã bị tác giả xóa.

Reply
119

Ví dụ thẻ này định nghĩa màu sắc cho cái dấu tích (Thông báo cho tôi) ở khung viết bình luận và không thể thiếu nếu muốn sử dụng form comment mới, đại loại khúc mắc của bác nằm ở chỗ đó ;)

<Variable name="posts.icons.color" description="Màu icon" type="color" default="$(body.text.color)" value="$(body.text.color)"/>

Reply Xóa nhận xét
107

Lúc nào rảnh bác hướng dẫn anh em cái phần đổi màu sắc blog như của http://noct-land.blogspot.com/ đi ạ :D

Reply Xóa nhận xét
108

Sao k comment dc nhỉ

Reply Xóa nhận xét
109

Tết đến giờ ít vào blog :D Mình sẽ thử phát triển từ code này xem. Noct mất tích hẳn luôn nhỉ

Reply Xóa nhận xét
110

Vâng bác, blog của bác Noct trước cũng hay :D

Reply Xóa nhận xét
116

Nhận xét này đã bị tác giả xóa.

Reply
120

Hi bác Duy,
Em có câu hỏi này ở ngoài vấn đề của bài, và mong bác giúp 1-2-3 tí :D

Đó là có 1 vài trang web dù mình có chỉnh kích thước chữ to-nhỏ trong setting điện thoại nhưng web đó vẫn hiển thị đúng kích thước chữ đó. VD như trang medium.com, tinhte.vn hay colorme.vn/blog

Bác chỉ giúp em cách nào thực hiện như vậy với nha. Cảm ơn bác nhiều :)

Reply Xóa nhận xét
121

thuộc tính font-size bác chọn đơn vị cố định là px thì nó sẽ luôn có size cố định

Reply Xóa nhận xét
122

Nhận xét này đã bị tác giả xóa.

Reply
123

Hi bác,
Bác cho em hỏi 1-2-3 tí

Trong Google search console ở mục "Chỉ số Thiết yếu về Trang web" nó báo "Vấn đề CLS" cao quá.
Nguyên nhân do em chỉnh CSS loạn xà ngầu nên nó báo lỗi (em đoán vậy thôi, vì lúc trước nó ko báo gì cả, sau này chỉnh sửa thì nó báo)

Giờ bản xml cũ em ko lưu, mà chẳng nhớ đã sửa gì nữa.

Bác có kinh nghiệm gì thì cứu em với, em sửa từ 21-7 đến giờ mà nó cứ trơ trơ ra :D

Cảm ơn bác

PS: web của em đây http://www.ngonluanho.net

Reply Xóa nhận xét
124

ô hỏi hơi bị nhiều đấy nhé

Reply Xóa nhận xét
125

Dạo này trong Google search console đỏ quá trời dù trên Lighthouse cho điểm đẹp quá trời. Chán ko muốn sửa.

Thực ra là sửa ko nổi :P

Reply Xóa nhận xét
126

Kệ đi bác ơi, để cho tự nhiên đi, mấy năm nay e k quan tâm SEO gì nữa cả

Reply Xóa nhận xét
127

Thực ra có quan tâm cũng khó làm được gì, vì SEO vẫn mãi là 1 bí ẩn, mọi thứ bàn tán về SEO chỉ là nhận định vu vơ. Nội dung mới quan trọng nhất.

PS: em sửa cho đạt điểm cao chỉ vì dạo này rảnh quá chẳng có gì để nghịch :D

Reply Xóa nhận xét
128

Anh viết bài chia sẻ bung cái <data:post.commentHtml/> ra với thêm nhiều phân cấp cho bình luận đi anh.

Reply Xóa nhận xét
129

Sao theme của bác vào cái là nó load, nhận luôn light hoặc dark; mà của e phải đợi load 2 3 giây mới ra nhỉ

Reply Xóa nhận xét
130

Bác cho js vào ngay sau thẻ body để nó được chạy trước nhé

Reply Xóa nhận xét
131

Ngon luôn bác ạ, thanks!

Reply Xóa nhận xét
132

Nút tự động hoạt động chưa chuẩn:

Người dùng vào blog lần đầu trong khoảng 6:00 - 17:59 (giờ máy tính) nút tự động bật sang phải nền xanh, light theme, tiếp tục vào trang khác, nút tự động bật sang trái nền xám, light theme OK. Sau đó người dùng quay lại trong khoảng 18:00 - 5:59 (không xóa cookie) nút tự động vẫn bật sang trái nền xám, light theme không OK vì không theo ý muốn cài đặt ban đầu của chủ blog (6:00 - 17:59 light theme, 18:00 - 5:59 dark theme).

Nói tóm lại, góp ý của em là bác tùy chỉnh sao cho người dùng vào blog không cần quan tâm đến dark mode vì nó sẽ tự động chọn light/dark theme theo ý muốn cài đặt ban đầu của chủ blog. Hiện tại nút tự động KHÔNG GIỮ CHẾ ĐỘ TỰ ĐỘNG BẬT (AUTO ON) mà phải bật thủ công.

Trang này đã sửa lại e thấy ok:
https://yangmeiguo.blogspot.com

Reply Xóa nhận xét
133

Ok bác, thuật toán bị thiếu sót. Phải khi bấm sang trang thứ 2 và người dùng chưa đụng đến nút auto thì mới xuất hiện lỗi. Bác tìm ra lỗi này e cũng phục đấy vì nó ít xuất hiện. Hiện tại e đã fix lại rồi, thank bác.

Reply Xóa nhận xét
135

Bác ở trang đấy báo e mới biết đó :d

Reply Xóa nhận xét
136

Lỗi này xuất hiện từ đầu và khá lâu rồi, tinh ý và có thời gian kiểm tra sẽ nhận ra.

Reply Xóa nhận xét
134

Cái trang kia lấy code trên temp của e mà, cũng chẳng ghi nguồn gì cả :(

Reply Xóa nhận xét
137

Cho mình có ý kiến
Mình mới quay lại chơi blog nghiệp dư từ 2020 chủ yếu giải trí, có chút hiểu biết cơ bản về CSS & HTML, blog mình chủ yếu mình vào xem. Mình vừa nhận xét trên một trang chia sẻ thủ thuật khác: "Từ khi chơi blog mình tìm hiểu CSS & HTML cơ bản trên trang W3Schools Online Web Tutorials, tin tưởng ít nhất hai blogger Việt có khả năng tự viết code là Duy Pham & Hung1001™ | Thủ thuật quản lý chuyên sâu,..."

Mình nhớ sử dụng và tùy chỉnh code dark mode này cũng khá lâu rồi bằng cách xem nguồn (trong nguồn không ghi nguồn) vì theo suy nghĩ của mình thường thì chủ blog không sử dụng hoặc không sử dụng hoàn toàn code được chia sẻ hay giấu đi một ít phần hay ho. Đó là sai sót chủ quan của mình và tâm lý chung của nhiều người. Blog của mình không phải trang chia sẻ thủ thuật, mình không nhận vơ code của người khác. Bạn có đồng ý ghi chú phần code bạn vừa thêm vào dựa trên góp ý, ý tưởng nhỏ trên blog của mình. Nếu không (hiện tại là không), thì mình đang sử dụng lối ngụy biện hai sai thành một đúng.

Trích dẫn dưới đây sẽ có hai luồng suy nghĩ theo hướng tích cực hoặc tiêu cực:
"Tính năng tự động này hiện tại mình chưa thấy blog/website nào có kể cả Youtube hay Twitter."

Mình có thể không cần phản hồi nhận xét của bạn, không sao cả. Nhưng dù thế nào đi nữa, cảm ơn bạn dẫu muộn màng.
Tạm biệt,
YMG

Reply Xóa nhận xét
138

Mình phải đọc đi đọc lại mấy lần để hiểu rõ hơn ý bạn (k rõ đã hiểu đúng chưa?)

"Mình nhớ sử dụng và tùy chỉnh code dark mode này cũng khá lâu rồi bằng cách xem nguồn (trong nguồn không ghi nguồn) vì theo suy nghĩ của mình thường thì chủ blog không sử dụng hoặc không sử dụng hoàn toàn code được chia sẻ hay giấu đi một ít phần hay ho."
Chắc bạn xem ở trang nào đó lấy từ blog mình. Còn việc bạn suy nghĩ chủ blog không sử dụng code được chia sẻ thì không đúng với mình. Code mình chia sẻ thường phải test trên nhiều kiểu blog nên code nó đôi khi khá lớn, nếu dùng nó cho blog của mình thì mình sẽ loại bỏ những phần không cần chạy trên blog của mình để code ngắn nhất có thể.

"Bạn có đồng ý ghi chú phần code bạn vừa thêm vào dựa trên góp ý, ý tưởng nhỏ trên blog của mình. Nếu không (hiện tại là không), thì mình đang sử dụng lối ngụy biện hai sai thành một đúng."
Khi thấy NAD báo lỗi thì mình chỉ cố đọc để hiểu lỗi đó là gì, mình tưởng NAD giới thiệu một blog có thủ thuật dark mode khác k bị lỗi nên chưa vào blog của bạn. Để hình dung ra lỗi mình đã phải tạo 2 page html link tới nhau rồi khi bấm sang page 2 thì mới biết được lỗi đó. Fix lỗi xong, rep lại NAD mới qua blog bạn xem thì thấy code giống hệt blog mình vì là auto theo trình duyệt. Đoạn code bạn fix nó thừa và dài quá.

"Trích dẫn dưới đây sẽ có hai luồng suy nghĩ theo hướng tích cực hoặc tiêu cực:
"Tính năng tự động này hiện tại mình chưa thấy blog/website nào có kể cả Youtube hay Twitter.""

Đoạn này thì mình k hiểu lắm? Thời điểm mình viết code dark mode này là dựa theo hoạt động auto của dark mode trên iOS 13 mới ra lúc đó. Lúc đó mình chưa thấy trang nào làm auto dark mode cả, hoặc có mà k nổi tiếng như Youtube nên mình k biết :D

Mình không "cấm" mọi người view source, trước có encode nhưng rồi có người vẫn decode và mang về dùng không ghi nguồn nên mình có ác cảm. Thôi, chia sẻ dài vậy để hiểu hơn, không sao cả :D

Reply Xóa nhận xét
139

Chuyện nhỏ thôi mà các bác, hy vọng các bác ko hiểu nhầm nhau :D

Reply Xóa nhận xét
140

Bình thường thôi mà bác :D

Xóa nhận xét
141

Reply cho bạn mình đã rào trước đón sau rằng mình mới quay lại chơi blog nghiệp dư...

"Để hình dung ra lỗi mình đã phải tạo 2 page html link tới nhau rồi khi bấm sang page 2 thì mới biết được lỗi đó."
Bạn làm vậy chi cho cực và phức tạp. Chỉ cần bạn gỡ bỏ code vừa thêm vào và kiểm tra trực tiếp trên blog này.

"Đoạn code bạn fix nó thừa và dài quá."
Góp ý cho NAD, mình cũng đã rào trước đón sau: "...không biết code đúng không nhưng được." vì mình biết thế nào NAD cũng tham khảo ý kiến của bạn. Đoạn code mình mày mò từ function toggle (tùy chỉnh nút auto), không chú ý kiểm tra code ngắn gọn như bạn vì mình thấy đoạn code dài vẫn hoạt động được. Thời điểm đó (khoảng 1/2020 hoặc trước đó) để làm dark mode hoàn chỉnh mình phải tìm hiểu hơi nhiều, khi đó bạn còn giấu mẹo (chưa chia sẻ) cách làm trong suốt khung nhận xét đã được chia sẻ trên mạng. Theo nhận xét của mình, dark mode chính là phiên bản nâng cao của nút tắt mở đèn đã có từ khá lâu rồi. Script bạn chia sẻ thừa những mã số (đối với người dùng), không biết được mục đích và ý nghĩa.

Nhiều người đang sử dụng nền tảng blogging miễn phí của Google. Dữ liệu blog của nhiều người đang lưu trữ miễn phí trên server của Google. Mẫu mặc định (có sẵn) của Blogger có dòng bản quyền chân trang (widget Attribution). Nhiều người tùy chỉnh mẫu thường gỡ bỏ.

Reply Xóa nhận xét
142

Mất chưa đến 1' để tạo page thôi mà. Làm trên client bao giờ cũng nhanh hơn server.

Cái khung nhật xét trong suốt mình nhớ vẫn comment lại khi có người hỏi mà, vì thấy nó đơn giản nên mình không post bài (hoặc là lười :D)

Khi mình viết dark mode chủ yếu theo trào lưu iOS 13 khi đó. Theo mình biết thì khi đó chưa có auto dark mode, dark mode chưa lưu cài đặt tại client.

Những mã số thêm vào được lấy random để các blog không bị trùng nhau, nếu 2 blog giống nhau thì blog truy nhập sau sẽ lấy dữ liệu từ blog trước đó và ảnh hưởng tới nhau.

Temp mình đang dùng được viết từ 1 file blank. Mình sẽ viết html cho index, item, page sau đó chuyển đổi thành xml của Blogger. Nó k dc xây dựng từ temp mẫu nào của Blogger cả, ngay cả thuật toán xml cũng được phát triển nên bạn sẽ thấy blog mình một số chỗ hoạt động khá khác biệt.

Reply Xóa nhận xét
143

Mất chưa đến 1' vẫn là mất thời gian quý báu.

Sao chép từ nguồn blog bạn:
https://www.blogger.com/comment/frame/6628069224773557671?po=5942772468398605665&hl=vi&skin=soho
https://www.blogger.com/static/v1/jsbin/3262169375-comment_from_post_iframe.js
https://www.blogger.com/dyn-css/authorization.css?targetBlogID=6628069224773557671

Blogger skin=soho cho biết hiện tại temp bạn sử dụng khung nhận xét phụ thuộc skin Soho. Temp trống (file blank như bạn viết) nhiều người làm được kể cả mình. Cấu trúc, thẻ dữ liệu v.v... phải đúng chuẩn và theo quy định của Blogger. Blogger shut down thì duy-pham.blogspot.com cũng "shut up".

Mình dán liên kết đọc cho vui:
https://www.voatiengviet.com/a/vo-trong-viet-luat-an-ninh-mang/4437512.html

Cảm ơn bạn. Bạn rất giỏi... Mình dừng tại đây vì nếu cứ tiếp tục sẽ không có thời điểm kết thúc.

Reply Xóa nhận xét
144

Không ai test lỗi trên server khi mà ở client vẫn chạy được, client gần như tức thời, còn server có độ trễ để save.

Nếu cứ dùng CMS của ai là phải ghi bản quyền thì CNN, BBC... cũng phải ghi bản quyền của WP rồi :D. Bạn không nên ngụy biện sai lệch như vậy :D

Reply Xóa nhận xét
145

Hix, toàn siêu cao thủ :D

Reply Xóa nhận xét
146

Huy fan Messi nhỉ, mình fan Iniesta :D

Xóa nhận xét
147

Vâng bác, em fan Barcelona, cũng rất thích Iniesta và Xavi nữa, nhưng đặc biệt là Messi bác ạ :D

Xóa nhận xét

Đăng nhận xét

Cancel