Tạo 3 cột cho widget ở vị trí chân trang (footer) cho blogspot

Đăng bởi Admin | 5/12/13 | 0 nhận xét

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 :

1	]]></b:skin>

Sau đó past đoạn code sau vào ngay trước  ]]></b:skin>

001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 101 102 103

#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>

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20

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

Chúc các bạn thành công !

                                                                                               Theo: thuthuatweb.net