• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

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

7
23/01/2011

Ở 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.

{7 bình luậnAdd yours ?}

23:09:00, 23 thg 1, 2011

Trời ạ, hehe mới đó mà bạn đã viết một bài hoành tráng như thế này rồi, thật sự khâm phục bạn quá, rất cám ơn bạn đã giúp, mình sẽ bắt tay vào làm thử! Xin cảm ơn bạn!

Reply
23:38:00, 23 thg 1, 2011

hi bạn mình muốn tạo như hình này cơ...hu..hu

http://sphotos.ak.fbcdn.net/hphotos-ak-snc6/hs001.snc6/165102_177430468959846_100000786823480_338877_2171940_n.jpg

Ở dưới feature có dòng tự chạy như trang http://dethanhcong.com (dưới feature đó)

Và bên phải là widget tự tạo, bạn xem hình mình bố trí mẫu giúp nhá! chúc bạn ngon giấc!

Reply
23:42:00, 23 thg 1, 2011

dòng Feature của dethanhcong.con có nhiều nhãn, mình chỉ làm cho một nhãn thôi...cám ơn bạn!

Reply
20:13:00, 24 thg 1, 2011

Mình đang đợi câu trả lời của bạn! Hic...

Reply
21:06:00, 24 thg 1, 2011

@BB Cứ bình tĩn nào, tết nhất tới nơi busy lém đó, khi nào có hứng mới chấp bút được chứ bạn. :69)

Reply
21:10:00, 24 thg 1, 2011

cám ơn bạn...he...he.. ước gì mình giỏi như bạn nhỉ? Cám ơn bạn đã giúp!

Reply
01:59:00, 3 thg 7, 2011

Rất cảm ơn các thông tin anh em đã cung cấp cho công đồng Blog, những bài viết rất cô đọng và giải đáp hầu hết các thắc mắc của Blogger. Nhân tin mình rất thích giao diện đăng nhận xét và Reply của trang này, chức năng nhảy về đầu trang Jump to top, về trang chủ Home, rất mong bạn ghé thăm trang Blog của cộng đồng PCX http://pcxhanoiclub.blogspot.com và hỗ trợ anh em. (thanhdnn@gmail.com)

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn