Kiến Thức Online: Chuyển giao diện blogspot thành giao diện web

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

Bước 1 : Đầ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:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
lt;b:widget id='Header1' locked='true' title='Test1 (Header)' type='Header'>
....


....


....

</b:widget>
</b:section>
</div>

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 <b:widget id='Header1' ... đến dòng </b:widget>. Ở dòng thứ 2 bạn hãy bỏ đi cụm maxwidgets='1' và sửa showaddelement='no' thành showaddelement='yes'. Đoạn code còn lại sau các thao tác này là:

CODE 2:

<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='yes'>

</b:section>
</div>

Xong bạn bấm Sava Template. Lưu ý là bạn sẽ gặp một thông báo:

Thông báo này hỏi rằng bạn có "quyết định" xóa header đi không. Bạn chọn Confirm & Save.
Bước 2 : Điều chỉnh CSS. Hãy bỏ Click chọn Expand Widget Templates cho dễ nhìn code. CSS của bạn bắt đầu và kết thúc như sau:

CODE 2:

/* Variable definitions
====================
....
....
....
/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
]]>

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:

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;
}

Bước 3 : Tạo banner và thanh menu ngang

- Tạo banner và Logo
Bấm vào nút Add A Page Element nằm trên cùng để tạo 1 HTML/Javascript widget với tiêu đều rỗng. Nội dung của widget đó là:

Code 1:

<noscript>
<hr/>
<div style="font-size:200%; color:red; font-weight:bold;" align="center">To best view this page, please Enable Javascript in your Browser</div>
</noscript>
<div>
  <table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
  <td width="160" style="padding-left:5" height="60" align="left">
   <a href="http://kienthuctrenmang.blogspot.com(Địa chỉ blog bạn)">
<img src="http://img113.imageshack.us/img113/6356/vwglogo1nx4.gif(Link logo của bạn)"/></a></td>
  <td style="padding-right:5" height="60" align="center">
  <span style="color:#003399; font-size:200%;">

Welcome to Kiến Thức Online  ( Tiêu để của web bạn )

  </span>
  <br/><span style="color:#003399; font-size:110%;">

  Chúc bạn 1 ngày thành công ( Miêu tả Blog của bạn)

  </span>
  </td>
</tr>
</table>

Thay đổi các dòng chữ màu đỏ sao cho phù hợp với blog của bạn. Sau đó bấm Save.

Click vào ảnh để xem hình

- Tạo thanh menu ngang

Cũng làm tương tự như trên, nhưng bạn hãy chú ý kéo widget của menu ngang nằm dưới của cái banner lúc nãy. Nội dung của widget thanh menu ngang:

Code 2:

lt;table border="0" style="BORDER-COLLAPSE: collapse" cellpadding="0" width="100%" background="http://haimiennam.googlepages.com/topmen01.gif" height="37">
<tbody>
<tr>
<td valign="top">
<table border="0" style="BORDER-COLLAPSE: collapse" cellpadding="0" width="100%" height="30">
<tbody><tr>
<td class="top" align="left">

<a class="top" href="http://kienthuctrenmang.blogspot.com">Home</a>

</td>
<td align="right">
<a href="ymsgr:sendim?haimiennam ( nick của bạn )">
<img border="0" = alt="Liên hệ" src="http://opi.yahoo.com/online?u" 2&l="us></a"haimiennam ( nick name của bạn )&m="g&t"/></a>
</td></td></tr></tbody></table>
</td></tr></tbody></table>

Nhớ bấm nút Save màu vàng phía trên sau các thao tác sắp xêp widget.

Bước 4: Tạo Menu dọc bên trái:

- Chọn Add a Page Element ở sidebar bên trái.
- Tạo một HTML/JAVASCRIPT widget không chủ đề, nội dung là:

Code 3:


  <table border="0" style="BORDER-COLLAPSE: collapse" cellpadding="0" width="100%">
  <tbody><tr>
  <td style="FONT-WEIGHT: bold; FONT-SIZE: 10px; TEXT-TRANSFORM: uppercase; COLOR: #FF0000; FONT-FAMILY: Tahoma" background="http://haimiennam.googlepages.com/bgmen.gif" height="26">
   <img border="0" width="16" src="http://haimiennam.googlepages.com/kvr.gif" height="8"/>Mục Lục ( Tiêu đề mục lớn ) </td></tr>
  <tr>
  <td bgcolor="#000000">
  <table bordercolor="#31a2de" border="0" style="BORDER-COLLAPSE: collapse" cellpadding="0" width="100%">
  <tbody>

  

  <tr><td onmouseover="this.style.background='#30A1DB'" style="CURSOR: hand" onmouseout="this.style.background='#0168B3'" class="tdmenu" height="20" onclick="window.location.href=http://kienthuctrenmang.blogspot.com/search/label/Home">
   <img border="0" width="16" src="http://haimiennam.googlepages.com/kvr2.gif" height="5"/>Trang chủ</td></tr>

  

  </tbody></table></td></tr>
</tbody></table></tbody></table></tbody></table>

Hãy thay dòng chữ màu đỏ thành link và tên của Label mà bạn cần. Từ nay, mỗi khi thêm 1 label mới, bạn hãy tạo thêm 1 menu mới bằng cách chỉ cần copy toàn bộ đoạn code và rồi thay các link và tên sao cho phù hợp.

Bước 5:. Tạo widget trái và phải:

- Để tạo widget trái hoặc phải, bạn hãy click vào nút Add A Page Element tương ứng.
- Tạo một HTML/JAVASCRIPT widget không chủ đề,
nội dung là:

div align="right">
  <table style="BORDER-COLLAPSE: collapse" cellpadding="0" width="100%">
  <tbody>
  <tr><td><table border="0" style="BORDER-COLLAPSE: collapse" cellpadding="0" width="100%">
  <tbody><tr><td width="16" height="20" bgcolor="#30a1db">
   <img border="0" width="16" src="http://haimiennam.googlepages.com/kvr.gif" height="8"/></td>
<td class="A_white" height="20" bgcolor="#30a1db"> <span style="color:#FFFF00;">Top Views ( tiêu đề của widget )</span></td></tr></tbody></table></td></tr>
  <tr><td bgcolor="#30a1db"><img border="0" width="1" src="http://haimiennam.googlepages.com/spacer.gif" height="2"/></td></tr>
  <tr><td bgcolor="#ffffff"><img border="0" width="1" src="http://haimiennam.googlepages.com/spacer.gif" height="1"/></td></tr>
  <tr><td valign="top" style="BORDER-RIGHT: #30a1db 1px solid; BORDER-TOP: #30a1db 1px solid; BORDER-LEFT: #30a1db 1px solid; BORDER-BOTTOM: #30a1db 1px solid; BACKGROUND-COLOR: #ffffff">
  <table border="0" style="BORDER-COLLAPSE: collapse" cellspacing="0" cellpadding="0" width="100%">
  <tbody><tr><td valign="top">

( Nội dung của bạn. Cái này là ví dụ:
<script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeed43.com%2Fblogger-media.xml&num=5&targ=n&utf=y" type="text/javascript"></script>)

</td></tr></tbody></table></td></tr>
  </tbody></table>
  </div>

Bạn hãy để ý các chữ màu đỏ: right ( hoặc left ) nếu widget này nằm bên phải ( hoặc trái ). 100% đó là bề rộng của widget. Thay tiêu đề và nội dung widget sao cho phù hợp.

Bước 6 :Tạo footer ở phía dưới cùng:

- Chọn Add a Page Element ở dưới cùng.
- Tạo một HTML/JAVASCRIPT widget không chủ đề,
nội dung là:

table border="0" style="BORDER-COLLAPSE: collapse" cellpadding="0" width="100%"bgcolor="#30a1db">
  <tbody><tr><td><img border="0" width="1" src="http://haimiennam.googlepages.com/spacer.gif" height="7"/></td></tr>
  <tr><td valign="top" background="http://haimiennam.googlepages.com/topmen01.gif" height="37">
  <table border="0" style="BORDER-COLLAPSE: collapse" cellpadding="0" width="100%" height="30">
  <tbody><tr>
  <td width="30" align="right"><a href="#" title="Lên đầu trang"><img border="0" width="20" src="http://haimiennam.googlepages.com/ltr.gif" height="22"/></a></td>
  <td valign="middle" style="margin-left:5" class="top" align="right">

  

   </td>
  <td width="30"><a href="#" title="Lên đầu trang"><img border="0" width="20" src="http://haimiennam.googlepages.com/ltr.gif" height="22"/></a> </td></tr></tbody></table></td></tr>
  <tr><td align="middle"><font class="footmsg">


  <center>(C) 2008 Đinh_Thiên_Hoàn</center>

</font></td></tr>
  </tbody></table>

Để làm cho blog có vẻ pro, bạn nên tắt các widget mặc định như Label, Archive, About, ... Nói chung là không nên để lại các widget có sẵn. Bạn hãy tự tạo tất cả các widget theo cách trên để được các widget đồng dạng và như vậy blog nhìn sẽ không bị mất cân đối. Hy vọng với những thủ thuật nho nhỏ này, có thể giúp được bạn có một blog đẹp và pro hơn.