Hướng dẫn
cách cài đặt và chỉnh sửa giao diện
METRO MAGAZINE ver 1.0
Premium Metro Style Magazine Blogger Template
I. Vấn đề bản quyền.
Metro Magazine Templates do Hồng Hòa Vi thiết kế được cung cấp miễn phí theo giấy phép Creative Commons phiên bản 3 (CC BY-NC 3.0).
Bạn được phép:
· Chia sẻ — bạn có quyền sử dụng, sao chép, phân phối và truyền tải tác phẩm trên internet
· Sửa đổi — bạn được phép sửa đổi giao diện cho phù hợp với nhu cầu và mục đích của mình
Với các điều kiện sau:
· Ghi nhận công của tác giả — Bạn phải để lại một backlink trở trang Blog Thiết Kế và ghi rõ Design by Blog Thiết Kế hoặc Cung cấp bởi Blog Thiết Kế
· Phi thương mại — Bạn không được sử dụng các giao diện này cho mục đích thương mại dưới bất kỳ hình thức nào. Nếu cần thiết hãy liên hệ với Blog Thiết Kế
Thông tin thêm
II. Download và cài đặt
1. Trang demo: http://metro-magazine-premium.blogspot.com/
2. Download
Click vào icon bên dưới để tải file:
Mặc dù bạn có thể chia sẻ đường file này cho bất kỳ ai tuy nhiên mình đề nghị bạn hạn chế việc chia sẻ này với mục đích duy nhất là giúp mình quản lý việc download. Xin cảm ơn!
3. Cài đặt
Bước đầu để cài đặt giao diện cho Blog bạn cần làm theo hướng dẫn ở bài viết Blogger đã có plugin sao lưu tự động, toàn diện với một click chuột!
Chú ý: phần Phương Pháp Restore Blogs mục 3 nhỏ
4. Phản hồi và đóng góp ý kiến
Mọi thắc mắc ý kiến về giao diện này xin để lại phản hồi ở bài viết Metro Magazine - Premium Metro Style Magazine Blogger Template
III. Tinh chỉnh giao diện
1. Header Image
Khuyến khích mọi người sử dụng một hình ảnh hoặc banner cho Blog Header. Kích thước của ảnh hoặc banner vào khoảng 80x400(px) là thích hợp nhất. Để tùy chỉnh phần header bạn đọc có thể chỉnh sửa đoạn code sau trong Template
2. Thanh Mega Menu
Để tùy chỉnh thanh Mega Menu bạn tìm đến đoạn code sau trong Template và chỉnh sửa theo ý mình.
Thanh Mega Menu sử dụng một background làm nền và có liên quan chặc chẽ với màu nền của toàn bộ blog. Nếu bạn muốn chỉnh sửa sâu hơn về định dạng, màu sắc của Mega Menu thì cần phải thay đổi cả background của Mega Menu và code CSS.
3. Explore Top Tabber
Mặc định Explore Top Tabber có 3 tab và đã tích hợp Featured Posts và Lasted Posts.
a) Chỉnh sửa Featured Postsvà Lasted Posts
Để chỉnh sửa Featured Posts (hoặc Lasted Posts) bạn cần tìm đến widget Bloglist trong Layout có tên Featured Posts (Lasted Posts) nhấn Edit và đá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
Tiếp tục nhấn Add to list để thêm đường link vào trong Featured Posts 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 đổi địa chỉ blog của bạn. Các bài viết được đưa lên Features Posts phải được đánh nhãn hot
Đối với Lasted Postsbạn làm như trên nhưng ở phần Add linkbạn đổi bằng 4 link sau đây
Để tìm hiểu sâu hơn bạn cần đọc bài viết hướng dẫn Metro Featured Posts Widget cực đỉnh cho Metro Style Blogger Templates
b) Chỉnh sửa tab Services
Thực chất Tab Services là một HTML widget mặc định của Blogger và bạn hoàn toàn có thể sáng tạo tùy theo ý mình. Trong trường hợp bạn cần đoạn code HTML mình đã dùng cho Blog Demo thì chỉ cần đơn giản tìm HTML TopTab3 widget nhấn Edit và chèn đoạn code này vào thôi
c) Tùy biến Explore Top Tabber
Nếu muốn thêm tab hoặc sửa đổi tên tab thì tìm đến đoạn code sau trong Template
Dựa vào cấu trúc có lặp lại sẵn bạn hoàn toàn có thể tự mình thêm vào 1 hoặc nhiều tab nữa nhưng Hồng Hòa Vi cảnh báo bạn rằng tốc độ tải trang sẽ giảm đi đáng kể.
Dòng chữ explore là một tấm ảnh kích thước 100x32(px). Bạn có thể tự mình làm bức ảnh khác và tìm trong giao diện để thay vào
4. jQuery SlideShow
Trong Layout, bạn tìm đến jQuery Slideshow HTML widget , nhấn Edit và chèn vào đoạn code này
Thay đổi đường link và ảnh của riêng bạn. Để ảnh không bị méo mó do không đúng tỷ lệ bạn nên chỉnh bức ảnh về kích thước 640x250(px).
Trong 3 bức ảnh sẽ có 1 ảnh được hiện lên đầu tiên đó là ảnh được gán class=”active”
5. Banner quảng cáo
Có 2 vị trí đặt banner quảng cáo mặc định
a) Full widget banner
Có kích thước phi chuẩn 960x100(px). Để chỉnh sửa bạn tìm đến 960qc HTML widget trong Layout, nhấn Edit và chèn đoạn code sau:
b) Top sidebar banner
Vị trí banner ở trên cùng của sidebar có kích thước chuẩn 300x250(px). Để thay banner mặc định bạn tìm đến đoạn code sau trong Template
Tùy chỉnh đường dẫn và ảnh theo ý mình
6. Tùy chỉnh Social Item
Để tùy chỉnh đường dẫn cho các Icon Social bạn tìm đến đoạn code sau trong Template và sửa lại theo ý mình.
Ở đâ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. Các Categories ở Homepage
Mỗi Categories ở Homepage gồm 2 wigdet đặt kế nhau. 1 Picture widget làm icon, header và đoạn capture. 1 Feed widget để lấy feed theo label
a) Chỉnh sửa Picture Widget
Trong Layout bạn tìm đến các widget Picture 1, Picture 2… Picture 8 nhấn Edit để chỉnh sửa.
Title: Là tên của label (nhãn)
Caption: là một đoạn mô tả ngắn nằm ngay dưới phần tiêu đề và icon của nhãn. Bạn cần cân nhắc và chọn lọc ngôn từ thật ngắn gọn. Ngoài ra nó cần có sự cân đối với các nhãn khác.
Image: Bạn có 2 lựa chọn 1 ảnh từ máy tính hoặc ảnh từ internet. Ảnh phải có kích thước 48x48(px). Khuyến cáo bạn lấy ảnh từ máy tính.
Nhấn Save để lưu lại
b) Chỉnh sửa Feed
Sau khi tạo các header cho các categories bạn bắt đầu tạo feed cho nó bằng cách trong Layout nhấn add một Feed Widget
Sau đó ứng với mỗi nhãn chèn địa chỉ feed của nhãn vào Feed URL có dạng giống bên dưới. Nhớ thay tên blog và tên nhãn cho phù hợp
Tiếp tục chỉnh sửa Feed Widget.
Title: tên nhãn
Show: bạn đừng đánh dấu check vào ô nào cả, và chọn mặc định là 4 bài. (có thể chọn 5 hoặc 3… cũng được)
Tuy nhiên mọi việc chưa xong. Bạn cần xóa bỏ phần header của Feed Wiget. Trong Template bạn tìm đến đoạn code sau
c) Sắp xếp lại các Widget ở Homepage
Bước cuối cùng, bạn cần sắp xếp lại các widget ở trang chủ cho thật đẹp. Do việc thay đổi cấu trúc mặc định của Blog nên Blogger không cho phép chúng ta sắp xếp các widget theo kiểu kéo thả ở Layout. Bạn cần phải chỉnh sửa thủ công ở Template
Thông báo lỗi khi bạn lưu lại trật tự các widget ở Layout
Sau khi đã chỉnh sửa Picture và Feed Widget bạn vào Template (không mở rộng mẫu tiện ích - Expand Widget Templates) tìm đến đoạn code tương tự bên dưới và sắp xếp chúng lại thật ngăn nắp. Các Picture và Feed Widget phải được sắp xếp theo từng cặp thích hợp.
Ngoài ra khi nhìn vào đoạn code này bạn cũng dễ dàng nhận ra cấu trúc lặp của nó. Và bạn có thể hoàn toàn nâng số categories ở trang chủ lên 10 hoặc 12 một cách thoải mái.
Đoạn code bên dưới đây là đoạn code lấy từ Blog Metro Magazine Demo. Bạn tự xem và so sánh nhé.
Xem thêm phần 1 nhỏ của IV (Cách sắp xếp các sidebar widget)
IV. Một số điểm cần lưu ý
1. Cách sắp xếp các sidebar widget
Do thay đổi cấu trúc trang chủ của Blog nên Blogger không cho phép ta kéo thả các widget ở Layout. Muốn sắp xếp các widget của sidebar cần phải vào Template (không mở rộng mẫu tiện ích - Expand Widget Templates) và tự sắp xếp thủ công
VD như đây là đoạn code sidebar trong Template của giao diện Metro Magazine
Ứng với mỗi widget là một dòng code bạn tự cắt dán và sắp xếp theo trật tự mình muốn
2. Hoạt động của Metro Magazine
Hiện tại Giao diện Metro Magazine còn một số lỗi và sẽ được Hồng Hòa Vi nghiên cứu khắc phục trong thời gian sắp tới. Giao diện hoạt động tốt trên FF, Chrome và IE9
3. Phản hồi và đóng góp ý kiến
Mọi thắc mắc ý kiến về giao diện này xin để lại phản hồi ở bài viết Metro Magazine - Premium Metro Style Magazine Blogger Template
Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn
0 nhận xét:
Đăng nhận xét