Metro BTK – The Metro UI style Blogger Template

18

Đị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ợ.

Live Demo Download

Đâ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 nghệ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

<ul id='main_menu'>
<li class='top_menu'><a href='/'>Home</a></li>
<li class='top_menu'><a href='#'>Categories</a>
    <ul>
        <li><a href='#'>Blogger</a></li>
        <li><a href='#'>Coding</a></li>
        <li><a href='#'>Design</a></li>
    </ul>
</li>
<li class='top_menu'><a href='#'>About</a></li>
<li class='top_menu'><a href='#'>Contact</a></li>
</ul>

Trong trường hợp muốn tùy chỉnh sâu hơn nữa như thay đổi chiều cao, độ rộng, màu sắc và font chữ bạn cần tham khảo thêm bài viết Hướng dẫn cách làm thanh menu đa cấp với HTML5 và CSS3 từng bước đơn giản

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
• Snippet 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.

http://blog.nguoiaolam.net/feeds/posts/default/-/hot?start-index=1

http://blog.nguoiaolam.net/feeds/posts/default/-/hot?start-index=2

http://blog.nguoiaolam.net/feeds/posts/default/-/hot?start-index=3

http://blog.nguoiaolam.net/feeds/posts/default/-/hot?start-index=4

Nhớ thay blog.nguoiaolam.net bằng tên blog của bạn (VD: 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)

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 960px.

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.

<ul>

<li><a href='http://facebook.com/nguoiaolam'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNkKVJM9zPOe5bOsFIroByvOHyqX9pTkyUrPaBpAnYyFula8D4KVYaWbb9aYkjHT20g9BySSxClo89hLNL6Zh601d_0xXONldnKxG19KAJsudR7g-uwpKOt_yMvu5dJc66xBJ0FLTYV6wZ/s57/Facebook%2520alt%25201.png'/></a></li>

<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp4TMTXutZiokPH9-At__RHeHAhiy5fjW7pHV5U4XkQt64cjAKQ03gsvfcznzTRf4wFHbYX0pMedNphG49xQPnJwY4AcIG5u4_PKeqZOFNKXUR_n0hY_PBFqCx0ExpuMHVuDTTpTmff4u3/s57/Google%252B%2520alt.png'/></a></li>

<li><a href='http://pinterest.com/nguoiaolam'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil_i1Mlmlij8CZ9ZOF6tFzfG-1FM_XbR0o1W3oKjG9nYZHRK2zIBloqD4idpqbMuvAIULY1_eVij_9VsC5dzMr7cad5WlZ_0eQG0HlNJNDr1gGfr1l0X4DhWSCtxcxyez3kcvTncF8Lyxf/s57/Pinterest%2520alt.png'/></a></li>

<li><a href='http://feeds.feedburner.com/nguoiaolam'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr0p6Tfj9oRXgrSjgt7t21VzA91QFDNLFmbSdeE6wyRRkxLDAlGD8e29t51sU5bcvdr96P7gvktwwnddGrZGLDHPKE53s9x3hw1pWYfvjuIyVTB2YxIdF-45Jy9y9QgCKVOPM1s5XJKzim/s57/RSS%2520Feed.png'/></a></li>

<li style='padding:0px'><a href='http://youtube.com/nguoiaolam'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwIQLAlQ-rXZdYx-QvvvKYAH5bHG71Sh6dRe0z7dnrqg9pYux1Zeb_PqsH-x_iCmQOv1reQmQt_ZtVjTKwU-OYWQtWks6d09ZAeUWJ55e6yJ1RPYDY49aFTzOdcXOEve4uc6k6XHydcPpx/s57/YouTube%2520alt%25201.png'/></a></li>

</ul>

Ở đâ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