- Phát triển Blog - Cách tùy chỉnh bố cục trong Blogspot

Trong Blogspot hẳn có nhiều bạn sẽ đặt ra câu hỏi là làm thế nào để tùy chỉnh bố cục cho nó. Bài viết hôm nay mình sẽ không nói về vấn đề sắp xếp vị trí một cách đơn giản mà mình sẽ đề cập đến vấn đề phá cách bố cục bình thường của blogspot.
Trong bài viết này, mình sẽ lấy một ví dụ nhỏ để giúp các bạn mới biết đến Blogspot có thể tự mình tạo ra các blogspot mang phong cách riêng của mình.
Đầu tiền bạn hãy để ý đến khung làm việc trong mục “bố cục” của Blogspot
Sladar Gai phát triển Blog
Phần bố cục của Sladar Gai's Blog

Thử lấy ví dụ cho khung "crosscol-overflow", trong trường hợp bạn kéo một tiện ích bất kỳ (ở đây mình chọn là tiện ích dịch ngôn ngữ) vào đó.
Sladar Gai phát triển Blog
Đưa một tiện ích bất kỳ vào khung crosscol-overflow
Bạn sẽ được một kết quả như sau:
Sladar Gai phát triển Blog
Phần mới được thêm vào
Điều này xảy ra khi đoạn mã của cái khung này (code) nằm trong một thẻ tên là "div" của khung "crosscol" mục đích chính của google là mong muốn bạn phát triển một thanh tương tự như thế ở bên dưới hoặc đại loại thế. 
Nếu bạn không thích điều ấy và có những ý tưởng của riêng mình thì bạn hãy làm theo các bước sau:
Bước 1:Thay đổi thẻ mã của khung crosscol-overflow trong mục Mẫu > Chỉnh sửa HTML: Bạn nhấn Ctrl+F và tìm từ khóa "crosscol-overflow" (tên của khung mà bạn muốn thay đổi)
Copy và chuyển đoạn mã đến chỗ mũi tên
Bạn copy đoạn mã b:section class='tabs' id='crosscol-overflow' này xuống chỗ mũi tên chỉ, trước đoạn mã <div class='main-outer'> và Lưu mẫu lại.
Bạn sẽ được:
Sladar Gai phát triển Blog
Kết quả lúc này
Tiện ích "Dịch đã được tách ra khỏi khung của Crosscol ban đầu.
Một tùy biến nhỏ sau đây mình đưa ra đó là thêm một hình ảnh vào thay cho tiện ích dịch. 
Các bạn vào Bố cục>thêm tiện ích>Html&java trong đó các bạn thêm code:
<div style="width:1100px; height:100px; margin:0 auto;"><img src="Link dẫn URL của hình ảnh" width="1100" height="258" />
</div>
Trong đó các bạn thay link dẫn URL hình ảnh cho phù hợp và sửa lại các thông số width, height, margin để phù hợp với thông số trên blog của mình
Chúc các bạn thành công!

0 nhận xét: