• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Chia Header thành 2 phần hoặc 3 phần

35
14/01/2011

Header của một Blogger Template cơ bản thường chỉ gồm 1 phần. Đôi khi bạn cần chia Header thành 2 hoặc 3 phần để bố trí một banner quảng cáo hoặc một thành phần khác để giúp cho blog của bạn trở nên cân đối hơn.

Trường hợp thứ nhất là chia Header thành 2 phần. Trước tiên bạn cần xác định id cho cả Header là header-wrapper, id cho phần bên trái (thường chứa Tiêu đề Blog) là header và id cho phần bên phải là header-right.

Đăng nhập Blogger, vào Design >> Edit HTML. Tìm đoạn code CSS tương tự như sau.

#header-wrapper {
margin: 0 auto;
width: 800px;
...
}
#header {
...
}

Rồi thay nó bằng đoạn code bên dưới.

#header-wrapper {margin: 0 auto;width: 800px;}
#header {float: left;width: 200px;text-align: center;color:#069;}
#header-right {float: right;width: 600px;padding:0;}

Tiếp tục tìm đoạn code tương tự bên dưới.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tên Tiêu đề Blog (Header)' type='Header'/>
</b:section>
</div>

Và thay nó bằng đoạn code sau đây.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tên Tiêu đề Blog (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header-right' showaddelement='yes'>
</b:section>
</div>

Lưu Template rồi vào Page Elements bạn sẽ thấy kết quả tương tự thế này.



Trường hợp thứ hai là chia Header thành 3 phần. Trước tiên bạn cần xác định id cho cả Header là header-wrapper, id cho phần bên trái (thường chứa Tiêu đề Blog) là header, id cho phần ở giữa là header-middle và id cho phần bên phải là header-right.

Thay đoạn code CSS ở trường hợp thứ nhất bằng đoạn code sau.

#header-wrapper {margin: 0 auto;width: 800px;}
#header {
float:left;
width:30%;
height:200px;
margin: 0px;
border: 0px solid #cccccc;
text-align: center;
color:#069;
}
#header-middle {float:left; width:30%; height:200px}
#header-right {float:left; width:39%; height:200px}

Tiếp tục tìm đoạn code tương tự bên dưới.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tên Tiêu đề Blog (Header)' type='Header'/>
</b:section>
</div>

Rồi thay nó bằng đoạn code sau đây.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tên Tiêu đề Blog (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header-middle' showaddelement='yes'/>
<b:section class='header' id='header-right' showaddelement='yes'/>
<div style='clear:both;'/>
</div>

Lưu Template rồi vào Page Elements bạn sẽ thấy kết quả tương tự thế này.

{35 bình luậnAdd yours ?}

01:16:00, 15 thg 1, 2011

Mình muốn làm cái này lâu rồi nhưng không thể làm được.
Trong Code của mình không có "#header-wrapper"
Có đợn code nào khác không?
Thank

Reply
15:22:00, 15 thg 1, 2011

@XDN Blog bạn phần CSS của Header như thế này:

.header-outer {
background: #992211 url(http://www.blogblog.com/1kt/transparent/header_gradient_shade.png) repeat-x scroll top left;
_background-image: none;
color: #ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-goog-ms-border-radius: 10px;
border-radius: 10px;
}
.Header img, .Header #header-inner {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-goog-ms-border-radius: 10px;
border-radius: 10px;
}
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
padding-left: 30px;
padding-right: 30px;
}
.Header h1 {
font: normal normal 36px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.Header h1 a {
color: #ffffff;
}
.Header .description {
font-size: 130%;
}

Reply
19:31:00, 11 thg 4, 2011

/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1 a {
color: $(header.text.color);
}

.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}

.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}

.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}
_____________________________________________________
của em nó như vậy tùy chỉnh sao anh ơi:

Reply
22:10:00, 11 thg 4, 2011

Cũng tương tự như trên, thay hết cái CSS đó bằng

#header-wrapper {margin: 0 auto;width: 800px;}
#header {float: left;width: 200px;text-align: center;color:$pagetitlecolor;}
#header-right {float: right;width: 600px;padding:0;}

:51) Chú ý width:800 chỉnh cho phù hợp với chiều rộng blog e nhé

Reply
22:21:00, 11 thg 4, 2011

Anh Hà ơi coi giùm em cái phân trang trong http://www.blogsach.tk giùm em đi, đã thay Blog2 cho Blog1 vẫn bị lỗi!

Reply
14:56:00, 12 thg 4, 2011

E trình bày lại cách e cài đặt phân trang, hoặc send file .xml Template của em qua a xử nhé, vào Liên hệ gửi nha

Reply
18:56:00, 12 thg 4, 2011

Gửi qua chỗ liên hệ nó báo lỗi hoài, em đã gửi qua bloggerismwebmaster@gmail.com

Reply
19:57:00, 30 thg 7, 2011

