Thứ Năm, 18 tháng 9, 2014

HƯỚNG DẪN TÙY CHỈNH LẠI GIAO DIỆN PHẦN BỐ CỤC TRONG BLOGGER

Hướng dẫn tùy chỉnh lại giao diện phần Bố Cục trong Blogger
Nếu bạn đã thử qua việc tự thiết kế cho mình một Blogger template, bạn sẽ thấy đôi khi đối với một số giao diện mà bạn thiết kế ra, lại bị đảo lộn lung tung trong phần "Bố Cục" tại trang "Tổng quan" của blog đó khiến người dùng khó xác định vị trí để chỉnh sửa hoặc thêm tiện ích vào nó. Không những thế, những list-style của ul, li cũng nằm tràn vào khiến phần bố cục trong cực kì hỗn độn.
Hướng dẫn tùy chỉnh lại giao diện phần Bố Cục trong Blogger

Do đó hôm nay tại bài viết này mình xin chia sẻ với các bạn một thủ thuật nhỏ giúp tinh chỉnh lại giao diện phần bố cục của Blogger chỉ với vài bước đơn giản.

Hướng dẫn tùy chỉnh lại giao diện phần Bố Cục trong Blogger
Bước 1: Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML

Bước 2: Tìm đến thẻ <b:skin><![CDATA[ và thêm đoạn CSS này ngay vào sau nó
body#layout ul{list-style-type:none;list-style:none}
body#layout ul li{list-style-type:none;list-style:none}
body#layout .container {overflow: hidden;clear: both;} /* Chứa phần chính blog và sidebar */
body#layout .blog-main {width:66%;float:left;} /* Phần chính của blog */
body#layout .blog-sidebar {width:34%;float:right;} /* Phần sidebar */
Lưu ý: đoạn css trên chỉ đúng với blog của mình, còn blog của bạn có cấu trúc khác bạn phải tự làm lại. Đơn giản lý do vì khi vào phần bố cục, đôi khi phần css mặc định tùy chỉnh layout của chúng ta bị mất đi, hoặc kích thước không được hiển thị đúng, đo đó chúng ta phải tùy chỉnh lại toàn bộ bằng css.

Để tùy chỉnh bất cứ phần nào của blog, bạn chỉ cần thêm body#layout và thuộc tính bạn cần tùy chỉnh lại cho giao diện của bạn, thậm chí tô màu, v.v.., và thêm một lưu ý nữa bạn nên sử dụng % thay vì kích thước chính xác vì như đã nói đôi lúc kích thước sẽ không được hiển thị đúng.

Như vậy coi như là mình đã hướng dẫn xong cho các bạn cách để tùy chỉnh phần giao diện bố cục cho blog của bạn, mong rằng thủ thuật này giúp bạn có một phần bố cục ưng ý cho riêng bạn.

0 nhận xét:

Đăng nhận xét