Chèn 2 cột widget vào Main-wrapper

Thông thường các bạn có thể thêm nhiều tiện ích phía dưới khu vực bài đăng nhưng những tiện ích này sẽ có chiều ngang bằng với chiều ngang của khu vực bài đăng, điều này gây nhiều bất tiện khi bạn muốn chèn nhiều tiện ích có chiều ngang nhỏ hơn như tiện ích Recent Posts mà mình giới thiệu TẠI ĐÂY. Do vậy hôm nay Namkna sẽ giới thiệu cho các bạn cách cho thêm 2 cột thêm tiện ích phía dưới bài đăng.

Thực ra đây là một thủ thuật đơn giản, chỉ thêm một vài đoạn code CSS là bạn có thể làm được điều này, nên hôm nay tôi sẽ hướng dẫn các bạn cách tạo\chèn 2 cột widget vào main-wrapper trong Blogger template.

Còn nếu bạn nào muốn thêm ở phần header thì xem TẠI ĐÂY

Có 2 các để thực hiện thủ thuật này, hôm nay Namkna xin giới thiệu cả 2 thủ thuật cho các bạn.

Cách 1: Dùng các số tuyệt đối (Các này hơi phức tạp đòi hỏi có chút am hiểu về CSS).

Cách 2: Dùng số tương đối (Cách này được xem là dễ thực hiện hơn).

Cách thực hiện :

Cách 1: Dùng các số tuyệt đối (Các này hơi phức tạp đòi hỏi có chút am hiểu về CSS).

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 ]]></b:skin>

#namkna2column-wrapper{width:530px;float:left;word-wrap:break-word;overflow:hidden}
#namkna2columnleft-wrapper{width:260px;float:left;word-wrap:break-word;overflow:hidden}
#namkna2columnright-wrapper{width:260px;float:right;margin-left:10px;word-wrap:break-word;overflow:hidden}
.namkna2column .widget{background:#fff;border:1px solid #ccc; height:300px; overflow:hidden; margin:5px 0; padding:10px}
.namkna2column h2{background:#333;color:#fff;line-height:1.4em;padding:2px 10px;margin-bottom:1em}

Trong đoạn code trên :

• width:530px : chiều rộng của widget (Lưu ý không lớn hơn chiều rộng của bài đăng trên blogspot của bạn. Ví dụ chiều rộng phần bài đăng trên blog của bạn là 520px thì bạn nên để width trong khoảng nhỏ hơn hoặc bằng 520 px).
• width:260px : chiều rộng của 2 cột widget (Lưu ý tổngchiều rộng của 2 Widget này phải nhỏ hơn chiều rộng của Widget tổng tức là 260 + 260 phải nhỏ hơn 530) 
• height:300px : chiều cao của 2 cột widget (Bạn có thể đặt tùy ý nhưng không nên qua slowns như thế sẽ rất sấu)

(Nếu Bạn cảm thấy khó để thay đổi các thông số thì bạn có thể tham khảo cách 2 ở bên dưới).

3. Tiếp tục, tìm trong template đoạn code sau :

<div id='main-wrapper'>

và chèn ngay sau nó đoạn code bên dưới :

<div id='namkna2column-wrapper'>
<div id='namkna2columnleft-wrapper'>
<b:section class='itech2column' id='namkna2columnleft' preferred='yes'/>
</div>
<div id='namkna2columnright-wrapper'>
<b:section class='itech2column' id='namkna2columnright' preferred='yes'/>
</div>
<div style='clear:both'/>
</div>

4. Save template

Bây giờ bạn có thể trở lại Phần tử trang và chèn vào đó bất kỳ widget nào bạn thích.

- Lưu ý nếu trong phàn tử trang xuất hiện thành một cột thảng như bên dưới bạn đừng lo cứ thêm tiện ích vào quay lại trang chỉ sẽ thấy ngay.

Cách 2: Dùng số tương đối (Cách này được xem là dễ thực hiện hơn). (Cách này gọi là khác nhưng trên thực tế tương tự như cách trên, tuy nhiên mình sử dụng số tương đối (%) thay cho con số tuyệt đối (px) nên các bạn không phải tùy chỉnh nhiều như cách trên)

1. Vào Thiết kế > Chỉnh sửa HTML

2. Thêm đoạn code sau trước thẻ ]]></b:skin>

#magazine-left2 {width: 45%;float: left;}
#magazine-right2 {width: 45%;float: right;}

3. Tìm đoạn code sau:

<div id='main-wrapper'>

Thêm vào sau nó đoạn code bên dưới:

<b:section class='sidebar' id='magazine-left' showaddelement='yes'>
<b:widget id='Text51' locked='false' title='Column 1' type='Text'/>
</b:section> <b:section class='sidebar' id='magazine-right' showaddelement='yes'>
<b:widget id='Text52' locked='false' title='Column 2' type='Text'/>
</b:section>
<div style="clear: both;">
</div>

Chúc thành công!

 Cách 2 :
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

Để 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 :

Main Post body theo mặc định

 

Main Post body sau khi chia làm 2 cột

DEMO

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 !

iTechPlus

Được đăng tại nhãn: Thủ thuật blog