Chia Main Body thành 2 hay nhiều cột trong Blogger Template

Main Body là thành phần quan trọng nhất trong template Blogspot, là nơi chứa đựng gần như toàn bộ nội dung của một Blog, nhưng khả năng tùy ...

Main Body là thành phần quan trọng nhất trong template Blogspot, là nơi chứa đựng gần như toàn bộ nội dung của một Blog, nhưng khả năng tùy biến lại rất hạn chế.
Blogger Template Layout
Blogger Template Layout
Để tránh sự nhàm chán và tạo nên sự độc đáo khác biệt, bài viết dưới đây iTechPlus sẽ hướng dẫn các bạn một vài thao tác đơn giản để chia Main Body thành 2 hay nhiều cột với kích thước tùy ý.
Hình minh họa :
Post body theo mặc định
Main Post body theo mặc định
Post body sau khi chia làm 2 cột 
Main Post body sau khi chia làm 2 cột
Cách thực hiện :
1. Vào Thiết kế > Chỉnh  sửa HTML
2. Chèn đoạn code bên dưới vào trước thẻ đóng </head>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type="text/css">
.post {position: relative;width: 265px;height: 250px;margin: 0 15px 0 0;padding:10px;float: left;overflow: hidden}
.post-body{margin: 0 auto;padding:0;line-height:1.6em}
.post h3{margin: 0 0 10px; padding:0; line-height:1.3em}
.post-footer{display:none}
.date-header{display:none}
</style>
</b:if></b:if>
* Các bạn lưu ý code in đậm màu đỏ và thay thế cho phù hợp
Ở ví dụ trên, Main Body được chia làm 2 phần có tổng chiều rộng là 600px, được tính theo công thức :
Main Body = 2x265px + 2x15px + 4x10px = 600px
Do vậy, để chia thành 3,4 hay n phần thì bạn cần áp dụng công thức trên để tính toán cho hợp lý.
3. Tìm trong template đoạn code bên dưới
#blog-pager {
  text-align: center;
}
và thay thế thành
#blog-pager {
  text-align: center;clear:both;padding-top:20px;
}
Lưu ý : Khi sử dụng thủ thuật này, nhất thiết bạn phải chèn JumpLink cho mỗi bài post, hoặc sử dụng Auto Readmore đã được giới thiệu ở đây.
4. Save Template và tận hưởng thành quả nào các bạn !
Chúc các bạn thành công !

COMMENTS