@Huỳnh Nhật Hà
Blog của mình không có div id='header-wrapper'> như bạn nói. mình thêm đoạn code đó vào bị báo lỗi. bạn có thể xem dùm mình không
http://tipgoogleplus.blogspot.com

Reply
20:52:00, 30 thg 7, 2011

Của bạn thì thay toàn bộ code phần Header bằng:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tên Tiêu đề Blog (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header-right' showaddelement='yes'>
</b:section>
</div>

Nhưng mà Template của bạn xài cái origin của Blogger nên thiết kế thêm sẽ mệt lắm. Sao k kiếm cái Layout nào mà xài.

Reply
11:13:00, 31 thg 7, 2011

cám ơn bạn, mình thay được rồi. bị báo lỗi xung đột code xíu, phải chỉnh tay.

Do mình mới học code nên cũng định thử sức từ cái cơ bản xem sao :D

Reply
13:06:00, 24 thg 8, 2011

Chào anh, em hiện giờ cũng đang cần điều chỉnh header của mình mà em tìm mãi không được như những template mà anh đa hưỡng dẫn. Anh có thể chỉ giúp em được không ? Em đang muốn chia header ra làm 3 phần. Em tìm không thấy đoạn code nào có header như anh nói cả !

Reply
14:15:00, 24 thg 8, 2011

Em sử dụng mẫu Watermark rất khó chia Header, e nên sử dụng Template miễn phí ở các trang cung cấp Template để dễ tùy biến, có thể tìm ở trang btemplates.com.

Reply
19:12:00, 30 thg 8, 2011

Em làm như trên:Thay một đống css dạng comment 5 bằng cái anh chỉ mà nó kiêu lỗi:
Thông báo Tham số không hợp lệ trên nền trang: Biến số được sử dụng nhưng chưa được xác định. Thông tin đầu vào: pagetitlecolor.
57)

Reply
19:52:00, 30 thg 8, 2011

À, do cái $pagetitlecolor gây lỗi, phải thay nó bằng mã màu #xxxxxx, tham khảo mã màu ở mục Công cụ.

Reply
21:00:00, 30 thg 8, 2011

Anh Hà ơi.... Bao giờ thì VNPT không chặn blogspot nữa, bạn bè em toàn dùng mạng của VNPT bị chặn hết làm web cho lớp mà k ai vô đc. Thay đổi sang suddowmain thì load cũng lâu. Hơn nữa lại k nhìn thấy hình nền . Em nản quá.

Reply
21:05:00, 30 thg 8, 2011

Chắc k bao giờ quá em vì đó là mạng nhà nước chính hiệu. Dùng 3G Viettel đi cho nó khỏe. K thì dùng ultrasurf cũng được.

Reply
21:08:00, 30 thg 8, 2011

ủa, sao em cũng dùng mạng vnpt mà vẫn vô bình thường mà

Reply
21:15:00, 30 thg 8, 2011

Hì, mình dùng VNPT load ào ào nè, có sao đâu :51)

Reply
21:21:00, 30 thg 8, 2011

Nản rồi......... em thì xài 3G nhưng bạn bè e ai dùng đâu mà. Biết đâu đấy đến 1 ngyaf nào đó Viettel, FPT cũng chặn thì em die. Mà anh Hà có biết trang nào cho tạo web free mà lại có mẫu như blogspot không, có những cái hay như vậy. Em nghĩ chắc là k cóa huhu

Reply
21:32:00, 30 thg 8, 2011

MÌnh vẫn VNPT có thấy sao đâu nhỉ :60)

Reply
21:32:00, 30 thg 8, 2011

Có chức năng như blogspot thì k có đâu. E có thể dùng Multiply để tạo blog cũng được. Tham khảo http://blogcogaidolong.multiply.com/

Reply
21:37:00, 30 thg 8, 2011

Chẳng biết nhưng mà mạng VNPT ở đây bị chặn hít oy.

Reply
21:38:00, 30 thg 8, 2011

