Nếu bạn muốn Blog của bản thân trở nên chuyên nghiệp và thu hút hơn mà chưa tìm được giao diện phù hợp hoặc chưa biết cách chỉnh sửa giao diện thì tham khảo bài viết này nhé. Mình sẽ giới thiệu đến các bạn mẫu template miễn phí cực đẹp và cách chỉnh sửa chi tiết để bạn có thể thực hiện. Mẫu giao diện này phù hợp cho các bạn làm website cá nhân như bác sĩ, giáo viên, sinh viên, mẹ bỉm, spa, tiệm bánh…
Trước tiên các bạn cần tải template và cài đặt vào chủ đề blog.
Trong trang quản trị Blog, các bạn chọn phần Bố cục, hầu hết việc chỉnh sửa giao diện sẽ thực hiện trong phần này.
Các bước chỉnh sửa giao diện Blogspot.
Bước 1: Chỉnh tiêu đề Blog và Logo.
Trong phần Header Logo, các bạn có thể điều chỉnh Tiêu đề Blog, Mô tả Blog. Để thay đổi Logo, bạn nhập URL của ảnh, hoặc chọn tải ảnh lên từ máy tính.
Bước 2: Chỉnh Scrolling menu.
Scrolling menu giúp bạn di chuyển nhanh đến phần trang web bên dưới thay vì dùng thanh cuộn. Trong bản template miễn phí, phần giao diện tương ứng với mục “PROJECTS” và “REVIEWS” không có nên các bạn có thể xóa 2 phần này. Các phần còn lại các bạn đổi tên cho phù hợp nội dung website.
Bước 3: Chỉnh Main menu.
Phần Main menu sẽ xuất hiện khi bạn xem bài viết trên blog. Phần này thường được gắn link kèm theo để người xem truy cập các mục quan trọng trong blog. Nếu bạn muốn khi người xem click vào link sẽ hiển thị ra danh sách bài viết của một nhãn nào đó (ví dụ nhãn: chủ đề 1) thì bạn có thể gắn kèm link theo mẫu: /search/label/chu-de-1?&max-results=8 (số lượng bài viết hiển thị là 8, bạn có thể điều chỉnh tùy ý).
Bước 4: Chỉnh Main intro.
Trong mục Image Background, bạn có 2 lựa chọn True/False. Nếu chọn False, blog sẽ hiển thị hình nền mặc định lúc cài template; nếu chọn True, blog sẽ hiển thị hình do bạn tải lên. Để tải hình lên, bạn nhấn chỉnh sửa phần We Are Infity, We Are Best và chọn Tải hình ảnh lên từ máy tính. Phần nội dung văn bản hiển thị trên hình cũng được chỉnh sửa trong phần này, hãy gõ nội dung bạn muốn hiển thị nhé.
Bước 5: Chỉnh Service List.
Trong phần này bạn có thể điều chỉnh nội dung văn bản hiển thị bằng cách click vào nút “chỉnh sửa”.
Phần hình vuông màu xám phía trên mặc định không sửa được dù bạn tải ảnh lên trong hộp thoại chỉnh sửa. Nếu muốn thay hình vuông màu xám này bằng hình ảnh của bạn, hãy xóa đoạn code trong HTML Chủ đề của Blog. Trong hướng dẫn này chỉ thực hiện với hình vuông đầu tiên, tương ứng mục Image6 trong Chủ đề, bạn cần thực hiện xóa đoạn code cho các hình vuông còn lại trong mục Image7, Image8 và Image9. Khi tải lên các hình ảnh thay thế, bạn nên chọn những ảnh có cùng kích thước để không phá vỡ cấu trúc giao diện.
Phần code bôi đen là đoạn code cần xóa, bạn hãy kiểm tra trước khi xóa nhé.
Bước 6: Chỉnh Brand Logos.
Phần này bạn có thể dùng hiển thị một số hình ảnh bạn muốn, ví dụ logo của các thương hiệu mà bạn hợp tác… Lưu ý là nên chọn những ảnh có kích thước như nhau để tránh phá vỡ cấu trúc giao diện.
Phần này có nền màu đen, nếu bạn muốn chỉnh sửa màu nền, hãy thực hiện trong phần Chỉnh sửa HTML của Chủ đề. Trong HTML chủ đề, click chuột vào vị trí bất kỳ, bấm Ctrl+F để mở hộp thoại tìm kiếm, sau đó gõ brand-services-wrap{ và nhấn Enter. Tìm đến dòng có đoạn:
#brand-services-wrap{
display:none;
float:left;
width:100%;
background:#443f45;
padding:30px 0
Hãy tìm mã màu mà bạn muốn và thay đổi ở dòng background:#443f45
Nhấn lưu lại và kiểm tra giao diện của bạn nhé.
Bước 7: Chỉnh Headline Text 05 và Main Post.
Mục Recent Blog Posts bạn có thể sửa thành “Bài viết gần đây”.
Mục Bài đăng trên Blog cho phép bạn điều chỉnh số lượng bài viết hiển thị trên trang chính và những thông tin được phép hiển thị của bài viết. Bạn có thể thay đổi những nội dung này một cách dễ dàng.
Bước 8: Chỉnh Sidebar Right.
Trong phần này bạn có thể chỉnh mục Popular Post thành “Bài xem nhiều nhất”. Mục Project không hiển thị được nên bạn có thể chọn Tắt hiển thị. Mục Subcribe Us, nếu bạn có link kênh youtube có thể dán link vào phần src=“…”
Mục Categories và Tag sẽ tự động hiển thị nhãn và tag bài đăng của bạn.
Bước 9: Chỉnh Headline Text 06 và Author Info.
Phần này bạn có thể sử dụng để giới thiệu đội ngũ nhân sự hoặc tùy vào mục đích của bạn. Lưu ý là nên chọn những hình ảnh có kích thước bằng nhau để không làm phá vỡ cấu trúc giao diện.
Mục Author Image các bạn thay đổi hình ảnh giống như cách thực hiện với Author Info nhé.
Bước 10: Chỉnh Social and Subcribe.
Mục Link List cho phép bạn giới thiệu địa chỉ mạng xã hội để người xem theo dõi.
Bước 11: Chỉnh Contact và Footer Navigation.
Trong phần này các bạn để lại thông tin liên hệ và một số link dẫn đến các trang giới thiệu, liên hệ nhé.
Bước 12: Chỉnh bản đồ.
Trong Bố cục không có phần để chỉnh sửa bản đồ để hiển thị vị trí của bạn nên mình sẽ hướng dẫn bạn điều chỉnh trong HTML.
Đầu tiên bạn mở Google Map và chọn đúng vị trí của mình, sau đó click chuột phải chọn Chia sẻ vị trí này, khi hộp thoại mở ra, bạn chọn phần Nhúng bản đồ, sau đó chọn Sao chép HTML.
Tiếp theo, trong Chủ đề của Blog, mở phần chỉnh sửa HTML, click chuột vào vị trí bất kỳ rồi bấm Ctrl+F để mở hộp thoại tìm kiếm, gõ maps.google rồi nhấn Enter. Bạn chỉ tìm được 1 vị trí có dòng maps.google, đó là vị trí code nhúng bản đồ. Hãy chọn phần code bắt đầu từ <iframe và kết thúc bằng style='border:0'/> rồi xóa đi, sau đó nhấn Ctrl+P để dán phần HTML đã sao chép lúc này. Nhấn lưu lại và mở lại trang web của bạn để xem kết quả nhé.
Như vậy là mình đã chia sẻ cách chỉnh sửa giao diện chi tiết đối với mẫu template Infinity miễn phí. Hi vọng bài viết sẽ hữu ích và giúp bạn chỉnh sửa thành công giao diện blog của bản thân.
Chúc các bạn thành công!
