Metro Simple – The simplest Metro UI Blogger Templates

Your ads here!

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

Metro Simple – The simplest Metro UI Blogger Templates

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

Metro Simple – The simplest Metro UI Blogger Templates

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

Metro Simple – The simplest Metro UI Blogger Templates

Để 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

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

Metro Simple – The simplest Metro UI Blogger Templates

Để 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

Metro Simple – The simplest Metro UI Blogger Templates

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 linkimg 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

Metro Simple – The simplest Metro UI Blogger Templates

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://lh4.googleusercontent.com/-J621cGpOQ7U/T4xwcZZSH1I/AAAAAAAAJFI/d2J1pCOj9ac/s57/Facebook%2520alt%25201.png'/></a></li>

<li><a href='#'><img src='https://lh5.googleusercontent.com/-G6yamZXq9Cs/T4xwcdajchI/AAAAAAAAJFQ/psDy5hhHRBY/s57/Google%252B%2520alt.png'/></a></li>

<li><a href='http://pinterest.com/nguoiaolam'><img src='https://lh3.googleusercontent.com/-aNmSn1uWuiE/T4xwceGx9eI/AAAAAAAAJFM/dieNFLbfp-0/s57/Pinterest%2520alt.png'/></a></li>

<li><a href='http://feeds.feedburner.com/nguoiaolam'><img src='https://lh6.googleusercontent.com/-vzkiY70x0UQ/T4xwdUpk6fI/AAAAAAAAJFU/L1PqWrQ26O0/s57/RSS%2520Feed.png'/></a></li>

<li style='padding:0px'><a href='http://youtube.com/nguoiaolam'><img src='https://lh4.googleusercontent.com/-ao9NUL4mmD8/T4xwdY9OIhI/AAAAAAAAJFY/P4FJK8DEsYk/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

 
AboutSitemapServicesSupportPolicyContact
© 2012 Blog Thiết Kế. All rights reserved.
Posts RSSComments RSS
Do you like this template? Click here!
Scroll to top