BLOGGER: 7
  1. ban oi lam the nao de tao duoc form sign up! nhu blog cua ban the? voi lam the nao de chen vao blog de no hien nhu the kia? giup minh voi

    ReplyDelete
  2. @Admin: Tiện ích Sign up! là một tiện ích từ trang Madmin. Bạn vào đăng ký tài khoản và lấy code. Vào trang www.TinNhanhTrongNgay.net và click vào banner Madmin để đăng ký tài khoản bạn nhé.

    Khi đăng ký vào Madmin bạn truy cập vào phần quản trị tạo form đăng ký và nhận code. Lấy code chèn vào bất kỳ tiện ích HTML nào của blog cũng được. Xong lưu lại và trở ra xem là ok.

    Chúc bạn thành công.

    ReplyDelete
  3. em chào anh!
    E có mấy thắc mắc muốn được a góp ý:
    - Em ko thể tìm thấy đoạn code:#blog-pager {
    text-align: center;
    } ở chỗ nào ah!. Thiếu cái đấy nó có ảnh hưởng gì ko ah?
    - Sau khi e chia thành hai cột thì phần Thứ tự của trang nó nhảy lên đầu phần Main Body luôn. Làm thế nào để đặt nó xuống dưới phần bài đăng a nhỉ?
    E mong nhận được góp ý của a!
    E cảm ơn!

    ReplyDelete
  4. A cho e hỏi thêm một câu!
    A có thể chỉ cho e cách viết được nhiều bài đăng trong một trang con ko a?
    E cảm ơn!

    ReplyDelete
  5. Chào bạn, mình đang lập cái blog này: www.blog-dulich@blogspot.com, mình đang lúng túng với một số phần sau, mong được bạn chỉ cho:
    1. Phần footer, mình đã chia làm 4 phần, tuy nhiên cai mầu nền đen cứ bị rộng quá so với cái kích thước 1110 của blog mình đã điều chỉnh, làm thế nào để co mầu nền này lại bằng với kích thước phần trên là 1110?

    2. Mình chia phần main body thành hai cột. Nhưng cái mặc định của main body post nó không được đẹp. Thứ nhất là phần Post Title và phần post body cách xa nhau quá, làm rời rạc, khi ấn vào edit để sửa thì không sửa được. Vậy làm thế nào để sửa phần này, bỏ khoảng cách giữa title và text đi.

    3. Làm thế nào để thêm một phần là ảnh đại diện có kích thước cố định cho tất cả các bài post, như bạn thấy đấy, bài tớ post nó lấy cái ảnh đầu tiên lên làm ảnh đại diện, nếu để kích thước nguyên bản thì nó chỉ cắt một góc để cho ảnh hiện lên. Nếu muốn hiển thị cả ảnh thì phải co lại thành kích thước nhỏ nhất thì mới hiện lên đầy đủ ảnh, làm cho thân bài post lên lộn xộn.

    4. Mình đã dùng hàm max, min width để quy định kích thước nhỏ hơn min thì phóng to đến min, lớn hơn max thì co về max, vậy là hai cái biểu tượng comment và gửi baì đăng qua mail và sửa bài đăng nó cũng phóng to ra, không biết sửa thế nào?
    5. Liệu có chia được thành cột to cột nhỏ trong main body không?
    6. Làm thế nào để các text bên dưới ảnh hiển thị đẹp hơn.

    Cám ơn bạn nhiều!
    soshingi0528@gmail.com

    ReplyDelete
  6. #blog-pager {
    text-align: center;
    } tìm không ra

    ReplyDelete
  7. #blog-pager {
    text-align: center;
    } tìm không ra

    ReplyDelete

Name

Banner,2,Code,8,CSS,2,DNS cho Blogger,6,Favicon,1,HTML,6,JavaScript,2,Kiếm tiền với Youtube,1,Labels,1,Mật khẩu cho bài đăng,1,Nhãn,1,Search Google,1,Template Blogger,1,theme blogger,1,Thủ thuật Blogger,45,Thủ thuật Youtube,2,Tiệc ích Password,3,Tiện ích,9,Tiện ích bài viết liên quan,2,Trang,1,Wifi,1,Xóa bản quyền,1,
ltr
item
Khám Phá Blogger: Chia Main Body thành 2 hay nhiều cột trong Blogger Template
Chia Main Body thành 2 hay nhiều cột trong Blogger Template
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc62fexgRBU9uJJ0Amvz5PagJ2yXyuVIkHZoOZFOssY6CzTVWrnDXkImQMycFPBByBCFo2LIYNP0NArZMS0lpm3gHh4UMSHxj_Q51PYgxnQ7UBdhFxOwhyzZq1VmQ7uifDmc2DNpnhxAk/s288/postbody.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc62fexgRBU9uJJ0Amvz5PagJ2yXyuVIkHZoOZFOssY6CzTVWrnDXkImQMycFPBByBCFo2LIYNP0NArZMS0lpm3gHh4UMSHxj_Q51PYgxnQ7UBdhFxOwhyzZq1VmQ7uifDmc2DNpnhxAk/s72-c/postbody.jpg
Khám Phá Blogger
https://blogger.affimart.com/2012/06/chia-main-body-thanh-2-hay-nhieu-cot.html
https://blogger.affimart.com/
http://blogger.affimart.com/
http://blogger.affimart.com/2012/06/chia-main-body-thanh-2-hay-nhieu-cot.html
true
4203661997903332293
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy