Tạo 3 Cột Phần tử ở phần Footer của Template


Nếu Blog bạn chứa nhiều phần tử (element), thì việc tiết kiệm không gian trong template là điều rất cần thiết để tạo ra một bố cục hợp lý và gọn gàng cho Blog. Nhưng không phải Template nào cũng được thiết lập sẵn để cho phép sắp xếp phần tử ở vị trí tùy thích.
Chẳng hạn như đối với giao diện hiện tại của Blog tin học, mặc định template chỉ có 1 sidebar nên đã bị mất đi khá nhiều khoảng trống, chưa kể phần Footer thì chỉ có 1 cột (column) càng khiến cho Blog không thể chèn thêm nhiều tiện ích. Nếu Blog của bạn cũng gặp trường hợp tương tự, thì bài viết hôm nay sẽ giúp bạn giải quyết tình trạng này, bằng cách tạo 3 column cho Footer.
  1. Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
  2. Thay thế thẻ <b:section class='footer' id='footer'/> bằng đoạn code dưới đây :
    <div id='customize-footer-column'>
    <div id='Footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='Col1' preferred='yes' style='float:left;'>
    </b:section>
    </div>
    <div id='Footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='Col2' preferred='yes' style='float:left;'>
    </b:section>
    </div>
    <div id='Footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
    <b:section class='footer-column' id='Col3' preferred='yes' style='float:right;'>
    </b:section>
    </div>
    <div style='clear:both;'/>
    </div>
    Hình mẫu
    Tìm thẻ <b:section class='footer' id='footer'/>
    Và thay thế nó với đoạn code trên
  3. Tìm thẻ ]]></b:skin> và dán đoạn code này ngay bên trên
    #customize-footer-column {
    clear:both;
    }
    .footer-column {
    padding: 10px;
    }
  4. Save lại template và chuyển sang tab Page Elements (Phần tử trang để xem kết quả)
Vậy là mình đã hướng dẫn xong cách tạo 3 column ở phần Footer cho Template của Blogger rồi đấy. Hy vọng thủ thuật này sẽ giúp bạn tùy biến giao diện cho Blog của mình một cách đẹp mắt. Chúc vui !

15 Nhận xét on "Tạo 3 Cột Phần tử ở phần Footer của Template"

Pika Rock on 7 July 2009 at 10:37 said...

các blog bây h đang kết thể loại 3 col này lắm đei ;))

vuluganck on 7 July 2009 at 12:33 said...

img trong phần body có vấn đền kìa dx.

NAD on 7 July 2009 at 17:15 said...

Cái này đang mốt :)), blog mình có rồi ;))

boyproDX on 7 July 2009 at 23:12 said...

@Pika Rock & NAD : Hề hề, mình cũng kết cái 3 col footer này lắm, tiết kiệm đc 1 phần không gian template :D
@vuluganck : Đã fix lỗi tràn hình trong bài. Thanks đã nhắc mình :D

Ngankvn ® on 8 July 2009 at 10:53 said...

BookMark bài này ngay :D

Rảnh làm liền , cần cái này từ lâu mà quên :))

boyproDX on 8 July 2009 at 12:43 said...

@Ngankvn ® : Bạn Ngân dạo này coi bộ bận bịu dữ :))

Ngankvn ® on 8 July 2009 at 13:05 said...

Bận đc đã mừng .

Chẳng qua giờ xài máy tiệm , không đủ thời gian để mò :((

HUNGCHAT production on 10 July 2009 at 11:30 said...

mjnk thu roi nhung no cu bao loi

boyproDX on 11 July 2009 at 21:50 said...

@HUNGCHAT production : Lỗi gì thế bạn, bạn có thể chụp lại screenshot cho mình ko?

vanthiep on 2 September 2009 at 12:56 said...

Cám ơn nha!
Bài viết của bạn rất hữu ích.

[!!]Mưa[ -(¯`v´¯)--(¯`v´¯)»]Ngâu[!!] on 5 September 2009 at 23:18 said...

có thiết kế 3 column cho main được không admin :D

†™Waynee™†(¯`¤.Rapper.¤´¯) on 13 September 2009 at 22:39 said...
This comment has been removed by the author.
Pogi on 17 September 2009 at 22:51 said...

Báo lỗi như sau :
We were unable to preview your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag "
".

MusicIQ on 20 January 2010 at 17:24 said...

ừ, của mình cũng báo lỗi vậy. Sao thế? Help!!!

vnblogger.com on 11 February 2010 at 05:42 said...

Hướng dẫn mình cách tạo cột ở dưới footer đượcko ? mình ko làm được chúng ở dưới footer bạn ạ . có thể thì liên lạc vào mail cho mình nhé vnblogger.com@gmail.com :)]

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3