Tự làm Blogspot - 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.

Mục lục seri các bài viết hướng dẫn tự thiết kế blogspot:

  1. Tự thiết kế giao diện cho blogspot (dành cho người không biết code)
  2. Sắp xếp bố cục trong blogspot và thêm tiện ích cho các layout
  3. Thiết kế phần header cho blogspot (phần đầu trang)
  4. Thiết kế menu cho blogspot
  5. Tùy chỉnh phần hiển thị nội dung của blogspot
  6. Tùy chỉnh sidebar cho blogspot
  7. Tùy chỉnh footer cho blogspot
  8. Tối ưu giao diện để blogspot chuẩn SEO

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.
Chúc các bạn thành công!