|
|
If you were interested to replace new template or want to redesign your template, It is best to backup your template before you changing any code.This step was as prevented to reduce the fatal risk if the mistake happening in redesign or changing your template. For you that did not yet know how to backup your template, please followed steps below :
1. Log in to Blogger with your account.
2. After entering the dashboard page , click template.
3. Then click edit HTML tab.
4. Click the Download full template link.
5. After you click Download full template link, then will emerge new window just to download. Click the Save button.
6. You could choose this data would in kept where and with what file name what, Afterwards ended with click of the Save button.
7. Finish.
Now you had back up the template, if next time you needed it, you could use this came back.Now I will explain how to create a 2 column template become 3 column template,the steps are as follows:
1.Scrolldown HTML editor on blogger so you find the code as follows:
@media all {
div#main {
float:$startSide;
width:66%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide:dotted 1px $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
2.Change the widht from 66% widht to 40% widht because we will make a second sidebar 26% widht and the second sidebar code like this:
div#sidebar2 {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide;
float: $endSide;
width: 26%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
3.Scroll down after the <body> tag we will find the code like this:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section> </div>
4.Then cut and paste the code above after the code first sidebar:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
5.Then cut and paste the code as a second sidebar below after the new location of main wrapper code,the second sidebar code will be like this:
<div id='sidebar-wrapper'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
</b:section>
</div>
6.If we combined the code after the <body> tag above will be like this:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section> </div>
<div id='sidebar-wrapper'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
</b:section>
</div>
7.Then save the template and we already have a 3 column template.
1. Log in to Blogger with your account.
2. After entering the dashboard page , click template.
3. Then click edit HTML tab.
4. Click the Download full template link.
5. After you click Download full template link, then will emerge new window just to download. Click the Save button.
6. You could choose this data would in kept where and with what file name what, Afterwards ended with click of the Save button.
7. Finish.
Now you had back up the template, if next time you needed it, you could use this came back.Now I will explain how to create a 2 column template become 3 column template,the steps are as follows:
1.Scrolldown HTML editor on blogger so you find the code as follows:
@media all {
div#main {
float:$startSide;
width:66%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide:dotted 1px $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
2.Change the widht from 66% widht to 40% widht because we will make a second sidebar 26% widht and the second sidebar code like this:
div#sidebar2 {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide;
float: $endSide;
width: 26%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
3.Scroll down after the <body> tag we will find the code like this:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section> </div>
4.Then cut and paste the code above after the code first sidebar:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
5.Then cut and paste the code as a second sidebar below after the new location of main wrapper code,the second sidebar code will be like this:
<div id='sidebar-wrapper'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
</b:section>
</div>
6.If we combined the code after the <body> tag above will be like this:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section> </div>
<div id='sidebar-wrapper'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
</b:section>
</div>
7.Then save the template and we already have a 3 column template.
Posts
No comments:
Post a Comment