Chi tiết theme nguyenanhduy.com version 11

Hello! Chúc mọi người tuần mới vui vẻ! 😎

Có người nói ngày nào cũng vào nguyenanhduy.com chỉ để xem theme. Có người nói theme như một cuốn sách, người khác lại thấy giống bức tranh. Riêng mình thấy giống một tờ báo tường mà học sinh những năm 90 2000 thường phải làm (hoặc thuê làm) vào mỗi dịp 20/11 (ko biết giờ còn ko?)

Mình có thể 3 4 tháng ko đăng bài mới nhưng theme thì vẫn chỉnh sửa thường xuyên, từ những chi tiết nhỏ như một con chữ cho đến chỉnh layout khác nhau cho home, label... Ko có giao diện hoàn hảo, đến khi gần hoàn hảo được có lẽ đến lúc thay theme mới.

Chấm điểm của PageSpeed Insights: Thiết bị di động [58/100], máy tính [86/100]. Ko được trên 90 điểm hầu như là vì những hình ảnh chất lượng cao, size nặng. Mà mình thì ko muốn giảm chất lượng hiển thị hình ảnh, đặc biệt là trên thiết bị di động. Đang tính lazyload background?, vì webp chưa phổ biến.

Chấm điểm của Woorank: 66/100. Cái này ko quan trọng, điểm có thể nâng lên 80 nhưng ko cần thiết. Chủ yếu để tham khảo, check SEO.

Share. Hiện mình vẫn chia sẻ theme này với giá 390k [ko support] và 490k [có support]. Mọi người có thể mua chung.

Trên Galaxy Fold

Một số người thấy đẹp, copy vài chi tiết về sử dụng mà mình ko rõ họ có hiểu gì ko. Nên trong post này mình sẽ nói chi tiết theme nguyenanhduy.com version 11 - đến nay đã sử dụng được 20 tháng.

Trong bài đăng này, mình sử dụng ảnh chụp màn hình ở độ phân giải 1920 (size khá nặng + lazyload, nếu ảnh quá "lười" thì scroll qua lại một lần nó sẽ "tỉnh dậy") và trình duyệt Chrome bản mới nhất. Có gì mọi người góp ý nhé, thanks!


Intro. Giao diện đầu tiên khi truy cập trang chủ, cái nhìn đầu tiên. Thi thoảng mình đổi Intro thành Slider các bài đăng dạng 3 hoặc 1 cột, có thể tắt đi.

1 & 3. Chữ "NAD" và "Ngày hôm qua" sử dụng hiệu ứng glitch by Photoshop và js/css. Glitch là hiệu ứng hot năm 2018, được lăng xê bởi Tiktok.

2. Graphic kiểu bóc giấy, một kỹ thuật hot năm 2019 by Photoshop. Gần đây trên tất cả các tài khoản mạng mình đều đồng bộ để avatar này, dù làm từ năm ngoái. Rapper Binz gần đây cũng để ava dạng bóc giấy này.

4. Background (viết tắt là bg) css cover và caption. Hoàng hôn, cầu Long Biên, Hà Lội, ảnh tìm được trên mạng, chưa thấy ảnh khác phù hợp hơn với Dòng sông lơ đãng của Việt Anh qua giọng hát Bằng Kiều xưa. Click nút play để nghe với thẻ audio html5.

5. Chế độ sáng/tối, js/css by Duy Phạm. Ẩn/hiện tinh tế cùng top navbar khi scroll by Thân ai người đấy lo. Gift Font Awesome 4.7, nhạc nền "pm anniversary" huyền thoại ở nghenhac.info xưa - nhạc phim hoạt hình Laputa của Ghibli (còn nhắc đến ở dưới).


Intro dark mode.

Hình nền cây bàng lá đỏ lấy trên mạng. Mình vẫn chưa làm caption thay đổi theo dark mode cho phù hợp được.


Blog posts. Bố cục masonry, mới phổ biến khoảng 4 năm trở lại đây với đại diện tiêu biểu Pinterest. Layout 3 cột, có thể chuyển thành 2 cột và các tùy biến khác nhanh chóng.

1. Border top bottom css viền xanh đỏ phong bì thư. Background repeat là những dòng kẻ trên giấy ô li, màn hình có chất lượng kém sẽ khó nhìn bg này.

2. Quote random. Có hơn chục cái trích dẫn ngẫu nhiên mình thích.

3. Thumbnail lazyload, đồng nhất màu đen trắng khu này và hover ra màu để thấy sự nổi bật. Thi thoảng ảnh sẽ lười load, người xem sẽ thấy background hình đầu lâu (hồi đi học mình hay vẽ hình này) và hoa hoét, scroll qua thì ảnh sẽ hiện.

4. Đổ bóng title và viền. Giống dán chữ, dán giấy lên tường.


Blogpost dark mode.

Hình nền là bầu trời đêm xanh thẳm đầy sao lấp lánh. Thiếu mất ngôi sao băng thi thoảng vụt sáng 😀


Footer.

1. Click play để nghe bài hát của Trần Lập/Bức Tường. Footer top ko có dark mode vì mình lười làm.

2. Css padding hầu như đã được căn đều. Background trên trời, dưới biển.

3. Cá voi xanh cõng ngọn hải đăng. Cá voi là loài dưới đại dương được con người yêu quý nhất.

4. Typist css.

5. Click vào tai nghe để phát nhạc, bài Yesterday bất hủ của The Beatles.

6. Thuyền giấy gợi nhớ tuổi thơ.


Intro post.

Title Wow js


Post content. Trông hơi giống đầu đề báo tường xưa ko?

1. First character. Mình nghịch linh tinh thế dell nào thành ra đẹp phết ^^

2. Kiểu background này đã cũ và ko còn xuất hiện nhiều, nhưng nếu biết sử dụng tân cổ giao duyên vẫn đẹp như thường hehe 😍


Post content dark mode.

1. Bg là lần đầu rồng thần xuất hiện trong 7 viên ngọc rồng, khi rồng thần xuất hiện bầu trời sẽ tối đen (hình này mình ghép, vì địa điểm không phải tầng mây thứ 9 của thượng đế). Trong phiên bản của Kim Đồng, Uron đã cướp điều ước của nhóm Pilap đại vương bằng gói kẹo. Nhưng thực tế trong gản gốc của Nhật, Oolong đã ước cái quần lót của gái đẹp :))

2. Hàn Mặc Tử. Cũng trong Dragon Ball, người xayda thấy trăng là biến thành khỉ đột khổng lồ. Mình định vẽ thêm cái thang bắc lên trăng mà lười.


Bài cùng thư mục.

1 & 2. Css padding trên dưới đều căn đều như nhau.

3. Bg fixed. Bg dạng hình lập phương nhiều khối này mấy năm gần đây được sử dụng rất nhiều, nặng nhưng mà đẹp nên ko lỡ bỏ đi. Trên smartphone, table là hình tranh dân gian Đông Hồ: cậu bé ôm gà trống.


Related posts dark mode.

Bg repeat mình chế từ bức tranh siêu phẩm Đêm đầy sao nổi tiếng của danh họa Hà Lan Van Gogh. Bg này hiện mình chỉ để hiện trên màn hình max 767px, thay vào đó là hình bokeh umbrella đêm mưa.


Comments.

Hover avatar nó sẽ quay về phía nội dung người đó comment. Comment form sử dụng emo huyền thoại của Y!M xưa, trên smartphone table chất lượng hiển thị khá xấu, chưa khắc phục được...


Comment footer, Footer top.

1 & 4. Mình rất thích hoa mẫu đơn của Tầu khựa hoặc châu Âu, cánh to chứ ko nhỏ li ti như Việt Nam.

2. Lạc mất mùa xuân nên phải đi tìm - Đàm Vĩnh Hưng.

3. Một trái tim, một tình yêu (Philip Huy) hay Trái tim mùa đông (Don Hồ) - những bài hát yêu thích.


Post footer.

