Làm thế nào để Header, Navigation và Footer Full rộng trong Blogger

9:56 AM
Blogger là một dịch vụ sử dụng cung cấp rất nhiều thực sự hấp dẫn tìm kiếm mẫu mặc định cho những người mới bắt đầu. Mẫu mặc định có ích, nhưng những điều tốt đẹp về việc sở hữu blog của riêng bạn là bạn có cơ hội để thêm liên lạc cá nhân của riêng bạn. Như một vấn đề của thực tế, các mẫu không được thực hiện để hạn chế sự tự do của bạn về thiết kế, nhưng thay vào đó họ đang có để cung cấp cho bạn một nền tảng để xây dựng từ. Với mỗi mẫu mặc định có sẵn trên Blogger, bạn có thể thay đổi để phù hợp với phong cách của bạn. 

Một trong những yêu cầu phổ biến nhất của cộng đồng Blogger khi thực hiện thay đổi là làm thế nào để thay đổi giao diện của một số bộ phận quan trọng như tiêu đề, chuyển hướng, và cuối trang. Ban đầu, các mặt hàng này được thiết kế để phù hợp với chỉ trong vòng 1/3 trang, bao quanh bởi padding và lề hai bên. Những lợi nhuận được sử dụng để cung cấp cho trang web xuất hiện phù hợp mỏng, nhưng cũng có thể gây ra nội dung của bạn để tìm nén.

Lưu ý: Sao lưu mẫu của bạn

Làm thay đổi đến một màn hình đầy đủ Blogger chuyển hướng, chân, hoặc tiêu đề có thể được thực hiện và sẽ không mất nhiều thời gian. Trước khi thực hiện bất kỳ thay đổi, bạn nên lưu các bản sao thêm của tập tin xml mẫu trong trường hợp bất cứ điều gì sai trái. Bằng cách đó, nếu bạn không thích nó hoặc nó không đi ra tìm kiếm như nó nên, bạn có thể sử dụng lại nội dung của tập tin gốc để khôi phục lại blog của bạn vào hoạt động.

Demo

Di chuột lên ảnh để xem trước và sau khi dụ:


Làm thế nào để Header, Navigation và Footer Full rộng trong Blogger


Step #1:Truy cập CSS File

Nếu bạn chưa bao giờ mở file CSS của bạn trước, đăng nhập vào tài khoản Blogger của bạn, chọn blog của bạn và điều hướng đến mẫu> Edit HTML. Điều này sẽ mang đến những mẫu mã của bạn có chứa tất cả các file nội bộ của blog của bạn ở một nơi.

Step #2: Sửa đổi nền

Nhấn vào bất cứ nơi nào trong khu vực code> nhấn CTRL + phím F và gõ dòng sau> nhấn Enter để tìm thấy nó (dừng lại ở sự xuất hiện đầu tiên của nó):
body {
Ngay bên dưới body { bạn sẽ thấy một số dòng sẽ trông như thế này:
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
Trong trường hợp bạn nhìn thấy dòng nêu bật ở trên trong các mã, loại bỏ các dòng và thay thế bằng:
padding: 0px;
Mẫu khác nhau sẽ có sự thay đổi nhỏ, nhưng bạn vẫn có thể tìm thấy những dòng trong mỗi mẫu.

Step #3: Thay đổi mục nội dung

Tiếp theo, tìm kiếm bằng cách sử dụng phím CTRL + F cho phần này:
.content-inner {
Ngay bên dưới, bạn sẽ thấy dòng này:
.content-inner {
padding: $(content.padding) $(content.padding.horizontal); 
}
Loại bỏ các dòng màu đỏ và thay thế nó bằng:
padding: 0px;
Điều này sẽ loại bỏ bất kỳ của đệm xung quanh các nội dung bên trong, vì vậy nó sẽ không để lại bất cứ phòng nào của cả hai bên. 

Bây giờ tìm thấy một phần này:
$(content.background.color.selector){
Ngay bên dưới, bạn sẽ thấy dòng này:
$(content.background.color.selector){
background-color: $(content.background.color);
}
Thay thế dòng màu đỏ với:
background-color: $(body.background);
Cuối cùng, tìm kiếm từ khóa này:
]]></b:skin>
Và ngay trên đó, thêm CSS này:
.main-outer {
background: $(content.background.color);
}

Step #4: Thực hiện các nội dung bên ngoài hoàn toàn rộng

Nội dung được hiển thị khác nhau giữa các trình duyệt, do đó bạn sẽ tới muốn sửa lỗi này để nó làm thay đổi chiều rộng trên bảng. Mã này có thể được tìm thấy tìm kiếm:
.content-outer, .content-fauxcolumn-outer, .region-inner {
Và ngay bên dưới nó, bạn sẽ nhìn thấy những dòng sau đây:
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}
Xóa dòng màu đỏ và thay thế dòng với:
max-width: 100%;

Step #5: Kết thúc

Bây giờ bạn chỉ có hai dòng hơn bạn cần phải thay đổi. Hãy tìm:
</b:template-skin>
Và nhấn vào mũi tên bên phải để mở rộng phong cách. Lưu ý: bạn sẽ cần phải tìm kiếm</b:template-skin > thẻ một lần nữa, và ngay trước khi nó, bạn sẽ thấy các biểu tượng đánh dấu màu vàng:
]]>
</b:template-skin>
trên này ]]></b:template-skin>phần mã, thêm những điều sau đây:
.main-outer {
max-width: $(content.width);
margin: 0 auto;
}
Sau đó chạy một tìm kiếm cho:
]]></b:skin>
Thêm các dòng mã như trước / phía trên nó:
.tabs-inner {
padding: 0px;
}
.section {
margin: 0px;
}
.header-inner .widget {
margin: 0px;
}
Lưu mẫu và thoát ra khỏi trình biên tập.

Finished!

Sau cùng với hướng dẫn này sẽ không ảnh hưởng hoặc thay đổi các hình ảnh mà bạn đang sử dụng trên blog, chỉ cần thiết kế các khu vực nội dung. Nếu bạn có một biểu tượng trải dài trên màn hình và hoàn toàn phù hợp cho 1/3 trang tiêu đề, bạn sẽ cần phải thay đổi kích thước và tái tải lên nội dung này để nó có thể làm việc với những điều chỉnh mới. 

0 nhận xét

Navigation List