THÊM CỘT SIDEBAR CHO BLOGGER
Ở đây mình chỉ áp dụng với blogspot nhưng các bạn có thể áp dụng rộng hơn với mọi thành phần hình ảnh trong website. Đối với blogspot1. Đăng nhập vào blogger
2. Vào bố cục (thiết kế) chọn chỉnh sửa HTML
3. Tìm đến dòng code bên dưới hoặc tương tự
#sidebar-wrap {
width:210px;
float:left;
margin:0px 0px 0px 2px;
font-size:97%;
line-height:1.5em;
}
width:210px;
float:left;
margin:0px 0px 0px 2px;
font-size:97%;
line-height:1.5em;
}
4. Thêm đoạn dòng code màu xanh vào bên dưới code vừa tìm được như bên dưới
#sidebar-wrap {
width:210px;
float:left;
margin:0px 0px 0px 2px;
font-size:97%;
line-height:1.5em;
}
#rightsidebar-wrapper {
width: 230px;
background:#FFFF99 ;
padding:0px 0px 0px 0px;
margin:0px 2px 0px 2px;
float: right;
line-height:1.5em;}
width:210px;
float:left;
margin:0px 0px 0px 2px;
font-size:97%;
line-height:1.5em;
}
#rightsidebar-wrapper {
width: 230px;
background:#FFFF99 ;
padding:0px 0px 0px 0px;
margin:0px 2px 0px 2px;
float: right;
line-height:1.5em;}
Lưu ý: Bạn hãy chú ý độ rộng(width) của 2 cột sidebar, phần main và phần outer-wrapper. Tổng độ rộng của phần main + sidebar + rightsidebar < outer-wrapper thì bố cục của blog mới không bị lệch.
5. Tiếp đến bạn tìm code như bên dưới hoặc tương tự
<div id='main-wrap1'><div id='main-wrap2'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
6. Thêm vào sau code vừa tìm được dòng code bên dưới
<div id='rightsidebar-wrapper'>
<b:section class='sidebar' id='rightsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
<b:section class='sidebar' id='rightsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
7. Cuối cùng save template lại
Chúc bạn thành công.
Disqus Comment
Show Disqus