Save Template

Wednesday, November 12, 2008

Make a Three Columns Rounder3

This is a 'Two Column Rounder3' Template for Blogspot

And this is a 'Three Column Rounder3'

You can directly download the Full Code of this templete here on this link

But if you want to do it yourself, then you may follow these steps to convert your 2 column rounder template into three columns template

Go into Layout à
Edit HTML

Click on ‘Expand Widget Templates’

Replace this following black code with following red code:

#outer-wrapper {

width:740px;

margin:0 auto;

text-align:$startSide;

font: $bodyFont;

}

#outer-wrapper {

width:990px;

margin:0 auto;

text-align:$startSide;

font: $bodyFont;

}

Now replace the following code with red one:

#main-wrap1 {

width:485px;

float:left;

background:$mainBgColor url("http://www1.blogblog.com/rounders3/corners_main_bot.gif")
no-repeat $startSide bottom;

margin:15px 0 0 ;

padding:0 0 10px;

color:$mainTextColor;

font-size:97%;

line-height:1.5em;

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
*/

}

#main-wrap1 {

width:485px;

float:left;

background:$mainBgColor url("http://www1.blogblog.com/rounders3/corners_main_bot.gif")
no-repeat $startSide bottom;

margin: 12px 0 0 12px;

padding:0 0 10px;

color:$mainTextColor;

font-size:97%;

line-height:1.5em;

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
*/

}

5. Now replace the
following code with red one

#sidebar a {

color: $bottomSidebarLinkColor;

}

#sidebar
a:hover,

#sidebar
a:visited {

color: $bottomSidebarVisitedLinkColor;

}

#sidebar a {

color: $bottomSidebarLinkColor;

}

#sidebar a:hover,

#sidebar a:visited
{

color: $bottomSidebarVisitedLinkColor;

}

#left-sidebar-wrap
{

width:240px;

float:left;

margin:15px 0 0;

font-size:97%;

line-height:1.5em;

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
*/

}

#left-sidebar-wrap1 {

background:$mainBgColor url("http://www.blogblog.com/rounders3/corners_side_top.gif")
no-repeat left top;

margin:0 0 15px;

padding:10px 0 0;

color: $mainTextColor;

}

#left-sidebar-wrap2 {

background:url("http://www.blogblog.com/rounders3/corners_side_bot.gif")
no-repeat left bottom;

padding: 10px 0 8px;

}

#left-sidebar h2 {

color: $postTitleColor;

border-bottom: 1px dotted $postTitleColor;

}

Now replace the following code with red one:

#header-wrapper {

background:$titleBgColor url("http://www2.blogblog.com/rounders3/corners_cap_top.gif")
no-repeat $startSide top;

margin-top:22px;

margin-$endSide:0;

margin-bottom:0;

margin-$startSide:0;

padding-top:8px;

padding-$endSide:0;

padding-bottom:0;

padding-$startSide:0;

color:$titleTextColor;

}

#header {

background:url("http://www.blogblog.com/rounders3/corners_cap_bot.gif")
no-repeat $startSide bottom;

padding:0 15px 8px;

}

#header-wrapper {

background:$titleBgColor url("http://i454.photobucket.com/albums/qq270/threecolumnblogger/

new_corners3_cap_top.gif")

no-repeat $startSide
top;

margin-top:22px;

margin-$endSide:0;

margin-bottom:0;

margin-$startSide:0;

padding-top:8px;

padding-$endSide:0;

padding-bottom:0;

padding-$startSide:0;

color:$titleTextColor;

}

#header {

background:url("http://i454.photobucket.com/albums/qq270/threecolumnblogger/

new_corners3_cap_bot.gif")

no-repeat $startSide
bottom;

padding:0 15px 8px;

}

Now replace the following code with red one:

#footer-wrap1 {

clear:both;

margin:0 0 10px;

padding:15px 0 0;

}

#footer-wrap2 {

background:$titleBgColor url("http://www2.blogblog.com/rounders3/corners_cap_top.gif")
no-repeat $startSide top;

color:$titleTextColor;

}

#footer {

background:url("http://www.blogblog.com/rounders3/corners_cap_bot.gif")
no-repeat $startSide bottom;

padding:8px 15px;

}

#footer hr {display:none;}

#footer p {margin:0;}

#footer a {color:$titleTextColor;}

#footer .widget-content {

margin:0;

}

#footer-wrap1 {

clear:both;

margin:0 0 10px;

padding:15px 0 0;

}

#footer-wrap2 {

background:$titleBgColor url("http://i454.photobucket.com/albums/qq270/threecolumnblogger/

new_corners3_cap_top.gif")

no-repeat $startSide
top;

color:$titleTextColor;

}

#footer {

background:url("http://i454.photobucket.com/albums/qq270/threecolumnblogger/

new_corners3_cap_bot.gif")

no-repeat $startSide
bottom;

padding:8px 15px;

}

#footer hr {display:none;}

#footer p {margin:0;}

#footer a {color:$titleTextColor;}

#footer .widget-content {

margin:0;

}

Now replace the following code with red one:

<b:section
class='sidebar' id='newsidebar'>

<b:widget
id='Label2' locked='false' title='Labels' type='Label'>

<b:includable
id='main'>

<b:if cond='data:title'>

</b:if>

<ul>

<b:loop
values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url
== data:label.url'>

<data:label.name/>

</span>

<b:else/>

<data:label.name/>

</a>

</b:if>

</li>

</b:loop>

</ul>

<b:include
name='quickedit'/>

</div>

</b:includable>

</b:widget>

</b:section>

</div></div></div>

Now replace the following code with red one:

