VN tin mới trang chuyên tin học , Kiếm tiền online, Tin tức công nghê, Phầm mềm tiện ích,thủ thuật máy tính,hướng dẫn kiếm tiền , Trò chơi

Powered by Blogger.

12/18/12

Premium Blogger Templates - Metro Modern Solar V.1

0 comments

Metro Modern Solar là Blogger Templates mới nhất của mình trong dòng templates Metro UI mà nay là Modern UI. Metro Modern Solar sử dụng tông màu xám xanh ngọc sang trọng và tinh tế. Thích hợp cho trang cá nhân và cả các trang tạp chí tin tức công nghệ.
Được truyền cảm hứng từ giao diện Metro của Windows 8 và thừa hưởng những đặc điểm của Metro BTK, Metro Simple. Tuy nhiên Metro Modern cũng có nét độc đáo riêng được cải tiến dành riêng cho nó. 
Premium Blogger Templates - Metro Modern Solar V.1

1. Tùy chỉnh thanh Menu Bar đa cấp

Tùy chỉnh thanh Menu Bar đa cấp
Metro Modern Solar sở hữu thanh Menu Bar đa cấp với hiệu ứng sổ dọc rất đẹp. Tùy theo nhu cầu sử dụng bạn có thể nâng lên 4 cấp. Để tùy chỉnh Thanh menu này trong Template – Edit HTML – Proceed bạn tìm đến đoạn code sau và tùy ý chỉnh sửa.
Data provided by Pastebin.com - Download Raw - See Original
  1. <div id='menu-module'>
  2. <div class='mattblackmenu' id='ddtopmenubar'>
  3. ...
  4. </div>
  5. ...
  6. </div>
Lưu ý: Thanh menu bar thường có cấu trúc lặp lại. Bạn đọc cần chú ý đọc kỹ đoạn code một cách cẩn thận.

2. Featured Posts WidgetFeatured Posts Widget

Để Feature Post Widget 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 Feature nhấn Edit nó
b2) Đánh dấu check vào chính xác 2 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.
Data provided by Pastebin.com - Download Raw - See Original
  1. http://blog.nguoiaolam.net/feeds/posts/default/-/hot?start-index=1
  2. http://blog.nguoiaolam.net/feeds/posts/default/-/hot?start-index=2
  3. http://blog.nguoiaolam.net/feeds/posts/default/-/hot?start-index=3
  4. 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: http://metro-modernsolar.blogspot.com/). Bây giờ muốn bài viết nào lên Feature Post Widget 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é.

3. Carousel Slider Widget

Carousel Slider Widget
Carousel Slider Widget chỉ hiển thị khi bạn xem một bài viết bất kỳ. Để tùy chỉnh widget này bạn vàoTemplate – Edit HTML – Proceed bạn tìm đến đoạn code sau và tùy ý chỉnh sửa.
Data provided by Pastebin.com - Download Raw - See Original
  1. <script type='text/javascript'>
  2. ...
  3. showRandomImg = true;
  4. aBold = true;
  5. summaryPost = 140;
  6. summaryTitle = 25;
  7. numposts1 = 15;
  8. label1 = "hot";
  9. ...
  10. </script>
Ý nghĩa các thông số
label1 = "hot” – thay “hot” bằng nhãn mà bạn muốn Carousel Silder hiển thị
numposts1 = 15 – thay 15 bằng con số khác để tùy chỉnh số lượng bài viết được tải. Khuyến cáo nên giữ nguyên 15 bài.

4. Metro Social Widget

