Monday, May 21, 2007

Thêm một cột cho blog

Đăng ký dịch vụ lưu trữ đám mây: Dropbox, Mediafire, OneDrive. Sau khi đăng ký xong, cài đặt phần mềm cho Windows hoặc ứng dụng điện thoại - máy tính bảng để đồng bộ dữ liệu.

Bạn có nhận ra cái gì khác thường trên blog của tôi không?

Hãy quan sát kỹ nhé! Tôi sẽ cho bạn biết:

- Một giao diện với ba cột.
- Một header đã thay đổi có rộng lớn hơn mặc định.
- Thanh navbar trên đỉnh đầu không có.
- Cái Icon của Blogger không có trước địa chỉ của tôi mà thay vào đó là cái của tôi.
- ...

Tôi đã là điều đó như thế nào? Ở bài này tôi sẽ hướng dẫn cho bạn chèn thêm một cột cho blog.

(Xem hình kích cở đầy đủ)
Hình. Giao diện Add and Arrange A Page Element của http://thuthuatchoblogger.blogspot.com

Sau khi đăng nhập, hãy vào Template->Edit HTML. Bây giờ công việc của chúng ta là thêm một cột cho blog. Template mà tôi sử dụng trong cho http://thuthuatchoblogger.blogspot.com là Minima. Bạn có thể chọn giao diện này để thêm. Tùy theo template, mỗi template sẽ có phần này khác nhau. Xin lưu ý là trước khi thay đổi, bạn nhớ copy lại Template mà mình hiện có đề phòng chúng ta làm sai mà sửa chữa kịp thời.
Chúng ta đang ở Edit Template. Bây giờ chúng ta kéo thanh trược ở khung bảng mã HTML xuống. Bạn tìm cho tôi một đoạn mã như sau:


#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
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: 220px;
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 */
}


#out-wrapper: Phần giữa của toàn màn hình bao gồm các phần dưới.
#main-wrapper: Phần chính, nơi các bài đăng của bạn sẽ nằm ở đây
#sidebar-wrapper: Cột bên phải theo mặt định của template này.

Bây giờ chúng ta copy hết phần #side-wrapper và paste bên dưới nó như và sửa lại như sau (thay đổi màu đỏ)

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
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: 220px;
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: 220px;
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 */
}


Bây giờ thì bạn đã có thêm một cột bên trái. Đừng vội lưu lại mà hãy làm tiếp. Chúng ta thấy #out-wrapper có phần rộng 660px (pixel). Một màn hình 15’ thông thường hiển thị ngang và dọc: 800 x 600, vậy chúng ta sẽ thiết lập cho #outer-wrapper một giá trị chiều ngang bé hơn 800. Bạn có thể thiết lập rộng hơn tùy thích.

Tôi sẽ thay đổi độ rộng của trang ở giá trị width: 660px->750px. Tôi sẽ thiết lập lại độ rộng của #main-wrapper là 400px, của các cột hai bên #sidebar-wrapper và #newside-wrapper lần lượt là 150px. Tuy nhiên bên trái cột bên trái mà tôi tạo ra sẽ dính nhau với cột giữa, do đó tôi thêm lề trái margin-left: 20px; vào #main-wrapper. Cuối cùng tôi sẽ được một đoạn mã tương ứng như bên dưới. (Màu đỏ chỉ các thay đổi cho phần này)

#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 400px;
margin-left: 20px;
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: 150px;
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: 150px;
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 */

}


Bây giờ tôi sẽ thêm một Profile để xuất hiện một bên trái như cột bên phải với Add a Page Element.

Tiếp tục hãy kéo thanh trược xuống dưới nữa và tìm đoạn mã sau:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>


Công việc của bạn là chép đoạn mã này dán lên phía trước đoạn mã đó, nhớ là phía trước nhé!
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>


Xong rồi thì bạn lưu lại. Nào hãy thử kiểm tra sự khác biệt nhé. Tuy nhiên vẫn chưa hết, cái header và footer của bạn vẫn còn bé xíu như vậy. Thế thì chúng ta thay đổi kích cở chúng đi.

Vào lại Edit HTML, bạn tìm đoạn mã như sau:
*/

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


Bạn sửa số 660 thành 750 là xong. Tương tự như vậy hãy kéo xuống phía dưới nữa tìm đoạn mã bên dưới và sửa lại con số vừa kể.
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}


Nào, chúng ta đã có một mẫu với ba cột. Thật tuyệt phải không. Hãy đón đọc các bài khác nhé!

Bạn có thể download template này tại đây. Tôi cũng lưu ý là tất cả những widget mà bạn làm trước đó sẽ không còn nữa. Để sử dụng bạn giải nén file download về, vào Template ->Edit HTML, tìm đến file giải nén ở Backup and Restore và Upload để kết thúc.

