Chuyện là thế này, blog thì tạo ra từ hồi 2004, tất nhiên lúc đầu là rất hăng, viết loạn xạ, cọp loạn xạ về. Và theo thời gian là cứ nhạt dần nhạt dần... 

Lâu lâu lại vào viết chút, cọp chút vào, vừa đỡ mốc, vừa đỡ buồn, nhưng "chẳng thường xuyên".

Thời gian rồi lại có vài người "nhờ tạo website", thế nên toàn dí sang dùng cái Blogger này với cái theme cũ đã làm cách đây 5 năm. Cái mẫu đó thì đủ đơn giản, nhẹ, sạch để dùng cho nhiều mục đích khác nhau, tất nhiên là vẫn có một số điểm chưa ưng là cái menu điều hướng cứ phải click thêm 1 phát vào đó thì mới hiện ra cái menu cấp dưới, và khi chạy ở mobile thì mỗi khi "dí tay" vào là nó lại tuột xuống, hơi khó chịu tý nhưng vẫn dùng được.

Giai đoạn này thì về công việc (và cả cá nhân) là bắt đầu chuyển hết sang hoạt động online, thế nên cái blog kiểu gì cũng sẽ phải dùng đến, mà còn dùng đến nhiều. Vậy nên việc tuần tự cần làm là chỉnh lại cái giao diện đã.

Trước hết, cái theme mới là vẫn phải tuân thủ tiêu chí đơn giản, nhẹ, sạch, thoáng đãng. Sau đó là cần thêm cách hiển thị mới "hiện đại hơn", cần thêm một vài vùng "thông tin nóng". Mặt khác, yêu cầu là phải làm nhanh (hoàn thành trong 1-2 tiếng, tối ưu hoàn thiện trong 1-2 ngày), vậy nên lấy luôn mới theme mặc định của cái VIEApps NGX CMS Portals nhét vào luôn, đảm bảo vừa nhanh vừa sạch.

Mấy đặc điểm khác biệt

1. Ảnh thumbnail "hàng xịn":

Tất cả các ảnh thumbnail sẽ tự động được chỉnh về kích thước 720 x 405, tuân thủ tỷ lệ 16:9. Tất nhiên các ảnh thumbnail chỉ có thể chỉnh được về kích thước này khi ảnh đó là ảnh chèn trong nội dung và được lưu trên máy chủ của Blogger/Blogspot (Google).

2. Menu điều hướng:

Sử dụng thuần CSS, loại bỏ Javascript để bớt đi 1 click khi cần hiển thị cái menu cấp dưới, thu gọn cái hộp tìm kiếm lại (hộp này sẽ tự động co dãn khi di chuột vào).

Menu cho màn hình mobile chuyển sang dùng MMenuJS để tiện lợi hơn.

Ngoài ra, cái menu này sẽ tự động ẩn đi khi cuộn xuống và sẽ tự động hiện ra khi bắt đầu cuộn lên để dễ dàng thao tác.

3. Thay đổi cách hiển thị nội dung "Nổi bật":

Các nội dung nổi bật ở theme cũ dùng cái carousel của Bootstrap, nay được bổ sung kiểu hiển thị tràn đầy màn hình với cái OwlCarousel, và cái kiểu hiển thị tràn đầy màn hình này là mặc định với 5 slides đảo tự động sau 5 giây. Ở cái này có 2 lưu ý:

1. Nếu cái nội dung nổi bật nào mà muốn luôn hiển thị ở đây, thì cho thêm cái label là "Luôn nổi bật" vào
2. Nếu muốn chuyển về hiển thị dạng carousel cũ của Bootstrap, thì mở mã của theme ra, tìm cái "var blog =", rồi sửa cái giá trị "mode" đặt trong cái "featured" thành "carousel"

Ngoài ra, tất cả các ảnh ở vùng này được tự động chỉnh về kích thước Full HD (1920 x 1080) để đảm bảo hiển thị xịn xò nhất trong chế độ hiển thị toàn màn hình.

4. Bổ sung thêm khối "điểm tin":

Khối này được nằm ngay dưới phần tin nổi bật, được chia làm 3 khu vực khác nhau, mỗi một khu vực này sẽ lấy ngẫu nhiên ra 3 nội dung để hiển thị. Để điều chỉnh cái nhãn (label) sẽ sử dụng để lọc các nội dung này thì mở phần Layout của Blogger, tìm khu vực Highlighted để chỉnh từng cái nhãn là sẽ ngon lành.

5. Thêm nhiều khoảng trắng rộng:

Các danh sách nội dung cũng như vùng hiển thị khác được thêm các khoảng trắng rộng hơn để dễ thao tác, đồng thời các khu vực tiêu đề cũng được sử dụng font chữ to hơn để dễ đọc và phân loại.

Đối với danh sách nội dung chính, khu vực hiển thị tiêu đề được cố định hiển thị với 2 dòng, khu vực hiển thị nội dung (tóm tắt) được cố định hiển thị với 4 dòng. Điều này giúp cho nội dung được trình bày gọn gàng và đảm bảo thẩm mỹ.

6. Tự động thêm ảnh khi xem nội dung chi tiết:

Ảnh đại diện (ảnh thumbnail) sẽ được tự động thêm vào ngay dưới tiêu đề khi một nội dung chi tiết được mở ra xem.

Mặt khác, các chỉ dẫn (breadcrumbs) cũng được tính toán lại để chuẩn xác hơn, nhãn thời gian cũng được điều chỉnh vị trí, thêm khoảng trắng để dãn cách hơn nhằm đọc nhanh hơn.

7. Liên kết tới các mạng xã hội (social links):

So với cái theme cách đây 5 năm thì các social links này được di xuống dưới cùng, bên phải (theme cũ là ở trên cùng, bên phải). Lý do là: người đọc không quan tâm lắm tới cái này, vậy bỏ xuống dưới thôi.

Một số lưu ý

Bản chất các khu vực logo (header), menu điều hướng, links, ... là Blogger lưu trực tiếp ở trong cái theme này, vậy nên nếu anh/chị/em đã dùng cái theme khác rồi mà không muốn mất dữ liệu thì trước khi "dán" cái nội dung của theme này vào thì nhớ lưu lại một bản sao, rồi lần mò copy lại dữ liệu từ đó.

À, vẫn như cái theme của 5 năm trước thì cái theme này vẫn chỉ sử dụng comment của Facebook thôi nhé, thế nên nhớ tắt cái comment của Blogger đi khi khởi tạo blog mới nhá.

Thế xài như thế nào đây?

Trước hết là download cái file XML chứa cái theme này:

• Bản chưa nén mã CSS và Javascript: https://drive.google.com/file/d/1gir76HMPH9a925gNkSsMOyecZjGmnkKZ/view?usp=sharing
• Bản đã nhét mã CSS và Javascript (nhỏ hơn bản trên 20KB): https://drive.google.com/file/d/1KqFwdB_jSKZWCrLKkBxsLoUAJqSKKtNz/view?usp=sharing

Sau đó mở Blogger ra, tìm đến phần Theme, chọn chế độ Customize HTML và dán nội dung cái theme này vào.

Và nhớ tắt cái chế độ hiển thị riêng cho mobile của Blogger đi, vì cái theme này vốn sẵn là responsive để hiển thị tốt cho máy tính lẫn thiết bị di động rồi.