Metro Social WidgetTìm đến đoạn code bên dưới và sửa tên blogthietke thành id mạng xã hội của bạn.
Data provided by Pastebin.com - Download Raw - See Original
  1. <div class='social'>
  2. <span class='fade'><ul>
  3.         <li><a href='http://facebook.com/blogthietke'><imgsrc='https://lh4.googleusercontent.com/-J621cGpOQ7U/T4xwcZZSH1I/AAAAAAAAJFI/d2J1pCOj9ac/s57/Facebook%2520alt%25201.png'/></a></li>
  4.         <li><a href='#'><img src='https://lh5.googleusercontent.com/-G6yamZXq9Cs/T4xwcdajchI/AAAAAAAAJFQ/psDy5hhHRBY/s57/Google%252B%2520alt.png'/></a></li>
  5.         <li><a href='http://pinterest.com/honghoavi'><imgsrc='https://lh3.googleusercontent.com/-aNmSn1uWuiE/T4xwceGx9eI/AAAAAAAAJFM/dieNFLbfp-0/s57/Pinterest%2520alt.png'/></a></li>
  6.         <li><a href='http://feeds.feedburner.com/blogthietke'><imgsrc='https://lh6.googleusercontent.com/-vzkiY70x0UQ/T4xwdUpk6fI/AAAAAAAAJFU/L1PqWrQ26O0/s57/RSS%2520Feed.png'/></a></li>
  7.         <li style='padding:0px'><a href='#'><imgsrc='https://lh4.googleusercontent.com/-ao9NUL4mmD8/T4xwdY9OIhI/AAAAAAAAJFY/P4FJK8DEsYk/s57/YouTube%2520alt%25201.png'/></a></li>
  8. </ul></span><div style='clear: both;'/>
  9. </div>
Ở đâ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.

5. Page Navigation tự động

Page Navigation tự động
Bạn vào Template – Edit HTML – Proceed - Expand Widget Templates và tìm đoạn code sau:
Data provided by Pastebin.com - Download Raw - See Original
  1. var pageNaviConf = {
  2.     perPage: 5,
  3.     numPages: 9,
  4.     firstText: "First",
  5.     lastText: "Last",
  6.     nextText: "Next",
  7.     prevText: "Prev"
  8. }
Trong đó
trong đó:
perPage: số bài viết hiển thị trong 1 trang
numPages: số trang hiển thị
firstTextlastTextnextTextprevText: tương ứng là các từ hiển thị cho các nút First, Last, Next, Prev

6. Bottom Navi BarBottom Navi Bar

Trong Layout bạn tìm đến widget HTML  Bottom Navi. Nhấn Edit và chép toàn bộ đoạn code sau, nhớ tùy chỉnh lại đường link của riêng bạn.
Data provided by Pastebin.com - Download Raw - See Original
  1. <p align="center">
  2.         <a href="http://blog.nguoiaolam.net/search/label/Freebies">Freebies</a>  
  3.         <a href="http://blog.nguoiaolam.net/search/label/Blogging">Blogging</a>
  4.         <a href="http://blog.nguoiaolam.net/search/label/Blogger">Blogger</a>
  5.         <a href="http://blog.nguoiaolam.net/search/label/Wordpress">Wordpress</a>
  6.         <ahref="http://blog.nguoiaolam.net/search/label/Marketing%20Online">Marketing Online</a>  
  7.         <ahref="http://blog.nguoiaolam.net/search/label/Make%20Money%20Online">MMO</a>
  8. </p>

7. Một số điểm lưu ý khác

a) Pagelist: Pagelist sẽ tự động hiển thị tất cả các trang tĩnh ở phần trên cùng của blog. Muốn tùy chỉnh hiển thị bạn vào Layout – Page để tùy chỉnh.
b) Label Widget ở Sidebar. Bạn cần tùy chỉnh hiển thị là dạng List.
c) Timestamp Format. Bạn vào Settings - Language and formatting tùy chỉnh lại Timestamp Format tượng tự như trong hình
clip_image001[15]

8. Kết luận

Nói chung về cơ bản giao diện này cũng “cùng hệ” với Metro Simple và Metro BTK tuy nhiên việc cài đặt phức tạp hơn một chút. Điều này cũng hiển nhiên vì nó có nhiều tính năng hơn. 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

No comments:

Post a Comment