Cách chuyển giao diện blogspot thành giao diện web

Có một số bạn vào blog của tôi và than thở rằng "tớ thích template của cậu quá, mong cậu chỉ cách làm...". Thực tế đây cũng là niềm vui của người làm web khi có người nào đó nói thích cái gì đó trong trang của mình. Vì thấy được sự cần thiết nên tôi cũng cố gắng viết bài hướng dẫn này để chỉ cho các bạn nào thấy thích thú với template của tôi. Bài viết này hướng dẫn các bạn cách chuyển đối giao điện blogspot thành một giao diện web chính hiệu. Xin lấy ngay chính blog của tôi làm ví dụ.



* Điều kiện cần thiết là bạn phải có 1 template 3(4) cột. ( Nếu bạn vẫn chưa biết cách tạo blog 3 cột, có thể tham khảo ở đây:



Quote:

Hướng dẫn tạo template 3 cột cho blogspot - CuaSoIT.com



Tớ xin làm ví dụ với template 3 cột : 200,550,200.



Chỉ có 6 bước quan trọng trong việc chuyển đổi template. Đó là:

- Xóa header

- Điều chỉnh CSS

- Tạo banner và thanh menu ngang bên trên

- Tạo Menu dọc bên trái

- Tạo widget trái, phải

- Tạo footer phía dưới cùng

1. Bước đầu tiên là phải xóa đi cái header mặc định của blog. Cái header bao gồm Title (hoặc Image), Description nằm ở phía trên cùng của blog. Để xóa nó, bạn vào Template -> Edit HTML. Click chọn Expand Widget Templates. Tìm đoạn code có dạng như sau:



CODE 1:





Code:









....



....



....









Bạn hãy xóa đi tất cả những dòng nằm giữa dòng thứ 2 trên đếm xuống và dòng thứ 2 dưới đếm lên. Tức là bắt đầu xóa từ dòng Hãy thay toàn bộ CSS đó bằng CSS (CODE 3)này: Click xem Code 3



Đoạn CSS trên dài nhưng chỉ có một số điểm chú ý sau:

CODE 4:





Code:

body {

background:$bgcolor; /* màu nền toàn blog của bạn */

margin:0;

color:$textcolor;

font:x-small Georgia Serif;

FONT-SIZE: 11px; /* Kích cỡ của chữ mặc định trên blog bạn */

text-align: center;

}

....

....

#header-wrapper {

width:970px; /* Bề rộng của phần trên, bao gồm banner và thanh menu nang */

margin:0 auto 10px;

border:1px solid $bordercolor;

}

....

....

/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

background:#FF0000;

width: 970px;

margin:0 auto;

padding:0px;

text-align:left;

font: $bodyfont;

}



#main-wrapper {

background:#FF0000; /* Màu nền bài viết */

width: 550px; /* Bề rộng bài viết */

float: left;

padding:3px;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}



#sidebar-wrapper {

background:#294a7b; /* màu nền side bar */

width: 200px; /* chiều rộng sidebar */

float: right;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}



#leftsidebar-wrapper {

background:#294a7b;

width: 200px;

float: left;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

....

....

.sidebar .widget {

border-bottom:0px; /* lằn ngăn giữa các widget trong sidebar */

margin:0 0 0em; /* khoảng cách giữa các widget trong sidebar */

padding:0 0 0em;

}

....Kéo scrollbar lên trên cùng và xóa đi dòng

Code:

.