Tham gia Cộng đồng sử dụng Blogger Việt Nam trên Facebook, giải đáp thắc mắc, mẹo vặt, chia sẻ kinh nghiệm sử dụng Blogger (BlogSpot)...

43 comments:

  1. cho e hỏi, nếu làm template 3 cột co' thẻ đễ nó sát lề 2 bên đuợơ ko vậy

    ReplyDelete
  2. phuong phap cua ban chi minh lam khong thanh cong....ban co the cho biet chi tiet hon duoc khong?

    ReplyDelete
  3. Xin chao,
    Huong dan ma tao template 3 cot khong gap van de ban a. Neu ban khong lam duoc theo huong dan thi co the dung code template co san phia duoi. Tuy nhien co mot so loi ban gap phai khi upload template nay len. Ban chinh lai cac loi nay la duoc. Toi se co bai huong dan cach backup va restor template va cach khac phuc loi. Bang cach nay toi co the tao ra Template rat nhieu cot, khong chi la 3! Trang nay toi se thuc hien dang co 6 cot: http://vietnamesebloggers.blogspot.com. Tuan sau toi se bat dau lam viec voi no.

    ReplyDelete
  4. Mình không tìm thấy phần code của header-wrapper và footer đối với template Harbor. Bạn xem giúp được không?

    ReplyDelete
  5. OK, hôm nào rãnh mình tìm hiểu template và hướng dẫn thêm header và footer giúp bạn!

    ReplyDelete
  6. Sao làm 3 cột được nhưng không sát lề với lại cái logo cua Bloger vẫn còn

    ReplyDelete
  7. Hi bạn, cám ơn bài viết này nhe. Sau khi đọc bài của bạn xong mình đã làm được rồi đấy. Cám ơn rất nhiều! Những bài viết của bạn rất có ích cho mình, qua đó mình dần cảm thấy code đã trở nên dễ dàng và dễ hiểu hơn tí chút. Uhm, đôi lúc muốn hỏi khi gặp những khó khăn, không biết mình có thể liên lạc với bạn như thế nào nhỉ? email? chat?
    Thanks, mình sẽ quay lại để check reply của bạn ha.

    ReplyDelete
  8. Cám ơn bạn đã chia sẻ, bạn đã thành công mình cảm thấy rất vui vì chia sẻ của mình có người hưởng ứng. Mong bạn tiếp tục ủng hộ với blog này của mình. Bạn có thể liên qua qua email hay chat hay bất cứ phiên tiện gì liên qua đến mình. Vậy nhé!

    ReplyDelete
  9. Template ba cột blog của mình sao không rộng toàn màn hình như trong hướng dẫn mà vẫn trống 2 khoảng lớn ở 2 bên cạnh blog.mình phải lamg thế nào để trải rộng toàn màn hinh vậy

    ReplyDelete
  10. Mình cũng thực hiện thành công theo hướng dẫn của bạn. Tuy nhiên nình không thể chỉnh màu nền, chữ của cột vừa tạo được. Mình sử dụng mẫu Rounders. Bạn có thể xem và giúp mình được không. Cảm ơn rất nhiều.

    ReplyDelete
  11. Đúng là đỉnh cao của chất lượng! Thanks ! Hú hú

    ReplyDelete
  12. Cho mình hỏi mình có thể chọn màu cho thanh menu (nhu "Giúp đỡ","Website cộng đồng","Nhận xét mới nhất".....)
    bằng cách nào?
    Mình có thể làm bground cho thanh menu đó được ko?

    ReplyDelete
  13. Chào Thủ Thuật Blog!
    Cám ơn anh rất nhiều đã có bài đăng này. Em đã làm được 3 cột theo chỉ dẫn của anh rồi ạ. Tuy nhiên, không hiểu sao cái cột bên trái và cột giữa bị dính gần nhau, hầu như không có khoảng cách giữa 2 cột.

    Xin lỗi anh vì làm phiền, nếu có thể rất mong sự chỉ giáo. Xin cảm ơn.

    ReplyDelete
  14. @noinieu, Chào chị, để có một khoảng cách giữa cột trái và giữa chị có thể thêm margin-left vào main-wrapper hoặc thêm margin-right vào sidebar-wrapper trái của chị.
    Khi thêm margin, chị tính toán mở rộng thêm outer-wrapper cũng như header-wrapper và footer sao cho cân đối. Chị có thể tìm hiểu thêm margin tại đây.

    ReplyDelete
  15. Xin cảm ơn Thủ Thuật Blog rất nhiều! Không ngờ được anh chỉ cho nhanh thế. Sẽ tham khảo link được giới thiệu ạ.
    Một lần nữa xin đa tạ!! (thêm icon xúc động nữa :)

    ReplyDelete
  16. @noinieu, Hihihi, chị cứ xem mà làm nhé! Khách sáo thế! Em lướt web đây!

    ReplyDelete
  17. Em đang dùng template Minima Dark nhưng k0 tài nào kéo dãn vùng bên trái ra đựoc dù có nới rộng thì nó cũng chỉ rộng sang phía phải, còn bên trái thì vẫn có 1 khoảng trống cố định.

    Mong anh giúp đỡ

    ReplyDelete
  18. Bạn thuthuatblog ơi mình mới làm 1 blog, may quá gặp được trang web của bạn, đã làm theo một số hướng dẫn của bạn và rất thành công (giỏi quá! ^^). Bạn có thể chỉ cho mình cách nào để làm chữ KOMMENTARE và LINKS ZU DIESEM POST ở các bài viết nhỏ đi được không? Thanks bạn nhiều

    ReplyDelete
  19. Cảm ơn bạn rất nhiều. Ở đây có nhiều bài rất hay và bổ ích. Mình là "lính mới" mà. Cảm ơn lần nữa nhé.
    (www.dangda.co.cc)

    ReplyDelete
  20. mình có 1 cái temp cấu trúc nó khác của bạn nhìu lắm , ko có outer wrapper , main wrapper gì hết :( , red-white-blogger-template-1.2.xml by Jack Book

    ReplyDelete
  21. Em xin hỏi sau khi thêm 1 cột cho Blog thì Test trên Fireox rất OK nhưng ở IE thì có triệu chứng thế này
    khi mới vào trang chủ http://ditchaiok.com thì phần cột sidebar left bị biến mất phần Footer cũng chả thấy đâu
    Xem hình: http://haosever.com/www/ditchaiok/com/uplo@d/images/nxdsc922bjog138uvx6a.png

    Nhưng khi xem chi tiết bài Post thì nó lại hiện ra nguyên trang đầy đủ k0 thiếu phần nào cả.

    Như vậy thì bị lỗi chỗ nào mong anh giúp

    ReplyDelete
  22. @ditchaiok, có lẽ vấn đề nằm trong cái post cuối hiện trên blog em. Cụ thể là post này. Em hãy thử xem mình đã sử dụng đúng cấu trúc bài đăng chưa, có thừa đoạn code nào không? Anh đã từng gặp vấn đề này và cách khắc phục là xem lại bài viết thôi. Thế nhé!

    ReplyDelete
  23. Cho em hoi cach them 1 cot o wordpress

    ReplyDelete
  24. Mình tìm kiếm rồi mà đâu có thấy mấy cái outer wrapper , main wrapper gì đâu bạn.
    Bạn xem dùm blog mình đây : http://www.phim4u.co.cc

    ReplyDelete
  25. @Tran Manh Quang,
    Để thiết kế thêm một cột cho WordPress em phải biết ngôn ngữ lập trình php và CSS. Công việc này tương đối phức tạp nếu không có kiến thức lập trình.

    Để đơn giản em có thể dùng theme chia sẻ miễn phí tại trang chủ của WordPress http://wordpress.org/extend/themes/ hoặc tìm trên Google với từ khóa "Free WordPress Theme". Khi đã có tệp tin chứa theme thì cần upload lên host và vào trang quản lý blog (admin) để chọn theme vừa đưa lên.

    @Phạm Thanh Tùng, bạn tìm không thấy không có gì lạ, bởi vì bạn không sử dụng template mẫu do Blogger team thiết kế.

    Về cơ bản những từ outer-wrapper, main-wrapper,... là do người thiết kế tự đặt và khác nhau tùy mỗi người, tên này thường được đặt mang nội dung để người khác dễ hiểu mà có thể tùy biến.

    Hướng dẫn trên sử dụng cho template Minima đã được ghi rõ trong bài viết.

    Template của bạn có thể thêm một cột dễ dàng bằng cách tìm thành phần tương ứng như trên đề cập.

    ReplyDelete
  26. Cột bên phải của em không nhảy bên cạnh cột main mà nằm dưới cột main

    ReplyDelete
  27. Anh nhân ơi, sao em update template mẫu có đuôi là XML, khi Up xong nó báo xác nhận và lưu khi xác nhận thì
    nó báo như thế này:
    bX-bliced
    là lỗi gì vậy anh Nhân

    ReplyDelete
  28. @Án Bình Trọng, do cân chỉnh width không hợp lý.

    #minhds, lúc khác em up thử. Theo kinh nghiệm, xóa hết tiện ích mà em đang dùng và sau đó up template sẽ ít xảy ra lỗi.

    ReplyDelete
  29. em đã làm nhưng không được. Máy báo lỗi không hiểu Newprofile là cái gì

    ReplyDelete
  30. Mình đã chỉnh được blog thành 3 cột nhưng khi vào phần page elements thì không nhìn thấy đầy đủ tất cả các cột
    [img]http://img10.imageshack.us/img10/1536/errorzal.jpg[/img]
    Có cách nào sửa lỗi này ko bạn

    ReplyDelete
  31. minh bi loi nay khong biet khac phuc the nao , moi nguoi chi giup :
    The new widget id "NewProfile" is invalid for type: Profile

    ReplyDelete
  32. Hic. Cái code này sao khi em tạo xong nó báo lỗi "The new widget id "NewProfile" is invalid for type: Profile" và thế là nó tự đống cái blog lại ko cho preview. Giờ làm sao đây

    ReplyDelete
  33. Bác ơi ! cho e hỏi cái ! sao e dùng themmes của bác thì hok cóa comment hả bác ! e đã làm theo hưỡng dẫn làm comments của bác mà cũng hok dc,mong bác giúp đỡ !

    ReplyDelete
  34. Bác ui, tạo cái sidebar ở cuối blog thì phải làm thế nào dzậy? Bày e với, e mò miết hook ra. Cảm ơn bác nhiều nha.

    ReplyDelete
  35. chào bạn!
    http://img181.imageshack.us/img181/943/interfaceos5.jpg(link mà mình muốn làm được) mình đã làm từng bước theo cách của bạn đã chỉ nhưng khi save tamplete kết quả là thiếu Profile bạn có thẻ chỉ mình cách thêm Profile được không?
    a! bạn oi cho mình xin hỏi một chút xíu nưa nha
    cách chèn vào phần head, body chèn như thế nào mới đúng? anh có thể cho em ví dụ đơực không? chèn như thế nào gọi la chèn trên thẻ head, body thế nào gọi la chèn vào , dưới.....
    cám ơn bạn nhiều

    ReplyDelete
  36. Bạn có thể chỉ cho mình cách thêm Profile không, mình cũng gặp lỗi giống bạn phuonganh.
    Hay bạn hướng dẫn thiếu bước nào rùi cũng nên.

    ReplyDelete
  37. mình k làm đc cái cột mới với template khác, nhưng k thêm đc cái div nessidepar ở dưới.
    Đặc biệt, để k bị lỗi do màu sắc, các bạn nên chọn màu đồng nhất giống như thuthuatblog.com

    ReplyDelete
  38. Chào bạn,
    Về hướng dẫn cách chèn thêm cột vào Template, mình đã thực thiện theo chỉ dẫn nhưng không thành công.
    Blog của mình: http://patternstrader.blogspot.com/
    Bạn có thể giúp mình chèn thêm một cột bên phải không ? Bằng cách nới rộng chiều ngang của Page để chèn thêm một cột bên phải cân đối với cột bên trái.
    Mình xin cảm ơn và hậu tạ !
    Chi phí thế nào bạn cho mình biết nhé.
    Yahoo: Fxpattern

    ReplyDelete
  39. bạn ơi vậy muốn thêm một cột ở trang bài viết thì làm sao vậy

    ReplyDelete
  40. Chào bạn, thật được khích lệ khi đọc các bài viết và biết được blogger của bạn.
    Bạn ơi! mình rất mong bạn hãy giúp mình tạo thêm một cột trong mẫu blogspot mình đang dùng được không, mình rất muốn thêm một cột tiện ích nhỏ nằm giữa chỗ còn trống trên màn hình.
    Rất mong bạn quan sát kỹ để có thể giúp mình với, mình có thể gửi mẫu cho bạn để bạn sửa giúp mình được không ạ.
    Trân thành cảm ơn,
    mong tin lắm.
    http://hoithanhmuoicuadat.blogspot.com

    ReplyDelete
  41. 3 cột bây giờ blogger có rồi đăng chi nữa

    ReplyDelete

Cám ơn đã đọc bài viết. Bạn có thắc mắc, gợi ý hoặc bình luận xin chia sẻ bên dưới. Hãy viết bằng tiếng Việt có dấu để mọi người dễ đọc hơn. Xin đừng spam!

Do gần đây nhận rất nhiều spam bán thuốc từ nước ngoài, tạm thời để bình luận bạn bắt buộc phải có tài khoản OpenID hoặc Google. Chức năng này sẽ được khôi phục khi trình trạng spam được cải thiện. Xin lỗi về sự bất tiện này.