Explanation of On Page Element in the articles I've written about Know Page Element In blogspot so if still wondering about what's Page Element? Just read the article I Know Page Element in blogspot
Adding a New Element
Now if the intent of the title Adds New Element is here I will give you a trick to add a useful element to add the widget, be it under the header or footer in the clear just the addition of only 3 columns and a column on it.
The addition of the element is useful to add useful widgets for your blog., Here I only give way / trick on Adding a New Element. This trick may be useful for my friend who is only 2 column template only has a column or a little, well, why if you want to add the element please follow the steps below:
1. as usual login to blogger
2. This adds to the element under the first header
3. Go to the Layout >> Edit HTML ==
4. Do not forget to backup your template first
5. Now find this code ]]> </ b: skin> then put the code below right above it
# Box-container {main-
clear: both;
}
. Box-column {
padding: 0px 10px 10px 10px;
border: 1px dotted $ bordercolor;
}
6. After that find this code <div id='content-wrapper'> and place the code below directly below:
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'>
<b:widget id='HTML3' locked='false' title='==>> Prikitiw <<==' type='HTML'/>
</ B: section>
<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; text-align: margin:0; left;'>
<b:section class='box-column' id='oke1' preferred='yes' style='float:left;'/>
</ Div>
<div id='box2' style='width: 40%; float: left; text-align: margin:0; left;'>
<b:section class='box-column' id='oke2' preferred='yes' style='float:left;'/>
</ Div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='oke3' preferred='yes' style='float:right;'/>
</ Div>
<div style='clear:both;'/>
</ Div>
</ Div>
Then the picture will be like this
7. Well to the addition of the element under the header is finished now in the footer
8. Find the code ]]> </ b: skin> then put the code below right above it
# Footer-column-container {
clear: both;
}
. Footer-column {
padding: 10px;
}
9. after that find this code <b:section class='footer' id='footer'/> and replace with the code below
<div id='footer-column-container'>
<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='==>> Uye-uye <<==' type='Text'/>
</ B: section>
</ Div>
<p>
<hr align='center' color='#5d5d54' width='90%'/> </ p>
<div id='footer2' style='width: 30%; float: left; text-align: margin:0; left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</ Div>
<div id='footer3' style='width: 40%; float: left; text-align: margin:0; 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>
Then it will look like this
10. after that save it and to see my friend could get into result element
page.
No comments:
Post a Comment