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! ) . 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: |
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test1 (Header)' type='Header'>
....
<!--Show just the image, no text-->
....
<!--Show image as background to text-->
....
</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. Xong bước 1.
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;
}
]]></b:skin>
|
Hãy thay toàn bộ CSS đó bằng CSS (CODE 3)này:
CODE 3:
[Bấm vào đây để Mở CODE 3] |
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#32527A">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#666666">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#999999">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#003366">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#999999">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal
100% Verdana, sans-serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet
MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% Arial,
sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200%
Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana,
Sans-serif" value="normal normal 78% Trebuchet, Trebuchet MS, Arial,
sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana,
Sans-serif" value="normal normal 78% Verdana, sans-serif">
*/
/* Use this with templates/template-twocol.html */
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
FONT-SIZE: 11px;
text-align: center;
}
BODY {SCROLLBAR-FACE-COLOR: #294a7b; SCROLLBAR-HIGHLIGHT-COLOR: #246494;
SCROLLBAR-SHADOW-COLOR: #969696; SCROLLBAR-3DLIGHT-COLOR: #ededed;
SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #246494;
SCROLLBAR-DARKSHADOW-COLOR: #ededed
}
TR {FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: tahoma, verdana, arial}
TD {FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: tahoma, verdana, arial}
FORM { MARGIN: 0px }
INPUT {BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT:
11px tahoma, verdana, arial; BORDER-LEFT: #000000 1px solid; COLOR: #000000;
BORDER-BOTTOM: #000000 1px solid}
HR {BORDER-RIGHT: #b9b9b9 0px solid; BORDER-TOP: #b9b9b9 1px solid;
BORDER-LEFT: #b9b9b9 0px solid; BORDER-BOTTOM: #b9b9b9 0px solid; HEIGHT:
0px
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}
TD.top {
FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY:
Tahoma,Verdana,Arial
}
A.top:link {
FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY:
Tahoma,Verdana,Arial
}
A.top:active {
FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY:
Tahoma,Verdana,Arial
}
A.top:visited {
FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY:
Tahoma,Verdana,Arial
}
A.top:hover {
COLOR: #294a7b; TEXT-DECORATION: none
}
.A_white {
FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffffff; FONT-FAMILY: tahoma,
verdana, arial; TEXT-DECORATION: none
}
A.A_white:link {
FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffffff; FONT-FAMILY: tahoma,
verdana, arial; TEXT-DECORATION: none
}
A.A_white:active {
FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffffff; FONT-FAMILY: tahoma,
verdana, arial; TEXT-DECORATION: none
}
A.A_white:visited {
FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffffff; FONT-FAMILY: tahoma,
verdana, arial; TEXT-DECORATION: none
}
A.A_white:hover {
COLOR: #ffffff
}
.tdmenu {
BORDER-TOP: 1px solid; FONT-WEIGHT: bold; BORDER-LEFT-WIDTH: 1px; FONT-SIZE:
9px; TEXT-TRANSFORM: uppercase; COLOR: #e4e4e4; BORDER-BOTTOM: 1px solid;
FONT-FAMILY: Verdana; BACKGROUND-COLOR: #0168b3; BORDER-RIGHT-WIDTH: 1px
}
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:970px;
margin:0px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 0px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-left: auto;
margin-right: auto;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
background:#FFFFFF;
width: 970px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
background:#FFFFFF;
width: 550px;
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;
width: 200px;
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
*/
}
/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-size:12px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
/* them dong nay */
font-family: "Courier New", Courier, monospace;
text-transform:capitalize;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:700;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}
.post p {
margin:0 0 .75em;
line-height:1.6em;
}
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
/*letter-spacing:.1em; */
font: $postfooterfont;
line-height: 1.4em;
}
.comment-link {
margin-left:.6em;
}
.post img {
padding:4px;
border:0px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
/* letter-spacing:.2em;*/
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget {
border-bottom:0px;
margin:0 0 0em;
padding:0 0 0em;
}
.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 0.2em;
padding:0 0 0.2em;
}
.main .Blog {
border-bottom-width: 0;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid $bordercolor;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}
/* Footer
----------------------------------------------- */
#footer {
width:1000px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
/* text-transform:uppercase;
letter-spacing:.1em; */
text-align: center;
}
.footmsg {
FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #003c5e; FONT-FAMILY: Arial
}
/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
]]></b:skin>
|
Đ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;
}
....
|
Kéo scrollbar lên trên cùng và xóa đi dòng <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> .
3. Tạo banner.
( Mời các bạn xem tiếp ở đây )
Anh Võ
nguồn: vietwebguide.blogspot.com
