Thủ thuật blogger chia Wiget ở Sidebar làm 2 cột

[LovePrince]> Đây là một trong những thủ thuật khá phức tạp đối với những bạn mới làm blogspot. Mình đã phải mày mò mất vài ngày mới tìm ra được cách chia đôi wiget ở sidebar. Sau đây loveprince sẽ hướng dẫn các bạn thủ thuật này.

Bước 1: Cái khó nhất của thủ thuật không phải ở chỉnh sửa mã lệnh mà bạn làm sao tìm được đúng chỗ để chèn đoạn code. Bạn vào chỉnh sửa HTML trong blogspot. Nhấn Ctrl F tìm đến đoạn mã tương tự như thế này:

Có nhiều theme chuyển từ wordpress sang blogspot nên rất khó tìm được đoạn code như thế. Điển hình là cái blogger của mình.

/************** LAYOUT.CSS ****************** /

/*---:[ core layout elements ]:---*/
.full_width { width: 100%; clear: both; }
.full_width .page { width: 95.7em; margin: 0 auto; padding-right: 0em; padding-left: 0em; }
#header_area .page { padding-top: 0em; }
#footer_area .page { padding-bottom: 0em; }
#header, #footer { padding-right: 1.1em; padding-left: 1.1em; }
#content_box { width: 100%; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTOIpqzY0y-EkJTo6u0KM7O3Cz8fQas9wyMZhb04TjM2YpjAaiFZ5um09Q8EI-XI_AeNZjG3uNaVaf-Bl1IWK0Vbrp17BJ83qka49uf_jjZKr1hMecFq9bFLrZmSgQJXSCNkTVKPb-Xy0/s1600/dot-ddd.gif') 63.4em 0 repeat-y; }
.no_sidebars { background: none !important; }

#content { width: 63.4em; float: left; }
.no_sidebars #content { width: 100%; }
.post_box, .teasers_box, .full_width #content_box .page { margin: 0 2.3em 0 1.1em; }
.full_width #content_box .page { width: auto; }
.no_sidebars .post_box { margin: 0 1.1em; }
.teasers_box { width: 60em; }
.teaser { width: 28.9em; }
#archive_info, .prev_next { padding-right: 2.3em; padding-left: 1.1em; }
#sidebars { width: 32.2em; border: 0; float: right; }
.sidebar { width: 100%; }
#sidebar_1 { border: 0; }
.sidebar ul.sidebar_list { padding-right: 1.1em; padding-left: 1.1em; }

Bước 2: Bạn copy đoạn code này dán vào phía dưới chỗ đoạn code được tìm thấy ( khoanh tròn bên trên )

#lsidebar {
float: left;
width: 120px;
margin: 0;
padding: 1px 1px 0;
border: 1px solid #DDD;
display: inline; }

#rsidebar {
float: right;
width: 200px;
margin: 0;
padding: 1px 1px 0;
border: 1px solid #DDD;
display: inline; }

Bước này bạn chỉnh CSS một chút ở độ rộng của wiget làm sao cho: Tổng độ rộng cả web = or > độ rộng 2 wiget mới + độ rộng bài viết. Bạn hãy cố chỉnh các thông số width sao cho hợp lý nhất. Có 2 thông số độ rộng bạn cần quan tâm là: px và em.
Ví dụ ở cái hình đầu tiên: 940 px > 600 px main + 320 px sidebar

Bước 3: Bạn tìm đoạn code như hình khoanh tròn bên dưới. Dùng Ctrl F tìm cho nhanh, chú ý cái class ='sidebar'.

Tiếp theo bạn dán đoạn code này như theo hình bên trên.

<b:section class='lsidebar' id='lsidebar' preferred='yes'>
<b:widget id='AdSense2' locked='false' title='' type='AdSense'/>
</b:section>

<b:section class='rsidebar' id='rsidebar' preferred='yes'>
<b:widget id='HTML27' locked='false' title='' type='HTML'/>
</b:section>

Nếu save xong có báo lỗi trùng tên thì bạn đổi lại cho phù hợp.

Tác Giả: LovePrince