Cứ chặn chặn thế này thì chán nhỉ. Làm ăn gì được nữa. :((.chán ghê

Reply
21:45:00, 30 thg 8, 2011

ôh. THấy bảo có một số blogspot đăng nội dung nhạy cảm .... Nhưng mấy ông ý không khóa đc mấy trang đó. LẠi nghĩ ra cách chặn hết các blogspot luôn... Thế cho nhanh.

Reply
23:10:00, 1 thg 9, 2011

.............................

Reply
10:28:00, 10 thg 9, 2011

Của mình thế này thì sửa sao hả anh Hà? chỉ mình cắt từ đâu đến dâu với nhé, mình hơi gà.
Cảm ơn nhiều
#header-wrapper{background:#35322B url(http://2.bp.blogspot.com/_73i0fjAB_Hw/SUW944O_ClI/AAAAAAAAAo4/dXfH0dDRYvs/s1600/backgrounds.gif) repeat-x 0 0;padding-top:8px;}
#header-inner{padding:0 0 16px;}
#header-wrapper h1{color:$colortituloblog;}
#header-wrapper h1 a{color:$colortituloblog;text-decoration:none;}
#header-wrapper h1 a:hover{color:#FFB;}
#header-wrapper p{color:$descripcioncolor;}
#toplinks{background:#353530 url(http://3.bp.blogspot.com/_73i0fjAB_Hw/SUW95zqcjDI/AAAAAAAAApg/pNWpgxKRTAk/s1600/toplinks.gif) no-repeat left top;color:#554;float:right;font-size:.9em;height:27px;width:230px;}
#toplinks_inner{padding-top:3px;text-align:center;}
#toplinks a{color:#887;}
#toplinks a:hover{color:#DDC;}
/*-- (Menu) --*/#navigation ul,#navigation li{display:inline;}
#navigation li{display:inline;}
#navigation,#navigation a{background:#958573 url(http://2.bp.blogspot.com/_73i0fjAB_Hw/SUW944O_ClI/AAAAAAAAAo4/dXfH0dDRYvs/s1600/backgrounds.gif) repeat-x 0 -222px;}
#navigation a{border-right:1px solid #AFA69C;color:#654;float:left;font:bold 1em Georgia,Tahoma,sans-serif;margin-right:1px;padding:10px 12px;text-align:center;text-decoration:none;}
#navigation li:first-child a{border-left:1px solid #AFA69C;}
#navigation a:hover,#navigation li.current_page_item a{background-position:0 -294px;color:$colormenu;}
/*-- (Contenedor) --*/#main_wrapper_outer{background:url(http://3.bp.blogspot.com/_73i0fjAB_Hw/SUW95RwSauI/AAAAAAAAApA/5GUeLD8dOYU/s1600/grain.gif);}
#main_wrapper_inner{background:url(http://2.bp.blogspot.com/_73i0fjAB_Hw/SUW95xbfl2I/AAAAAAAAApY/A5K1xC8kSjQ/s1600/main_wrapper_inner.gif) repeat-x left top;line-height:1.4em;padding:24px 0;}
/*-- (Principal) --*/#main-wrapper{font:normal .9em Verdana,sans-serif;width:540px;}
#main ol,#main ul{margin:0 0 1.2em 1.6em;}
#main ul li{list-style:disc;}
#main ol li{list-style:decimal;}
#main li{padding:2px 0;}
.post{margin-bottom:24px;}
.post-title a,.post-header-line-1 a{text-decoration:none;}
.post-header-line-1 a:hover,.post-footer a:hover{text-decoration:underline;}
.post-header-line-1{color:$dateHeaderColor;margin-bottom:14px;}
.post-header-line-1 a{color:#444;}
.post-

Reply
10:37:00, 10 thg 9, 2011

Chỉ phần này thôi Sơn à:
#header-wrapper{background:#35322B url(http://2.bp.blogspot.com/_73i0fjAB_Hw/SUW944O_ClI/AAAAAAAAAo4/dXfH0dDRYvs/s1600/backgrounds.gif) repeat-x 0 0;padding-top:8px;}
#header-inner{padding:0 0 16px;}
#header-wrapper h1{color:$colortituloblog;}
#header-wrapper h1 a{color:$colortituloblog;text-decoration:none;}
#header-wrapper h1 a:hover{color:#FFB;}
#header-wrapper p{color:$descripcioncolor;}

Reply
09:36:00, 4 thg 1, 2012

Chào bạn.
Mình đã thực hiện giống như bạn hướng dẫn ở trên nhưng không thấy nó chia header thành 2 cột như của bạn. Bạn xem hộ mình nhé.
Mình gửi cho bạn template qua mail bloggerismwebmaster@gmail.com.
Bạn xem lại và sửa giúp mình chia header thành 2 cột.
Chân thành cám ơn bạn nhiều.

Reply
12:52:00, 26 thg 2, 2012

Mình cũng ko có pdiv id='header-wrapper

Chịu ko tìm được đâu Bạn coi dùm nhé

Tem của mình nè:http://www.mediafire.com/?v344meu66ocdn2w bạn gửi vào mail của mình nhé chamsockhachhang.haidang@gmail.com khi có kết quả nhé
cảm ơn bạn

Reply
00:13:00, 29 thg 5, 2012

Giúp mình với m chia không thành công, code của m ở đây:

https://docs.google.com/document/d/1oWYKFkfU7hg8e2MFY8dwLknQ17lN1xCa0YhOObUQs8c/edit

Reply
00:22:00, 1 thg 9, 2013

Anh ơi em cũng muốn chia header thành 2 phần mà không làm được. Vì không tìm thấy đúng các phần như anh nói. Nó hơi giống như khi làm thì không được !

Reply
09:20:00, 2 thg 9, 2016

muon chia doi head trong wordpress thi lamthe nao a

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn