Chủ Nhật, 16 tháng 11, 2014

Khi chúng ta tìm kiếm template cho blogspot của mình, tìm mãi mới được một cái đẹp thì nó không có footer mà cái có footer thì lại không ưng ý. Vì vậy hôm nay Hồng Designer hướng dẫn các bạn Thêm 3 cột Footer cho Blogger.
Footer Blogger

Để làm được điều này các bạn làm theo các bước sau:

Bước 1 : 

Đăng nhập vào Blogger => Mẫu => Chỉnh sửa HTML (Sao lưu mẫu của bạn lại trước đề phòng bất trắc)

Bước 2 :

Tìm đến đoạn code sau <b:section class='footer' id='footer'/>

Bước 3 : 

Thay thế đoạn code vừa tìm được bằng đoạn code sau :
<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/></div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div><div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/></div>
<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'><b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section></div><div style='clear:both;'/></div>

Bước 4 : 

Tiếp tục tìm đến thẻ ]]> </b:kin> Và thêm code sau đây trước thẻ này
/* Footer by www.bloggertrix.com */
#footer-column-container {clear:both;}
#footer-column-container h2{font-size:18px;text-align:left;color:#ddd;Times New Roman&quot;,Times,serif;
font:normal bold 18px Arial,Georgia,&quot;text-transform:none}
.footer-column {padding: 10px;}

Bước 5 : 

Lưu template của bạn lại vào qua mục bố cục xem thành quả bạn vừa làm được.

0 nhận xét:

Đăng nhận xét