phuongngugia.blogspot.com: Tạo trang Blog có template 4 cột

Phuongngugia cũng từng có bài Tạo blog dễ như ăn phở... với template có 3 cột. Được voi đòi tiên, vô mạng coi mấy đàn anh mần Blog có Template 4 cột, hic hic, mấy “đàn ảnh” đua nhau post bài hướng dẫn tùm lum, vậy mà đố có ai kiếm thấy một bài hướng dẫn mần Template 4 cột, thằng tui cũng chỉ tàng nghe nói chớ có khi mô thấy đặng cái Template 4 cột mặt mũi ra răng. Tui vốn ngu dốt nhưng là do tức wé mà mần đại. Sau một ngày từ sáng ngồi thêm bớt tẩy xóa chùi rửa nêm nếm hành tiêu tỏi ớt ở tại nơi kêu bằng “Chỉnh sửa HTML”… đến tối thì Vi Tiểu Bảo hô “Đại công cáo thành”.

Dốt như thèng tui vậy rồi cũng mày mò ngâm cứu cho ra một trang “bờ lốc” có cái “tem pờ lây tờ” 4 cột như vầy nè : http://www.baothoa.co.cc. Nay tui lại xin chia sẻ cho mấy thèng cha cũng ngu in hệt tui có thêm chỗ mà đưa mấy tấm hình thiệt đẹp của sắp nhỏ con bà Ba bà Tư vô cho khỏi mang tiếng thiên vị chỉ lo o bế bà vợ già mà bỏ bê mấy con vợ trẻ thui thủi…

Quên nữa, mấy cái Widget nếu không xài thì bỏ luôn mà thêm cái mới chớ cứ cái cũ rồi mà coppy - pass hoài in hình không được đa, tui từng bị rồi, bá tánh phải chú ý vụ ni mới đặng.

Rồi, bây chừ tới vụ chánh đó, hãy chú ý :

1/- Một là : Ở đoạn code
/* Header
-----------------------------------------------
*/

#header-wrapper {
width:950px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Chú ý : Width: 950px; tui thay chiều ngang của header là 970px;

2/- Hai là : Ở đoạn code


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 950px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  }

#main-wrapper {
  width: 440px;
    margin-right: 10px;
    margin-left: 10px;
  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-wrapper {
  width: 270px;
  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 */
}

#newsidebar-wrapper {
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 */
}

Tui đã sửa và thêm vô như vầy :


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 970px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  }

#main-wrapper {
  width: 350px;
    margin-right: 25px;
    margin-right: 15px;
    margin-left: 25px;
  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 */
  }

#newsidebar-wrapper {
width: 170px;
float: $endSide;
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 {
  width: 190px;
  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 */
}

#newsidebar-wrapper {
width: 190px;
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 */
}

Phần cuối cùng :
/* Footer
----------------------------------------------- */
#footer {
width:950px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Sửa lại thành: width: 970px;

Túm lại : Để cho lẹ khỏi phiền phức lôi thôi thì cứ việc coppy đoạn code tui đã sửa và thay vô đoạn code cũ là xong .

Vậy đó . Print

Tạo trang Blog có template 4 cột

Từ 16/1/2011