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]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.

...
Bài hay
Tomorrow
13/07/2020
18

Nhận xét

  1. Bài viết dài bác nhỉ :v
    Chúc bác bán tốt 😊

    Trả lờiXóa
    Trả lời
    1. Vui vẻ là chính, đc đồng nào thì đc :D

      Xóa
  2. Kéo từ trên xuống dưới rồi vl a ạ :v

    Trả lờiXóa
  3. Để ảnh full width bài này khó nhìn trên máy tính :|

    Trả lờiXóa
  4. Nice template :D hóng share 😁

    Trả lờiXóa
  5. Bán được nhiêu rồi bác :D

    Trả lờiXóa
  6. Thử comment bằng mail này cái xem trông xịn xịn k để từ sau đi trao đổi chiêu thức với ae :v

    Trả lờiXóa
  7. Admin kiểm tra email nhé

    Trả lờiXóa
  8. Chọn theme tiêu chuẩn thế nào có lẽ là tùy mục đích sử dụng. Tôi thấy ông vẫn kiên trì con đường mà ông đã chọn về blogspot đó là viết những gì mình thích.
    Theme đẹp nếu rỗi rãi thì tối ưu vài thứ nữa cho nó load ngọt hơn khi cuộn.

    Trả lờiXóa
    Trả lời
    1. Thanks! Cần tối ưu thêm gì để load ngọt hơn? Chỉ mình vs

      Xóa
    2. - Link css :fontawesome, animated và font google đưa vào javscript.
      - Tắt js widget mặc định nhưng vẫn sử dụng dc nút trả lời.(Chỉ quan tâm tới mỗi nút trả lời là đủ)
      - Sử dụng async và defer nếu có thể
      - Giảm DOM quá lớn
      Tìm trang nén ảnh ko làm thay đổi chất lượng ảnh, nếu ko thì tìm phần mềm free cần thì mua ^^
      Nói chung thì còn phải chỉnh đốn lại kha khá nhiều việc :D

      Xóa
    3. Thanks! Mình sẽ nghiên cứu khắc phục dần :D

      Xóa

Đăng nhận xét

Feedback

Instagram

duyna.ybi, nguyenanhduy.com, thằng điên
Từ khi e ko còn về quanh sân...
Mưa rừng ơi mưa rừng...
Từ khi quen e, a đã biết...