Tạo thêm phần Crosscol dưới phần Header

Ở một số Template của Blogger có thể thấy dưới phần Header là một thành phần bố trí một tiện ích Feature có hiệu ứng slide để tạo sự nổi bật cho blog. Thành phần đó là crosscol. Thông thường phần crosscol chỉ có một cột. Và phần này có thể được điều chỉnh để chia thành hai cột và có thể thêm một cột ở dưới hai cột này.

1. Thêm Crosscol phía dưới phần Header (trên phần Blog Posts).

Đăng nhập Blogger, vào Design >> Edit HTML.

a. Đối với các Template dạng Layout. Tìm dòng <div id='content-wrapper'> và đặt trước nó với đoạn code bên dưới.

<div id='crosscol-wrapper' style='text-align:justify'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

b. Riêng đối với các Template mới nhất sẵn có của Blogger (như mẫu Simple) thì đã có sẳn phần Crosscol và code của nó như sau:

<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
</div>

2. Chia phần Crosscol thành hai cột.
a. Đối với Template dạng Layout. Thay đoạn code ở phần 1.a bằng đoạn code bên dưới.

<div id='crosscol-wrapper' style='text-align:justify'>
<b:section class='crosscol' id='crosscol-left' preferred='yes' showaddelement='yes'/>
<b:section class='crosscol' id='crosscol-right' preferred='yes' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

b. Đối với các Template mới nhất sẵn có của Blogger thì thay đoạn code ở phần 1.b bằng đoạn code bên dưới.

<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

3. Thêm một thành phần Crosscol có hai cột dưới một Crosscol có sẵn.
a. Đối với Template dạng Layout.
Thay đoạn code ở phần 1.a bằng đoạn code bên dưới.

<div id='crosscol-wrapper' style='text-align:justify'>
<b:section class='crosscol' id='crosscol' maxwidgets='1' showaddelement='yes'/>
<b:section class='crosscol' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section class='crosscol' id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

b. Đối với Template mới nhất sẵn có của Blogger.
Thay đoạn code ở phần 1.b bằng đoạn code sau đây.

<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

Đối với các mục 2 và 3 thì cần phải thêm code CSS.

Đối với mục 2.a và 3.a thì thêm đoạn code CSS sau đây vào trước dòng ]]></b:skin>.

#crosscol-left {width:40%;display:inline-block;_float:left;}
#crosscol-right {width:40%;display:inline-block;float:right;padding: 15px}
#crosscol-right .widget {margin:0;}
body#layout #crosscol-left {width: 50%; float: left;}
body#layout #crosscol-right {width: 50%; float: right;}

Đối với mục 2.b và 3.b thì thêm đoạn code sau đây vào trước dòng ]]></b:skin>.

#crosscol-left {width:40%;display:inline-block;_float:left;}
#crosscol-right {width:40%;display:inline-block;float:right;padding: 15px}
#crosscol-right .widget {margin:0;}

Sau đó đặt trước dòng ]]</b:template-skin> với đoạn code bên dưới.

#layout #crosscol-left {width: 50%; float: left;}
#layout #crosscol-right {width: 50%; float: right;}

Lưu Template là OK.

* Giải đáp yêu cầu riêng của bạn BB từ trang Baoblog.net.

Bạn BB yêu cầu được tôi xử lý giúp, thêm một cột ngang dưới phần Feature Content (slide) trên blog của bạn ấy. Quả thật chắc chắn bạn ấy có vọc cả tháng cũng không thể nào thêm được một cột như thế bởi vì Template này được design rất khác biệt so với những Template thông thường.

Để thêm một cột ngang có 3 phần bằng nhau (như các mục TIN TỨC – XÃ HỘI – PHÓNG SỰ) dưới phần Feature Conent thì bạn BB phải thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit Template, chọn Expand Widget Templates.

Tìm dòng <!--end: contentwide--> và đặt sau nó với đoạn code bên dưới.

<div id="contentwide2">
<div style="padding-left: 0pt;" class="catbox left">
<script>
document.write('&lt;div class=&quot;category&quot;&gt;&lt;a href=&quot;/search/label/'+label11+'?max-results=10&quot;&gt;'+Title11+'&lt;/a&gt; &lt;/div&gt;');
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<!--end: catbox-->

<div class="catbox left">
<script>
document.write('&lt;div class=&quot;category&quot;&gt;&lt;a href=&quot;/search/label/'+label12+'?max-results=10&quot;&gt;'+Title12+'&lt;/a&gt; &lt;/div&gt;');
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label2+&quot;?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<!--end: catbox-->

<div style="padding-right: 0pt; border-right: 0pt none;" class="catbox left">
<script>
document.write('&lt;div class=&quot;category&quot;&gt;&lt;a href=&quot;/search/label/'+label13+'?max-results=10&quot;&gt;'+Title13+'&lt;/a&gt; &lt;/div&gt;');
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label3+&quot;?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<!--end: catbox-->
</div>
<!--end: contentwide2-->

Bước 2. Đặt đoạn code sau đây vào trước dòng ]]></b:skin>.

#contentwide2{background:#FFF;float:left;width:940px;margin:5px 0 0;padding:10px}
#contentwide2 h2{margin:5px 0;font-size:12px;font-weight:bold}
#contentwide2 ul{margin:10px;padding:10px;border-top:1px dashed #CCC}
#contentwide2 li{background:#FFF url(http://bit.ly/hGi23S) no-repeat 1px 4px;padding:0 0 5px 10px}
#contentwide2 li a{}

Bước 3. Tìm sau thẻ </head> đến đoạn code như bên dưới. Phần được đánh dấu màu đỏ là phần cần được thêm vào. Bạn cần thay tên các chuyên mục 11, 12, 13 tương ứng với các nhãn mới mà bạn áp dụng cho cột nằm ngang này.

label1 = "tintuc";
Title1 = "TIN TỨC";

label2 = "xahoi";
Title2 = "XÃ HỘI";

label3 = "phongsu";
Title3 = "PHÓNG SỰ";

label4 = "baoblog";
Title4 = "CHỈ CÓ Ở BÁO BLOG";

label5 = "biendong";
Title5 = "TIN BIỂN ĐÔNG - BAUXITE";

label6 = "nguoiviet";
Title6 = "NGƯỜI VIỆT XẤU XÍ";

label7 = "hautruong";
Title7 = "HẬU TRƯỜNG SAO";

label8 = "xicangdan";
Title8 = "XÌ CĂNG ĐAN";

label9 = "video";
Title9 = "VIDEO HOT";

label10 = "feature";
Title10 = "feature";

label11 = "chuyenmuc11";
Title11 = "CHUYÊN MỤC 11";


label12 = "chuyenmuc12";
Title12 = "CHUYÊN MỤC 12";


label13 = "chuyenmuc13";
Title13 = "CHUYÊN MỤC 13";

Lưu Template là OK.

Phù, mệt bở hơi tai rồi. :58) May mà thành công.