Welcome to diepit.tk---> Hãy cùng khám phá---> Để-> Cùng nhau thành công & Cùng nhau tận hưởng

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! ) . 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:

nhớ bấm ctr+f để tìm cho dễ nha :





....

....

....






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 . Ở 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:





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



Spoiler:



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


Hãy thay toàn bộ CSS đó bằng CSS (CODE 3)này:

CODE 3:

/* Variable definitions
====================
type="color" default="#fff" value="#32527A">
type="color" default="#333" value="#333333">
type="color" default="#58a" value="#5588aa">
type="color" default="#666" value="#666666">
type="color" default="#999" value="#999999">
type="color" default="#c60" value="#003366">
type="color" default="#ccc" value="#cccccc">
type="color" default="#999" value="#999999">
type="color" default="#666" value="#666666">
type="color" default="#999" value="#999999">
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Verdana, sans-serif">
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% Arial, sans-serif">
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Trebuchet, Trebuchet MS, Arial, sans-serif">
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% Trebuchet, Trebuchet MS, Arial, sans-serif">
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, TD {FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: tahoma, verdana, arial}

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.A_white {
FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffffff; FONT-FAMILY: tahoma, verdana, arial; TEXT-DECORATION: none
}

.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;
overflow: hidden;
}

#leftsidebar-wrapper {
background:#294a7b;
width: 200px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

/* 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
}
]]>


Đ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 .

3. Tạo banner. ( Mời các bạn xem tiếp ở đây )


















Loading...

Đăng nhận xét

Cảm ơn các bạn đã ghé thăm blog của diepcothanh