Định đã không làm nhưng có nhiều anh em comments hoặc liên lạc với Hồng Hòa Vi để hỏi xin giao diện Metro UI style. Chính vì vậy nên mình chia sẻ một template mang phong cách Metro UI mình mới thiết kế xong. Như đã nói trong bài viết trước Metro UI & hướng dẫn thiết kế web với giao diện Metro UI mình cố gắng làm một giao diện thật đơn giản với ít code nhất. Muốn tùy chỉnh nhiều hơn bạn cứ liên lạc với mình để được hỗ trợ.
Đây là giao diện 2 cột mang phong cách Metro UI với tông màu xanh đặc trưng của Microsoft nên phù hợp chon những bạn thích sự đơn giản và chuyên nghiệp. Bạn có thể dùng giao diện này cho những dự án nghiêm túc hoặc một công ty nhỏ.
Về tính năng mình đã áp dụng Full All in One SEO for Blogger nên bạn không cần phải làm thêm bất kỳ thủ thuật SEO nào nữa. MetroBTK – The Metro UI Style Blogger Templates có một số tính năng nổi bật sau:
1. Menu bar đa cấp
Bạn tìm đến dòng code sau và chỉnh sửa link và text theo ý thích của mình
Cách chỉnh sửa hơi phức tạp một chút, anh em cần chú ý kỹ cấu trúc code để tùy chỉnh. Nếu có khó khăn hãy để lại comments mình sẽ hướng dẫn cách tùy chỉnh cụ thể.
2. Top Stories widget
Để Top Stories widget hay Feature post hiển thị bạn cần phải làm những việc sau.
b1) Tìm đến Bloglist widget có tên Top Stories nhấn Edit nó
b2) Đánh dấu check vào chính xác 3 dòng sau
- Title of most recent item
- Thumbnail of most recent item
b3) Nhấn Add to list để thêm đường link vào trong Bloglist. Có tất cả 4 bài viết nên bạn cần thêm vào chính xác 4 đường link sau.
Nhớ thay blog.nguoiaolam.net bằng tên blog của bạn (VD: http://metro-blogthietke.blogspot.com/). Bây giờ muốn bài viết nào lên Top Stories bạn cần gán cho nó nhãn hot (viết thường, không hoa)
Nếu không cẩn thận khi thực hiện bước này Top Stories rất dễ bị lỗi dẫn đến không thể truy cập vào trang chủ của blog được. Hướng dẫn chi tiết cách khắc phục lỗi mình đã viết một bài ở đây tựa là Metro Featured Posts Widget cực đỉnh cho Metro Style Blogger Templates anh em đọc luôn cả phần comments để biết cách khắc phục nhé.
4. Full width Ads Banner
Tìm đến HTML widget có tên QC mở nó ra và chèn vào đoạn code này
<a href="#"><img src="/img-source" /></a> Thay link và img source tùy ý vào đoạn code trên. Nhớ rằng để có được Full Width Ads Banner thì bề rộng của ảnh phải có kích thước 980px.
5. Categories link bar
Tìm đến Linklist widget Categories Link Bar nhấn Edit và tùy chỉnh linklist tùy ý. Nên dùng cho các chuyên mục chính và quan trọng của blog.
6. Metro UI style social item
Tìm đến đoạn code bên dưới và sửa tên nguoiaolam thành id mạng xã hội của bạn.
Ở đây mình chỉ để một vài icon tượng trưng, nếu anh em sử dụng các dịch vụ mạng xã hội khác hoặc muốn thêm các icon mang phong cách Metro UI thì phải đọc bài viết Metro UI & hướng dẫn thiết kế web với giao diện Metro UI trong phần Tài Nguyên mình có chia sẻ một set với hơn 400 icon đủ các thể loại từ: Windows Icon, Application Icon, Social Web Icon… Mỗi icon có độ phân giải 512x512. Anh em resize lại theo ý thích và chèn vào.
7. Kết luận
Có nhiều bạn cảm thấy giao diện khá đơn giản. Điều này là hoàn toàn chính xác bởi vì bản chất của Metro UI là đơn giản. Hơn nữa trong bản demo mình đã lượt bỏ hết tất cả các tùy chỉnh và giữ lại core của template với một lượng code tối thiểu.
Phần tùy chỉnh template như thay đổi màu sắc, thêm các icon social, thêm related post, recents comments, multi thread comment… mình để dành phần khám phá đó cho anh em.
Nếu thấy khó khăn đừng ngần ngại để lại comments ở bài viết này mình sẵn sàng hỗ trợ giúp anh em có một templates ưng ý.
Điều cuối cùng mình mong muốn các bạn tôn trọng công sức người thiết kế bằng cách giữ nguyên dòng thông tin về người thiết kế ở phần cuối của giao diện. Xin cảm ơn!
Hồng Hòa Vi
111 comments