Năm ngoái nhà được tặng bánh trung thu, thấy vỏ, hộp và túi đựng có hình đẹp quá nên chụp lấy dùng làm bg. Tìm hiểu được biết đây là tranh sơn mài của họa sĩ Bùi Trọng Dư khá nổi tiếng.


Footer dark mode.

Bg một cảnh phim hoạt hình Mộ đom đóm của xưởng phim huyền thoại Nhật Bổn - Ghibli. Một bộ phim đề tài phản chiến rất buồn. Mình rất thích những hình vẽ của hãng này, rất đẹp và sáng tạo.

Ở Labels footer light mode bg là mắt con hổ mờ.


Thư mục / Labels.

Hầu như mỗi label mình để 1 ảnh đại diện lớn riêng.


Posts thư mục / Labels.

1. Ngoài hoa mẫu đơn mình cũng rất thích hoa đào mùa xuân. Xuân hạ thu đông rồi lại xuân cũng là một phim yêu thích của Hàn Cuốc, chủ đề Phật giáo, cảnh chùa trong phim rất đẹp.

2. Layout 2 column. Ko có nhiều blogspot có layout home và label/search khác nhau.


Thư mục / Labels footer.

1. Chữ "Nếu" cài hoa giấy do mình design, mở đầu bài Tuyết rơi mùa hè của Trần Lê Quỳnh, click vào icon volume để phát nhạc (by Đoan Trang). Tuyết rơi mùa hè là chuyện rất hiếm nhưng có. If của Bread cũng là một bài hát yêu thích, nhạc flash những năm đầu 2000 và một trong những ost Tình dục là chuyện nhỏ siêu hài của Hàn Xẻng 😂

2. Một trong những câu nói nổi tiếng của cố nhạc sĩ Trịnh Công Sơn.


About. Sử dụng bg từ theme version 10.

1. Mẫu đơn, cúc và sen. Peony, daisy and lotus.

2. The Fault in Our Stars, Lỗi thuộc về những vì sao. Một cuốn sách được chuyển thể thành phim khá nổi tiếng.

3. Laputa, Castle in the sky, Tòa lâu đài trên không trung của Ghibli.

4. UFO (nhìn kỹ có chữ "NAD"); dreamcatcher của thổ dân xưa, nổi tiếng tại Việt Nam qua phim thần tượng Hàn Cuốc mấy năm trước - mình ko xem cũng ko nhớ tên phim, chỉ nhớ từng tặng e nyc :))

5. Ghibli, hãng phim có nhiều phim mình thích, hình như cuối năm nay ra phim mới. Lyric Ngày hôm qua của Bức Tường, gif mình thiết kế khá nặng, lấy cảm hứng từ lyric video Perfect của Ed Sheeran.

6. Son Goku và Krilin, bộ truyện tranh, phim hoạt hình yêu thích nhất từ bé đến lớn.

7. Lá phong thu đã nhuốm màu quan san, én lượn.

8. Một cặp đôi bé con song sinh biết bay, có siêu năng lực đặc biệt mà mình ko biết/ko nhớ tên trong bộ truyện tranh Arale/Tiến sĩ Slump, từng xuất hiện trong Dragon Ball (cùng tác giả Akira).

9. Ngôi nhà bay bằng những quả bóng bay trong phim Up, một trong những phim hoạt hình rất hay của hãng Pixar.

10. Ảnh chụp một lần tết đi Sapa chơi với bạn cách đây đã mấy năm.


Sitemap.

Con thuyền có "cánh buồm đỏ thắm" lênh đênh trên biển trong một chiếc chai lấy cảm hứng từ flash bài hát If ở trên và ví von chữ Nếu của người Pháp: có thể cho cả Paris vào chai!

Ở page Contact, footer bg là Forest Gump đang ngồi ghế nhìn về câu nói nổi tiếng của Steve Jobs: Stay hungry, stay foolish.


Sliding sidebar.

Bg sử dụng css đổi màu nền tối liên tục.


Bình loạn mới.

Hai màu xanh lá cây và da trời lấy cảm hứng từ tin nhắn trên iPhone.


404.

...