/** Page structure tweaks for layout editor wireframe
*/

body#layout #main-wrap1,

body#layout #sidebar-wrap,

body#layout #header-wrapper {

margin-top: 0;

}

body#layout #header, body#layout #header-wrapper,

body#layout #outer-wrapper {

margin-$startSide:0,

margin-$endSide: 0;

padding: 0;

}

body#layout #outer-wrapper {

width: 730px;

}

body#layout #footer-wrap1 {

padding-top: 0;

}

]]></b:skin>

/** Page structure
tweaks for layout editor wireframe */

body#layout #header-wrapper,

body#layout #outer-wrapper,

body#layout #footer-wrap1 {

width:840px;

}

body#layout #main-wrap1 {

width: 485px;margin-right:10px;

}

body#layout #sidebar-wrap,

body#layout #left-sidebar-wrap {

width:150px;

}

]]>
]]></b:skin>

</head>

Now Save Template!! Work is done

Friday, November 7, 2008

Remove 'Post Atoms' link from blogger/blogspot blog

You daily see the following "Post (Atom)" link below you post on your
blog.

One can remove this link, by using following method

1. Log in to your Blogger

2. Go in 'Layout'

3. Then click on 'Edit HTML'

4. Then click check the box mentioning 'Expand Widget Templates'

5. Now find this code in the script

<b:include name="'feedLinks'/">

6. Remove this code

7. Click 'SAVE TEMPLATE'

Wednesday, November 5, 2008

How to make a 3 Column Denim Blog from 2 column

You can change your 2 Column 'Stretch Denim Light'
into a 3 Column one, without losing any widget!

(Note:

First of all you must save your old HTML code as a separate notepad file in your computer, so that you would be able to revert it back to old template, in case of any mistake during doing new changes in it.
Secondly, be careful during saving the change and never click on 'yes', if you are asked something like, "Are you sure that you want to delete widgets!" )

1. Log in to your Blogger

2. Go in 'Layout'

3. Then click on 'Edit HTML'

4. Then check the box mentioning 'Expand Widget Templates'

5. Now Search these blue colour codes. And replace them with Red ones.
After doing that, then click the 'SAVE TEMPLATE' button.

1

Firstly Remove this with red code:

#header {
width:740px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

#header {
width:940px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

Then, Remove this blue code with red code

#content-wrapper {
margin: 0 2%;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}

#main-wrapper {
margin-$startSide: 1%;
width: 64%;
float: $startSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}

#sidebar-wrapper {
margin-$endSide: 1%;
width: 29%;
float: $endSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */

}

#content-wrapper {
width: 940px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}

#main-wrapper {
margin-$startSide: 14px;
width: 500px;
float: $startSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}

#sidebar-wrapper {
margin-$endSide: 14px;
width: 192px;
float: $startSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}

#left-sidebar-wrapper {
margin-$endSide: 14px;
width: 192px;
float: $startSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}

Lastly, Remove this blue code with the red code

Note: The above method is very helpful for saving the time. But if you want to learn this process logically with little more time, then please refer to this external link.

How to Unlock Header Wrapper for adding new widget in it!!

Denim Template - How to Unlock Header Wrapper for adding new widget in it!!

(Note:

First of all you must save your old HTML code as a separate notepad file in your computer, so that you would be able to revert it back to old template, in case of any mistake during doing new changes in it.
Secondly, be careful during saving the template after change and never click on 'yes', if you are asked something like, "Are you sure that you want to delete widgets of your blog!" )

In Stretch Denim Light blog you can not add new widget beside or in the 'Header' part of your blog. It seems to be locked. You can unlock it by following these steps. (in the case of other kind of templates

1. Log in to your Blogger
2. Go in 'Layout'
3. Then click on 'Edit HTML'
4. Then check the box mentioning 'Expand Widget Templates'
5. Now Search this code:

6. Replace the blue code with this new red one:

Split 'Header' into 2 Columns - Denim

Split or Divide The 'Header' into 2 Parts/Chambers/Columns - Denim
Template

Please be careful about width and margin
(better if you keep margin: 0px, and border should be also be 0). It should be
sharp and balanced. Otherwise the template will be uneven.

Header Wrapper include Header (width, 945=945)

Header Wrapper= Header + r_Header (width, 945= 300+645)

1. Log in to Blogger account

2. GoLayouts and then click on 'Edit HTML'

3. Check the box by clicking mentionioning 'Expand Widget Templates'

4. Find the following 2 blue codes in the script
and then replace them with 2 red codes one by one.

5. Then replace following blue code in the script
with following red code one by one.

<div id='r_head'> <b:section class='header' id='header2' preferred='yes'/> </div>

</div>

6. After all having done, click on 'SAVE TEMPLATE' button.

Save Template

Wednesday, November 12, 2008

Make a Three Columns Rounder3

Friday, November 7, 2008

Remove 'Post Atoms' link from blogger/blogspot blog

Wednesday, November 5, 2008

How to make a 3 Column Denim Blog from 2 column

How to Unlock Header Wrapper for adding new widget in it!!

Split 'Header' into 2 Columns - Denim

Delete Counts or Numbers from front of Labels

Blog Archive

Save Template

Subscribe

Wednesday, November 12, 2008

Make a Three Columns Rounder3

Friday, November 7, 2008

Remove 'Post Atoms' link from blogger/blogspot blog

Wednesday, November 5, 2008

How to make a 3 Column Denim Blog from 2 column

How to Unlock Header Wrapper for adding new widget in it!!

Split 'Header' into 2 Columns - Denim

Delete Counts or Numbers from front of Labels

Blog Archive