Adding a New Element in Blogger

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='==&gt;&gt; Prikitiw &lt;&lt;==' 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='==&gt;&gt; Uye-uye &lt;&lt;==' 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.