Sắp xếp bố cục trong blogspot và thêm tiện ích cho các layout

GTV - Chào các bạn, chúng ta tiếp tục đến phần tiếp theo trong seri các bài viết hướng dẫn tự thiết kế Blogspot nhé. Hôm nay chúng ta sẽ đi vào phần sắp xếp bố cục trong blogspot và thêm tiện ích cho các layout.

Thêm tiện ích cho các layout (thẻ div)

Nếu các bạn đã vọc vạch một chút về blogspot thì khi vào phần Bố cục các bạn sẽ thấy có khối giao diện và có phần Thêm tiện ích ở trên các khối đó. Khi click vào Thêm tiện ích các bạn sẽ thêm được một số phần mà Blogspot cung cấp sẵn. Nhưng đối với code mà chúng ta tự làm ban đầu sẽ không có phần Thêm tiện ích này. Để thêm được tiện ích vào các layout (thẻ div) rất đơn giản thôi.

Đầu tiên các bạn vào Chỉnh sửa HTML, sau đó tìm các đoạn thẻ <div> </div>. Chèn code sau vào giữa hai thẻ div đó là xong:

<b:section class='chan-trang' id='chan-trang' showaddelement='yes'/>

Trong đó
Class='chan-trang' - đoạn div đó sẽ có lớp CSS là chan-trang
id='chan-trang' - tên của khối giao diện sẽ hiển thị trong phần Bố cục

Ví dụ:

<div class='chan-trang'>
<b:section class='chan-trang' id='chan-trang' showaddelement='yes'/>
</div>

Giờ vào bố cục và kiểm tra thử nhé.

Phần đầu trang, logo, đầu trang phải, thân web, thân web trái, thân web phải và chân trang các bạn hãy thêm vào hết để sau này có thể Thêm tiện ích vào được nhé. Chú ý các bạn có thể để id tùy thích nhưng Class thì các bạn nên để sao cho có liên quan và dễ nhớ để sau này còn viết CSS cho nó nữa nhé.

Sắp xếp bố cục trong Blogspot

Phần Bố cục là phần rất trực quan để các bạn có thể thêm thành phần mới vào web mà không cần phải động tới code nhiều. Thế nhưng đôi khi phần Bố cục này nhìn rất rối mắt thậm chí bạn còn không biết phần nào với phần nào, vì thế bạn nên sắp xếp Bố cục cho giống với giao diện web để dễ nhìn, dễ nhớ, dễ chỉnh sửa. Để chỉnh Bố cục cho giống giao diện web trước hết chúng ta xem lại giao diện web mà ta định làm nhé.

Rồi, giờ ta sẽ chỉnh sửa Bố cục như sau:

Vào Chỉnh sửa HTML, tìm đến thẻ <html> Thêm đoạn code sau vào trước <html

b:version='2' class='v2'

Nó sẽ thành như sau:

<html b:version='2' class='v2' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Một số bạn nếu không làm mà chỉ xem sẽ thắc mắc tại sao lúc ban đầu mình gửi code chỉ là thẻ <html> mà giờ nó lại có một đoạn dài đằng sau như thế kia thì giải thích luôn đó là do blogspot tự sinh ra nhé. Bật mí với các bạn là Blogspot tự sinh ra nhiều thứ lắm.

Mục đích việc thêm b:version='2' class='v2' là để chuyển sang version 2 của blogspot (blogspot có 2 version nhé, version 1 không dùng được cách này)

Tìm đến đoạn ]]></b:skin> Thêm code sau vào dưới ]]></b:skin>

<b:template-skin><![CDATA[
]]></b:template-skin>

Ở giữa đoạn <![CDATA[ và ]]> sẽ là code CSS của layout nhé

Code css của layout có cấu trúc như sau:

#layout .ID-class-div {
width: 30%;
float: right;
}

Ví dụ mình để code như thế này:

#layout .dau-trang {
width: 100%;
}
#layout .logo {
width: 300px;
float: left;
}
#layout .dau-trang-phai {
width: 400px;
float: right;
}
#layout .menu {
width: 97%;
padding-top: 150px;
}
#layout .than-web {
width:100%;
}
#layout .than-web-trai {
width: 400px;
float: left;
}
#layout .than-web-phai {
width: 300px;
float:right;
}
#layout .chan-trang {
width: 97%;
}

Khi vào Bố cục nó sẽ hiển thị như sau:

Các bạn chú ý là khi chỉnh sửa CSS phần Bố cục này sẽ không ảnh hưởng đến giao diện trên web nhé. Nó chỉ ảnh hưởng đến giao diện trong phần Bố cục thôi.

Mọi người tùy chỉnh sắp xếp layout theo ý thích nhé, không nhất thiết phải làm như mình đâu. Vậy là xong phần sắp xếp bố cục trong blogspot và thêm tiện ích cho các layout.
Các bạn có gì không hiểu để lại comment mình sẽ giải đáp nhé!