Có lẽ bạn đã thấy nhiều ở những trang blog chuyên nghiệp và thương mại thường có đến 3 cột để chèn các widget vào ở tại vị trí footer, và bạn cũng muốn làm điều đó. Chỉ tiếc một điều là template mà bạn đang dùng hiện tại lại không hỗ trợ cho việc hiển thị 3 cột tại vị trí footer. Nếu bạn gặp vấn đề này thì mình sẽ bày cho các bạn tự tay tạo thêm 3 vị trí cho template của mình.
Nào chúng ta cùng từng bước thực hiện nhá :
Bước 1 : Đăng nhập vào Blogger : Dashboard > Design > Edit Html
Bước 2 : Sao lưu lại toàn bộ template trước khi tiến hành
Bước 3 : Tìm kiếm đoạn code sau :
]]></b:skin>
Sau đó past đoạn code sau vào ngay trước ]]></b:skin>
#lower {
border-top: #737373 6px solid;
margin:auto;
font-family: Georgia;
width: 960px;
padding: 0px 0px 10px 0px;
background:#1f1f1f;
}
#lower a {
color: #DBDBDB;
font-family: Georgia;
}
#lower-wrapper {
margin:auto;
font-family: Georgia;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
background:#1f1f1f;
float: left;
color: #ebedee;
font-family: Georgia;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-size:100%;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color:#fff;
text-transform:uppercase;
font: bold 16px Arial, Tahoma, Verdana;
border-bottom:3px solid #666666;
}
.lowerbar ul {
list-style:none;
margin: 0;
padding: 0;
}.lowerbar li a {
width: 265px;
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em;
margin-bottom: 11px;
margin-right: 3px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar li a:visited {
width: 265px;
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em;
margin-bottom: 11px;
margin-right: 3px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar li a:hover {
background: #4f4f4f;
border: 1px solid #7a7a7a;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em; -webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar a {
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
float:left;
-moz-border-radius: 5px;
padding: 0.5em;
margin-right: 3px;
margin-bottom: 11px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar a:hover {
background: #4f4f4f;
border: 1px solid #7a7a7a;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em; -webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}
Bước 4 :
Bây giờ bạn tìm kiếm </body> và past đoạn code sau ngay trên </body>
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
<b:widget id='HTML12' locked='false' title='Testing' type='HTML'/>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='HTML5' locked='false' title='Recent Comments' type='HTML'/>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Top Commentators @ AmmarWeb.Tk' type='HTML'/>
<b:widget id='HTML9' locked='false' title='Our Partners' type='HTML'/>
</b:section>
</div>
<div style='clear: both;'/></div></div>
Bước 5 :
Save template lại , và bây giờ bạn vào Layout > Page Elements và bắt đầu thêm các widget vào
các vị trí mà chúng ta đã tạo ra.
Các bạn có thể thay đổi độ rộng và màu sắc trong đoạn css ở bước thứ 3. Nếu có gì thắc mắc hay cần mình nói rõ điều gì thì các bạn nhớ để lại lời nhắn nha. Mình sẽ giúp các bạn.