• 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ùy biến với sidebar cho Blogger

8
02/12/2010

(Huynh Nhat Ha's Blog) -- Phần sidebar trên Template của Blogger cũng có nhiều biến thể khác nhau. Có Template chỉ 1 cột, có Template 2 cột, thậm chí có thể thêm thành 3, 4 cột… Một số trường hợp phức tạp hơn, đặc biệt đối với dạng 1 cột, thì có thể chia thành 2 phần: phần trên gồm 1 cột, phần dưới chia thành 2 cột hoặc ngược lại, phần trên gồm 2 cột, phần dưới gồm 1 cột.

Lấy ví dụ, nếu sidebar trên Template của tôi có 1 cột thì cấu trúc HTML trong Template sẽ có dạng:


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

Nếu tôi muốn chia thành 2 phần mà phần trên gồm 1 cột và phần dưới chia thành 2 cột thì tôi phải thiết lập cấu trúc HTML trong Template như sau:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>

<div id='2columns'>
<div class='col-left'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
<div class='col-right'>
<b:section class='sidebar' id='sidebar3' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>
</div>

</div>

Sau đó cần thêm thuộc tính CSS cho phần 2 cột, thêm đoạn code sau đây vào trước dòng ]]></b:skin>.

.col-left {
float:left;
width:47%;
}
.col-right {
float:right;
width:48%;
}

Như vậy toàn bộ đoạn code CSS cho kiểu sidebar này có dạng như sau:

#sidebar-wrapper {
float:right;
margin-right:40px;
margin-top:-9px;
overflow:hidden;
width:296px;
word-wrap:break-word;
}
h2 {
border-bottom:1px solid #CCCCCC;
font:$headerfont;
color:$sidebarcolor;
letter-spacing:0;
margin:0 -10px;
padding:0 10px 5px;
text-transform:none;
}
.sidebar {
color:$sidebartextcolor;
font-size:90%;
line-height:1.5em;
}
.sidebar ul {
list-style:none outside none;
margin:0;
padding:0;
}
.sidebar li {
line-height:1.5em;
margin:0;
padding:0 0 0.25em 15px;
text-indent:-15px;
}
.sidebar .widget {
border-bottom:1px dotted #CCCCCC;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.col-left {
float:left;
width:47%;
}
.col-right {
float:right;
width:48%;
}

Giải đáp yêu cầu của bạn Mai Ly: Nếu bạn muốn thêm một cột sidebar vào dưới 2 cột sidebar sẵn có nhưng có chiều rộng bằng tổng chiều rộng của 2 cột đó thì phải điều chỉnh một số điểm, đại khái như sau:

Bạn phải đặt một id có tên rightcol để chứa toàn bộ các cột sidebar, sau đó thêm vào một id có tên sidebar3, đặt code HTML như sau:

<div id='rightcol'>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Archives' type='BlogArchive'/>
</b:section>
</div>
<div id='sidebar-wrapperL'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='Label2' locked='false' title='Categories' type='Label'/>
</b:section>
</div>
<b:section class='sidebar' id='sidebar3' preferred='yes'>
<b:widget id='HTML100' locked='false' title='HTML' type='HTML'/>
</b:section>

</div>

Những phần được đánh dấu màu đỏ là phần thêm vào, những phần còn lại có thể không còn giống như trên Template của bạn bởi vì bạn đã thêm đủ thứ tiện ích vào đó rồi (ở đây chỉ giới thiệu nguyên gốc của Template lúc chưa chỉnh sửa).

Ở phần CSS thêm vào như sau (những phần được đánh dấu màu đỏ là phần thêm vào).

#rightcol {
float:right;
margin-top:182px;
overflow:hidden;
width:350px;
word-wrap:break-word;
}
#sidebar-wrapper {
float:right;
margin-right:20px;
overflow:hidden;
width:150px;
word-wrap:break-word;
}
h2 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://3.bp.blogspot.com/_qJFbsMHBJNg/SnFdY2vIBLI/AAAAAAAAAEE/81UBGmzjv6o/s1600/bg_sb_head1.gif) no-repeat scroll center top;
color:#000000;
font-family:'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
font-size:78%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:32px;
letter-spacing:0;
line-height:1.4em;
margin:1.5em 0 0.75em;
padding-left:20px;
padding-top:7px;
text-transform:uppercase;
}
.sidebar {
color:#666666;
font-family:georgia;
line-height:1.5em;
}
.sidebar ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
.sidebar li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://4.bp.blogspot.com/_qJFbsMHBJNg/SnFdjHawKRI/AAAAAAAAAEM/kBWYRh9LooI/s1600/bg_sb_arrow1.gif) no-repeat scroll 0 5px;
line-height:1.5em;
margin:0;
padding:0 0 0.25em 15px;
}
.sidebar .widget, .main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}
#sidebar h4 a.rsswidget {
margin-left:0;
overflow:hidden;
text-decoration:none;
}
#sidebar-wrapperL {
float:left;
overflow:hidden;
padding-left:25px;
width:150px;
word-wrap:break-word;
}
#sidebar3 {
float:right;
margin-top:0;
overflow:hidden;
padding-right:20px;
width:300px;
word-wrap:break-word;
}
#sidebar3 h2 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(URL_hinh anh) no-repeat scroll center top;
color:#000000;}
.widget-content {
padding-left:10px;
}

Bạn cần phải tạo một background cho tiêu đề của sidebar được thêm vào, sau đó upload lên host (hoặc lên Blogger) để lấy đường link rồi thay vào dòng URL_hinh anh.

{8 bình luậnAdd yours ?}

nguyen_libra
01:06:00, 4 thg 12, 2010

em làm mà ko được, anh giúp em với!

Reply
01:17:00, 4 thg 12, 2010

Template của Mai Ly có nhiều chỗ khác với phần giới thiệu ở trên, nếu rành tí em sẽ vận dụng được đối với Template em. Để anh test xong Blog em rồi đăng thêm hướng dẫn ở bài này nhé.

Reply
nguyen_libra
01:23:00, 4 thg 12, 2010

Em làm được rùi, cám ơn anh rất nhìu nhìu!!!!!

Reply
16:52:00, 5 thg 12, 2010

Ok. Nghiên cứu kỹ sẽ làm tốt thôi. :o

Reply
22:12:00, 15 thg 2, 2011

Hi, cậu giúp mình sửa cái sidebar với, lúc đầu mình làm temp 3 cột, main giữa 2 side, nhưng sau này sửa lại bỏ cái side bên trái (thực ra ẩn side bên trái), giờ mình muốn mở rộng thêm widget nên tính chuyển cái side bên trái đã ẩn sang cùng bên phải, nhưng làm hoài ko đc do ko hiểu cách chỉnh lắm, cậu giúp giùm mình hi :)

Reply
09:06:00, 17 thg 2, 2011

Bác Hà ơiiii...bác giúp giùm mình đi, cái phần mail và liên hệ trên forum mình tính gửi hỏi bác mà ko đc, giúp mình sửa phần sidebar đc ko ^^

Reply
11:08:00, 17 thg 2, 2011

Cái này bạn dựa vào bài viết ở trên làm từ từ sẽ được thôi. Dạo này bận việc nên k có thời gian làm dùm mọi người được.

Reply
23:11:00, 6 thg 2, 2014

http://vochongyeu.blogspot.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