Monday, June 27, 2011

Add 3 column footer in templates

Naturally, his own uniqueness has most of the blogger template. As in the number of columns. There are two three or four columns. The question is is the template a column is "Add Gadget" in the footer? If this is not the case, here I try to share tips Add 3 column footer in templates. It is possible that this tutorial useful for PAL wants to install is / a three column footer element in the blog template, owned by PAL Add.

Previously, ensure that the templates blog PAL Add gadgets element not yet in the footer section aka 2 or 3 column sidebar only exists.

And steps to the adds a 3 column footer in templates, as follows:

(1) login to blogger. Click after the draft , and then click Edit html.

2. Backup / by clicking on the save your first template, download full template is used. This is to anticipate the next time an error occurs while modifying the template.

3. Done, enter the small check box next to the to expand widget templates.

4. next code search:


< div id = 'Footer' >

5. after the meeting right above the code insert / insert code like below:


< div id = "bottom" >
< B: section class = 'bottom' ID = 'bottom_1' preferred = "Yes" / >
< B: section class = 'bottom' ID = 'bottom_2' preferred = "Yes" / >
< B: section class = 'bottom' ID = 'bottom_3' preferred = "Yes" / >
< / div >

6. This done for more code:

[]] > < / B: skin >

(7) the above code is in a timely manner (No. 6), enter the following CSS code:

# Bottom {width: 900px;} Position: relative; clear: both; margin: 0px auto 0px; Color: # 000000; Float: left; Background: # f7f7f7; Padding: 15px; {Margin: 0px}
# Bottom h2 {color: # 333;} Font-size: 14px; Font-family: Arial, Tahoma, Verdana; Font-weight: bold; Margin-top: 5px; Line-height: 1.4 em; Letter-spacing: 0em; Text-transform: capitalize; {Border-bottom: solid # ccc "1px";}
# Bottom UL {padding: 0px;} {Margin: 0px;}
# Bottom ul li {line-height: 26px;} List-style-type: Square; {Border-bottom: solid # f f "1px";}
# bottom_1 {width:260px;}Float: left; Margin-left: 20px; {padding: 0px;}
# bottom_2 {width:260px;} Float: left; Margin-right: 35px; {padding: 0px;}
# bottom_3 {width:260px;} Float: left; Margin-left: 35px; {padding: 0px;}

Note in the code width: 900px to width of the header in the template type. Do not know its size? (read: find out the width of the header). 260Px code is the width of each column of the Footernya that add up to three. 260Px this 900px gained fewer 120px (total amount of the margin and padding) 780px split = then 260px= 3.

8. After the last step wrong click on Save the template.

If successful, display of Ergebnisse- design part. Add it to a new automatic connection add Add gadgets at the bottom of the footer alias 3 column footer.

Related Post :


0 komentar:

Post a Comment