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...
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 {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:
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
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 {Loại bỏ các dòng màu đỏ và thay thế nó bằng:
padding: $(content.padding) $(content.padding.horizontal);
}
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){Thay thế dòng màu đỏ với:
background-color: $(content.background.color);
}
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 {Xóa dòng màu đỏ và thay thế dòng với:
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}
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:
]]>trên này ]]></b:template-skin>phần mã, thêm những điều sau đây:
</b:template-skin>
.main-outer {Sau đó chạy một tìm kiếm cho:
max-width: $(content.width);
margin: 0 auto;
}
]]></b:skin>Thêm các dòng mã như trước / phía trên nó:
.tabs-inner {Lưu mẫu và thoát ra khỏi trình biên tập.
padding: 0px;
}
.section {
margin: 0px;
}
.header-inner .widget {
margin: 0px;
}
No comments: