Hôm nay Hồng Hòa Vi xin tặng các bạn giao diện Metro Simple – The simplest Metro UI Blogger Templates. Nói chung giao diện này về cơ bản chẳng có gì đặc sắc nhưng do một số bạn thích nên mình chia sẻ.
Đây là giao diện 2 cột mang phong cách Metro UI đơn giản nhất có thể, nên tốc độ tải có thể nói là siêu nhanh. Giao diện có tông xanh nhạt phù hợp với nhiều chủ đề khác nhau có thể dùng làm cho nhiều mục đích khác nhau như nhật ký cá nhân, trang tin công nghệ…
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. Metro Simple – The simplest Metro UI Blogger có một số tính năng nổi bật sau:
1. Menu bar đơn 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="#">Design</a></li>
<li class="top_menu"><a href="#">Tutorials</a></li>
<li class="top_menu"><a href="#">Coding</a></li>
<li class="top_menu"><a href="#">Blogger</a></li>
<li class="top_menu"><a href="#">General</a></li>
<li class="top_menu"><a href="#">Sitemap</a></li>
<li class="top_menu"><a href="http://blog.nguoiaolam.net/p/f.html">Support</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. Featured Posts widget
Để Featured Posts 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 Featured 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
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: metro-simple.blogspot.com)
Bây giờ muốn bài viết nào lên Featured Posts bạn cần gán cho nó nhãn hot (viết thường, không hoa)
3. Label và Linklist mang phong cách Metro.
Để hiện thi Label như trong trang demo bạn phải chuyển Label về dạng List và ẩn số lượng bài viết trên mỗi Label
4. Full width Ads Banner
Tìm đến HTML widget có tên 980QC 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. 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/AVvXsEix83SGdNWIMOkGAJCzlTB_b1fbgbl1R7n0qTuc2xjVqb6uShd7HXZNLYRSYSueyi62q5h59iwgCADmZ4Pk5Xa9Sgmoa3QbH5r8P-e0H37ewhHLhwKGQEjEEG0ZcOXLWItuZxBA55a-1XSs/s57/Facebook%2520alt%25201.png'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBAkpRdou7feGw1hpD-9AMD3DBNUfFGTtrxqVrAmFOny8HJcJOjQY_57Ldk2ftpOUS-fwZg4TKYA7rRT06BFHpATuHRQ6mwXjh9RTNW31oMU3OufzqUEBm58GEgQL12Gz7c7JLSrFnL76R/s57/Google%252B%2520alt.png'/></a></li>
<li><a href='http://pinterest.com/nguoiaolam'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo9eghT67I3DmzF1kiGkuhnQgli_pyyA3eqO22AwIAZ9GqDptRlubQbiP7KekMIkPhYsY3csDDG93CU8gsZ2713ukgshfXOOAWAccoQvUIllJtalXwSyLdYPlkZ6UdvbIukVS8pA4FK8qG/s57/Pinterest%2520alt.png'/></a></li>
<li><a href='http://feeds.feedburner.com/nguoiaolam'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGFXg1eSJiiaSbE93iTJCS57qYcwQANCOZnXn7ejQDOBlPNxRgCsKkEPYizz-FGslS-YuYKKPMHmNAhyqeVybmmjzi6afVoeCDvkz3WxaP5FT0d_hlWvhIhNHqBU83qOCluWC7pOZZa9aO/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/AVvXsEgzzYA7fM1dRMzto8GVsOJ_GhTy-Tc9mwGCEbb4eM9J6VU8e0ItamhtjT2hvyXPKDC__Y4qQjObjswMuHsbwyKBzVYdxvdG4yhU89QszVItG2A8_QtzFUC2_Vpxo-GLcc5X03FRlj0r0HTf/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.
6. Kết luận
Có thể nói đây là giao diện đơn giản nhất trong những cái đơn giản. Sở dĩ nó có được phong cách metro là nhờ các phần trang trí phụ thêm như Social Item, Label, hoặc Full Width Ads Widget... những thứ này thuần túy là trang trí một chút CSS mà thôi.
Như vậy có thể nói rằng vấn đề của giao diện không phải là lựa chọn một Templates hoành tráng mà là vấn đề hiểu và nắm vững mình cần gì. Trong trường hợp này, nếu muốn có một giao diện đơn giản, hiện đại, tốc độ nhanh và mang tinh thần của Metro Style bạn cần tìm hiểu thêm bài viết này và sáng tạo cho riêng mình
Nếu có khó khăn xin để lại comments ở bài viết này. HHV sẽ tận tình giúp đỡ trong khả năng có thể.
Hồng Hòa Vi
87 comments