Margaret: szeptember 2009

Installing the template in your NEW BLOG

>> 2009. szeptember 30., szerda

It's not too difficult...just follow these steps:

Download the template and save it in your computer (as xml file).

Go to your Layout > Template > Edit HTML page.

Choose the file from the Browse... button, and then click to the Upload button.

It may ask you to delete some widgets - so just delete them. (Widgets are the extra page element added to the sidebars).

Save it. You're done! View your new blog.

Download here

or

Download here
Next step: Save in your computer

Upload the template

and Save it.

View the blog. This is the original Joy template
Go to back the Layout > Template > Edit HTML page.
Click the Expand Widget Templates (EWT) button.

Now we will change some codes. Please
follow next 18 little steps.
The end of the procedure your new blog will be very professional and beautiful.

Click here to start.

Installing the template in your OLD BLOG

Before you start changing your template, make sure you save your old template file just in case you need to start again.

METHODS TO INSTALL BLOGGER TEMPLATES

Download the template and save it in your computer (as xml file).

Go to your Layout > Template > Edit HTML page.

Choose the file from the Browse... button, and then click to the Upload button.

It may ask you to delete some widgets - so just delete them. (Widgets are the extra page element added to the sidebars).

Save it. You're done! View your new blog.

Download here

or

Download here
Next step: Save in your computer

Upload the template

and Save it.

View the blog. This is the original Joy template
Go to back the Layout > Template > Edit HTML page.
Click the Expand Widget Templates (EWT) button.

Now we will change some codes. Please
follow next 18 little steps.
The end of the procedure your new blog will be very professional and beautiful.

Click here to start.

Margaret Blogger theme

Margaret page elements

Feliratkozás: Bejegyzések (Atom)

Step 1. Design

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.

Click the Expand Widget Templates (EWT) button then search for this section in your template code:

/*-------- Blogger Template design: Joy.................................Ourblogtemplates.com-------- */

Select it and paste it the new section.

Save the template and go to the next step.

Step 2. Variable definitions

Go to the Layout > Fonts and Colors Tab.
Click the name of the page element in the textbox (left side), and Edit Color Hex Code (right side):
Select, Copy and Paste or type manual the code, push enter and go to the next line etc…
Every page elements and codes are in this textbox what you must to change.
When you are ready click to Save Changes, View the blog and go to the next step.

Body Background Color    #d99566

Blog Background Color  #e8d4a7

Blog Border Color   #d99566

Header Background Color   #ebcca0

Header Border Color  #d99566

Blog Title Color  #ffffff

Blog Description Color  #660000

Save changes

Linkbar Background Color  #ebcca0

Linkbar Main Border Color  #d99566

Linkbar Border Color  #660000

Linkbar Text Color  #660000

Linkbar Hover Background Color  #ebcca0

Linkbar Hover Text Color  #d99566

Middlebar Background Color  #d99566

Save changes

Content Background Color  #ebcca0

Content Border Color   #d99566

Post Background Color  #ebcca0

Post Border Color  #d99566

Post Title Color  #940f04

Post Title Background Color   #ebcca0

Post Title Border Color  #d99566

Date Header Color   #940f04

Save changes

Text Color   #660000

Main Link Color   #6f3c1b

Main Hover Link Color  #ffffff

Main Visited Link Color   #a9501b

Blockquote Background Color   #ebcca0

Blockquote Border Color   #ebcca0

Blockquote Color   #d99566

Code Text Color   #d99566

Save changes

Photo Background Color   #d99566

Photo Border Color  #d99566

Postfooter Background Color   #d99566

Postfooter Border Color   #d99566

Postfooter Text Color  #940f04

Postfooter Link Color   #ffffff

Comment Tab Link Color  #ffffff

Feed Links Color   #940f04

Save changes

Main Sidebar Background Color   #ebcca0

Sidebar1 Background Color   #ebcca0

Sidebar2 Background Color   #ebcca0

Sidebar1 Border Color   #d99566

Sidebar2 Border Color   #d99566

Sidebar1 Header Background Color   #940f04

Sidebar2 Header Background Color   #940f04

Sidebar1 Header Border Color   #d99566

Sidebar2 Header Border Color   #d99566

Save changes

Sidebar1 Header Color   #ffffcc

Sidebar2 Header Color   #ffffcc

Sidebar1 Text Color   #940f04

Sidebar2 Text Color   #940f04

Sidebar1 Link Color   #a9501b

Sidebar2 Link Color   #a9501b

Sidebar1 Hover Link Color   #6f3c1b

Sidebar2 Hover Link Color   #6f3c1b

Save changes

Sidebar1 Visited Link Color   #804000

Sidebar2 Visited Link Color   #804000

Sidebar List Line Color   #940f04

Lowerbar Background Color  #ebcca0

Lowerbar Border Color   #d99566

Lowerbar Header Color   #a9501b

Lowerbar Header Background Color   #ebcca0

Lowerbar Header Border Color  #ebcca0

Save changes

Lowerbar Text Color   #a9501b

Lowerbar Link Color   #6f3c1b

Lowerbar Hover Link Color   #b47b10

Lowerbar Visited Link Color  #e1771e

Lowerbar List Line Color   #a9501b

Comment Background Color   #ebcca0

Comment Border Color   #ebcca0

Comment Header Color  #d99566

Save changes
 	Comment Author Background Color   #ebcca0

Comment Author Border Color  #ebcca0

Comment Author Color   #a9501b

Comment Timestamp Color   #e1771e

Comment Text Color   #a9501b

Footer Background Color   #d99566

Save changes

Footer Border Color   #d99566

Footer Header Color  #660000

Footer Text Color   #660000

Footer Link Color   #6f3c1b

Footer Hover Link Color   #940f04

Footer Visited Link Color   #a9501b

Save changes and view the blog.

Go to the next step.

Step 3. Global

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the Expand Widget Templates (EWT) button then
search for this section in your template code:

/* ----- GLOBAL ----- Blogger template design by Ourblogtemplates.com ……………............../* visibility: hidden; */ /* display: none; */ }

Select it and paste it the new section. Save the template and go to the next step.

/* -----   GLOBAL   ----- Blogger template design by Ourblogtemplates.com */
/* -----   GLOBAL   ----- Blogger theme design by klara-web.blogspot.com */

* {margin:0; padding:0;}

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
background: $bodybgColor url(http://i569.photobucket.com/albums/ss137/klaragergencsik/margaret/stripgross.jpg) repeat;

background-attachment: fixed;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}

#outer-wrapper {
margin: 0 auto;   /* auto - to make the template lay in the screen center */
padding: 0px 0px 0px 0px;
margin-top: 25px;
margin-bottom: 20px;
position: relative;
width: 100%;
text-align: center;
}

#blog-wrapper {
margin: 0 auto;   /* auto - to make the template lay in the screen center */
padding: 20px;
margin-top: 20px;
margin-bottom: 10px;
text-align: center;
position: relative;
width: 930px;
background: $blogframeColor;
background: url(http://static1.grsites.com/user/folders/klaraweb67/t2895214-1/texture5314773.jpg) repeat;

border: 1px solid $blogBorderColor;
}

#spacer {clear: both; margin: 0; padding: 0;}

/* global link attributes */
a {color: $mainLinkColor; text-decoration: underline;}
a:hover {color: $mainHoverLinkColor; text-decoration: underline;}
a:visited {color: $mainVisitedLinkColor; text-decoration: underline;}

/* Blogger Navigation Bar */
#Navbar1 {
margin: 0;
padding: 0;
/* visibility: hidden; */
/* display: none; */
}

Step 4. Top Ads

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- TOP ADS ----- Blogger template design by...............................#topads .widget {margin: 0; padding: 5px 0;}

Select it and paste it the new section. Save the template and go to the next step.

Step 5. Header

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- HEADER ----- Blogger template design by....................padding: 0px 0px 0px 0px; border: 0; }

Select it and paste it the new section. Save the template and go to the next step.

/* -----   HEADER   ----- Blogger template design by Ourblogtemplates.com */
/* -----   HEADER   ----- Blogger theme design by klara-web.blogspot.com */

#header-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 930px;
text-align: center;
background: $headerbgColor;
background:  url(http://i569.photobucket.com/albums/ss137/klaragergencsik/margaret/stripgross.jpg) repeat;

border: 1px solid $headerBorderColor;
}

#header {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
}

#header h1 {
color: $blogTitleColor;
font: $blogTitleFont;
text-align: left;
text-transform: uppercase;
margin: 0px 0px 0px 0px;
padding: 20px 20px 0px 20px;
}

#header h1 a {
text-decoration: none;
color: $blogTitleColor;
}

#header h1 a:hover {
text-decoration: underline;
color: $blogDescriptionColor;
}

#header .description {
color: $blogDescriptionColor;
font: $blogDescriptionFont;
text-align: left;
margin: 0px 0px 0px 0px;
padding: 2px 20px 17px 20px;
}

#header h1 p, #header .description p {margin:0;padding:0}

#header a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0;
}

Step 6. Linkbar

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- LINKBAR ----- Blogger template design by........................background: $linkbarHoverBgColor; }

Select it and paste it the new section. Save the template and go to the next step.

/* -----   LINKBAR   ----- Blogger template design by Ourblogtemplates.com */
/* -----   LINKBAR   ----- Blogger theme design by klara-web.blogspot.com */

#linkbar-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 930px;
position: relative;
background: $linkbarbgColor;

background:  url(http://i569.photobucket.com/albums/ss137/klaragergencsik/margaret/hintergrundframe.jpg) repeat;

border-bottom: 5px solid $linkbarmainBorderColor;
}

#linkbar .widget {
margin: 0px 0px 0px 0px;
padding: 6px 5px 5px 5px;
}

#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
list-style-type:none;
border-right: 0px solid $linkbarBorderColor;
}

#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}

#linkbar a {
clear: both;
margin: 0px -4px 0px 0px;
padding: 9px 20px 6px 20px;
width:100%;
text-decoration:none;
font: $linkbarTextFont;
color: $linkbarTextColor;
/* text-transform: uppercase; */
border-right: 1px solid $linkbarBorderColor;
border-left: 0px solid $linkbarBorderColor;
}

#linkbar a:hover {
color: $linkbarHoverTextColor;
background: $linkbarHoverBgColor;
}

Step 7. Middle Ads

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- MIDDLE ADS ----- Blogger template design by.........................background: $middlebarbgColor; }

Select it and paste it the new section. Save the template and go to the next step.

Step 8. Main

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- MAIN ----- Blogger template design by .....................border: 1px solid $imageBorderColor; }

Select it and paste it the new section. Save the template and go to the next step.

/* -----   MAIN   ----- Blogger template design by Ourblogtemplates.com */
/* -----   MAIN   ----- Blogger theme design by klara-web.blogspot.com */

#content-wrapper {
width: 930px;
margin: 0px 0px 0px 0px;
padding: 15px 0px 0px 0px;
position: relative;
text-align: left;
/* background: $contentbgColor; */
border: 0px solid $contentBorderColor;
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 */
}

#subcontent-wrapper {
float: left;
position: relative;
width: 555px;
margin: 0px 0px 15px 0px;
padding: 0px 0px 0px 0px;
background: $postbgColor;
background:  url(http://i569.photobucket.com/albums/ss137/klaragergencsik/margaret/hintergrundframe.jpg) repeat;
border: 1px solid $contentBorderColor;
}

#main-wrapper {
float: left;
position: relative;
max-width: 415px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: justify;
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 {
width: 415px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: justify;
color: $textColor;
font: $textFont;
}

#main .widget {
margin: 0px 0px 7px 0px;
padding: 15px 5px 15px 10px;
background: $postbgColor;
background:  url(http://i569.photobucket.com/albums/ss137/klaragergencsik/margaret/hintergrundframe.jpg) repeat;
 /* url(http://farm4.static.flickr.com/3135/2746541297_c4c9e6dae2_o.jpg) repeat-y top left; */
border: 0px solid $postBorderColor;
}

.post {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 1.6em;
text-align: justify;
}

.post h3 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 1px 0px;
color: $postTitleColor;
font: $postTitleFont;
text-decoration: none;
text-align: left;
line-height: 1.6em;
/* text-transform: uppercase;
background: $posttitlebgColor;
border-top: 1px solid $posttitleBorderColor;
border-bottom: 2px solid $posttitleBorderColor; */
}

.post h3 a, .post h3 a:visited {
color: $postTitleColor;
text-decoration: none;
}
.post h3 a:hover {
color: $textColor;
text-decoration: underline;
}

.post-header-line-1 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 17px 0px;
}

h2.date-header {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
color: $dateHeaderColor;
font: $dateHeaderFont;
text-decoration: none;
text-transform: uppercase;
}

.date-header span {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-body p {
/* Fix bug in IE5/Win with italics in posts */
margin: 0px 0px 0px 0px;
padding: 1px 0px 1px 0px;
display: inline; /* to fix floating-ads wrapping problem in IE */
height: 1%;
overflow: visible;
}

.post-body p a, .post-body p a:visited {
color: $mainLinkColor;
text-decoration: underline;
}

.post-body a:hover {
text-decoration: underline;
color: $mainHoverLinkColor;
}

.post ul {
margin: 0px 0px 0px 0px;
padding: 12px 0px 12px 30px;
list-style-type: disc;
line-height: 1.6em;
font-size: 95%;
}

.post ol {
margin: 0px 0px 0px 0px;
padding: 12px 0px 12px 30px;
line-height: 1.6em;
font-size: 95%;
}

.post li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 8px 0px;
}

a img {
margin: 5px 5px 5px 5px;
padding: 0px 0px 0px 0px;
}

.post img {
margin: 5px;
padding: 5px;
background: $imagebgColor;
background:  url(http://i569.photobucket.com/albums/ss137/klaragergencsik/margaret/stripgross.jpg) repeat;
border: 1px solid $imageBorderColor;
}

Step 9. Post Footer

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- POST-FOOTER ----- Blogger template design by......................feed-links a:hover {color: $mainHoverLinkColor}

Select it and paste it the new section. Save the template and go to the next step.

/* -----   POST-FOOTER   ----- Blogger template design by Ourblogtemplates.com */
/* -----   POST-FOOTER  ----- Blogger theme design by klara-web.blogspot.com */

.post-footer {
display: block;
margin: 15px 0px 25px 0px;
padding: 4px 0px 5px 0px;
text-align: left;
font: $postfooterTextFont;
color: $postfooterTextColor;
font-weight: normal;
line-height: 1.6em; 
text-decoration: none;

background:  url(http://i569.photobucket.com/albums/ss137/klaragergencsik/margaret/stripgross.jpg) repeat;

/* background: $postfooterBgColor; */
border-top: 1px dashed $postfooterBorderColor;
}

.post-footer-line {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-footer-line-1, .post-footer-line-2, .post-footer-line-3 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-footer a {
color: $postfooterLinkColor;
text-decoration: none;
}

.post-footer a:hover {
color: $mainHoverLinkColor;
text-decoration: underline;
}

.post-footer .post-comment-link a {
margin: 0px 0px 0px 7px;
padding: 0px 0px 0px 9px;
border-left: 1px solid $postfooterTextColor;
color: $commentTabLinkColor;
font-weight: normal;
text-decoration: none;
}

.post-footer .post-comment-link a:hover {
color: $mainHoverLinkColor;
text-decoration: underline;
}

.post-footer .post-icons {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-footer img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 0px;
background: $postfooterBgColor;
}

#blog-pager {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
font: $postfooterTextFont;
color: $feedlinksColor;
}

#blog-pager a {color: $feedlinksColor}
#blog-pager a:hover {color: $mainHoverLinkColor}

#blog-pager-newer-link {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#blog-pager-older-link {
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.feed-links {
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
clear: both;
text-align: left;
font: $postfooterTextFont;
color: $feedlinksColor;
}

.feed-links a, .feed-links a:visited {color: $feedlinksColor}
.feed-links a:hover {color: $mainHoverLinkColor}

Step 10. Blockquote

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- BLOCKQUOTE ----- */ blockquote { ..............border: 2px solid $blockquoteBorderColor; }

Select it and paste it the new section. Save the template and go to the next step.

Step 11. Sidebar

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- SIDEBAR ----- Blogger template design by...............sidebar a img { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }

Select it and paste it the new section. Save the template and go to the next step.

/* -----   SIDEBAR   ----- Blogger template design by Ourblogtemplates.com */
/* -----   SIDEBAR   ----- Blogger theme design by klara-web.blogspot.com */

#side-wrapper1 {
max-width: 140px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: $postbgColor;
background: url(http://i569.photobucket.com/albums/ss137/klaragergencsik/margaret/hintergrundframe.jpg) repeat;
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 */
}

#side-wrapper2 {
max-width: 373px;
float: right;
margin: 0px 0px 15px 0px;
padding: 0px 0px 0px 0px;
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 {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
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 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
font: $sidebarTextFont;
}

#sidebar1 {
width: 120px;
margin: 0px 0px 0px 0px;
padding: 15px 10px 0px 10px;
color: $sidebar1TextColor;
line-height: 1.6em;
}

#sidebar2 {
width: 358px;
margin: 0px 0px 0px 15px;
padding: 0px 0px 0px 0px;
color: $sidebar2TextColor;
line-height: 1.6em;
}

#sidebar1 .widget {
margin: 0px 0px 0px 0px;
padding: 0px 0px 20px 0px;
border: 0px solid $sidebar1BorderColor;
}

#sidebar2 .widget {
margin: 0px 0px 15px 0px;
padding: 10px 10px 10px 10px;
background: $sidebar2bgColor;
background: url(http://i569.photobucket.com/albums/ss137/klaragergencsik/margaret/hintergrundframe.jpg) repeat;
border: 1px solid $sidebar2BorderColor;
}

/* sidebar heading ----- Blogger template design by Ourblogtemplates.com */

#sidebar1 h2 {
margin: 0px 0px 2px 0px;
padding: 0px 0px 2px 0px;
text-align: left;
color: $sidebar1HeaderColor;
font: $sidebarHeaderFont;
text-transform: uppercase;
text-decoration: underline;
background:  url(http://i569.photobucket.com/albums/ss137/klaragergencsik/margaret/stripgross.jpg) repeat;
/* background: $sidebar1HeaderBgColor;
border-top: 0px solid $sidebar1HeaderBorderColor;
border-bottom: 1px solid $sidebar1HeaderBorderColor; */
}

#sidebar2 h2 {
margin: 0px 0px 2px 0px;
padding: 0px 0px 2px 0px;
text-align: left;
color: $sidebar2HeaderColor;
font: $sidebarHeaderFont;
text-transform: uppercase;
text-decoration: underline;
background:  url(http://i569.photobucket.com/albums/ss137/klaragergencsik/margaret/stripgross.jpg) repeat;
/* background: $sidebar2HeaderBgColor;
border-top: 0px solid $sidebar2HeaderBorderColor;
border-bottom: 1px solid $sidebar2HeaderBorderColor; */
}

.sidebar ul, #BlogArchive1 ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}

.sidebar li, #BlogArchive1 li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
/* border-bottom: 1px solid $sidebarListLineColor; */
}

#sidebar1 a {
color: $sidebar1LinkColor;
text-decoration: none;
}

#sidebar1 a:hover {
text-decoration: underline;
color: $sidebar1HoverLinkColor;
}

#sidebar1 a:visited {
text-decoration: none;
color: $sidebar1VisitedLinkColor;
}

#sidebar2 a {
color: $sidebar2LinkColor;
text-decoration: none;
}

#sidebar2 a:hover {
text-decoration: underline;
color: $sidebar2HoverLinkColor;
}

#sidebar2 a:visited {
text-decoration: none;
color: $sidebar2VisitedLinkColor;
}

.sidebar a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

Step 12. Comment

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- COMMENT ----- Blogger template design by................../* respecified, for ie5/mac's benefit */ padding-left: 0px; }

Select it and paste it the new section. Save the template and go to the next step.

/* -----   COMMENT   ----- Blogger template design by Ourblogtemplates.com */
/* -----   COMMENT  ----- Blogger theme design by klara-web.blogspot.com */

#comments {
margin: 0px 0px 0px 0px;
padding: 0px 15px 20px 15px;
text-align: left;
color: $commentTextColor;
font: $commentTextFont;
background: $commentbgColor;
background:  url(http://i569.photobucket.com/albums/ss137/klaragergencsik/margaret/hintergrundframe.jpg) repeat;
border: 1px solid $commentBorderColor;
}

/* comment-header */
#comments h4 {
margin: 20px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $commentTitleColor;
font: $commentTitleFont;
}

.deleted-comment {
font-style:italic;
color:gray;
margin: 3px 0px 3px 0px;
}

.comment-author {
display: block;
margin: 10px 0px 0px 0px;
padding: 8px 10px 3px 0px;
color: $commentauthorColor;
background:  url(http://i569.photobucket.com/albums/ss137/klaragergencsik/margaret/hintergrundframe.jpg) repeat;
/* background: $commentAuthorBgColor; */
border-top: 1px solid  $commentboxBorderColor;
border-bottom: 0px dotted $commentboxBorderColor;
font-weight: normal;
}

.comment-author a {color: $commentauthorColor; text-decoration: none;}
.comment-author a:hover {color: $commentTimeStampColor; text-decoration: underline;}
.comment-author a:visited {color: $commentauthorColor; text-decoration: none;}
.comment-body {margin: 0; padding: 5px 0px 5px 40px;}
.comment-body p {margin: 0; padding: 0; line-height: 1.7em;}
.comment-footer, .comment-footer a {margin: 0px 0px 0px 0px; padding: 4px 0px 0px 0px;}

.comment-timestamp {
margin: 0px 0px 0px 4px;
padding: 0px 0px 7px 4px;
color: $commentTimeStampColor;
text-decoration: none;
font-weight: normal;
font-style: italic;
font-size: 96%;
}

.comment-timestamp a {
color: $commentTimeStampColor;
text-decoration: none;
}

.comment-timestamp a:hover {color: $commentauthorColor; text-decoration: underline;}

#comments ul {margin: 0; padding: 0; list-style-type: none;}
#comments li {margin: 0; padding: 0;}

a.comment-link {
/* ie5.0/win doesn't apply padding to inline elements,
so we hide these two declarations from it */
padding: 0px 0px 0px 0px;
}

html>body a.comment-link {
/* respecified, for ie5/mac's benefit */
padding-left: 0px;
}

Step 13. Lower Section

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- LOWER SECTION ----- Blogger template design by.................color: $lowerbarVisitedLinkColor;}

Select it and paste it the new section. Save the template and go to the next step.

/* -----   LOWER SECTION   ----- Blogger template design by Ourblogtemplates.com */
/* -----   LOWER SECTION   ----- Blogger theme design by klara-web.blogspot.com */

#lower-wrapper {
margin: 15px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 930px;
font: $sidebarTextFont;
color: $lowerbarTextColor;
background: $lowerbarbgColor;
background:  url(http://i569.photobucket.com/albums/ss137/klaragergencsik/margaret/hintergrundframe.jpg) repeat;
border-top: 5px solid $lowerbarBorderColor;
border-bottom: 5px solid $lowerbarBorderColor;
}

#lowerbar-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 15px 0px 25px 0px;
width: 33%;
text-align: left;
line-height: 1.8em;
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 */
}

#lowerads-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
text-align: center;
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 */
}

.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 15px 20px 25px 34px;}
.lowerads {margin: 0; padding: 0;}
.lowerads .widget {margin: 0; padding: 10px 0px 10px 0px;}

.lowerbar h2 {
margin: 0px 0px 2px 0px;
padding: 10px 0px 2px 0px;
color: $lowerbarHeaderColor;
font: $sidebarHeaderFont;
text-align: left;
text-transform: uppercase;
text-decoration: underline;
/* background: $lowerbarTitleBgColor;
border-bottom: 1px solid $lowerbarTitleBorderColor; */
}

.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}

.lowerbar li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
/* border-bottom: 1px solid $lowerbarListLineColor; */
}

.lowerbar a {color: $lowerbarLinkColor; text-decoration: none;}
.lowerbar a:hover {text-decoration: underline; color: $lowerbarHoverLinkColor;}
.lowerbar a:visited {text-decoration: none; color: $lowerbarVisitedLinkColor;}

Step14. Footer

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- FOOTER ----- Blogger template design by..................color: $footerVisitedLinkColor; text-decoration: none; }

Select it and paste it the new section. Save the template and go to the next step.

/* -----   FOOTER   ----- Blogger template design by Ourblogtemplates.com */
/* -----   FOOTER   ----- Blogger theme design by klara-web.blogspot.com */

#footer-wrapper {
clear: both;
display: inline; /* handles IE margin bug */
float: left;
width: 930px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: $footerbgColor;
background:  url(http://i569.photobucket.com/albums/ss137/klaragergencsik/margaret/stripgross.jpg) repeat;
border-top: 1px solid $footerBorderColor;
}

#footer {
margin: 0px 0px 0px 0px;
padding: 15px 0px 0px 0px;
text-align: center;
color: $footerTextColor;
font: $footerTextFont;
line-height: 1.6em;
}

#footer h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 2px 0px;
color: $footerHeaderColor;
font: $footerHeaderFont;
}

#footer .widget {
margin: 0px 0px 0px 0px;
padding: 0px 10px 15px 10px;
}

.footer p {margin: 0; padding: 0}

.footer a {
color: $footerLinkColor;
text-decoration: none;
}

.footer a:hover {
color: $footerHoverLinkColor;
text-decoration: underline;
}

.footer a:visited {
color: $footerVisitedLinkColor;
text-decoration: none;
}

Step 15. Credit

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

/* ----- CREDIT ----- */.................color: $postbgColor; text-decoration: underline; }

Select it and paste it the new section. Save the template and go to the next step.

/* -----   CREDIT   ----- */

#credit {
margin: 0px 0px 0px 0px;
padding: 2px 0px 0px 0px;
width: 100%;
height: 26px;
clear: both;
font-family: verdana, helvetica;
font-size: 70%;
color: #670202; 
font-weight: normal;
background: $textColor; 
background:  url(http://i569.photobucket.com/albums/ss137/klaragergencsik/margaret/stripgross.jpg) repeat;
}

#creditleft {
margin: 0px 0px 0px 0px;
padding: 7px 0px 0px 0px;
height: 26px;
position: relative;
float: left;
text-align: left;
display: inline;
width: 81%;
background: $textColor; 
background:  url(http://i569.photobucket.com/albums/ss137/klaragergencsik/margaret/stripgross.jpg) repeat;
}

#creditright {
margin: -33px 0px 0px 0px;
padding: 7px 0px 0px 0px;
height: 26px;
position: relative;
float: right;
text-align:right;
display: inline;
width: 20%;
background: $textColor; 
background:  url(http://i569.photobucket.com/albums/ss137/klaragergencsik/margaret/stripgross.jpg) repeat;
}

#creditleft p {
margin: 0;
padding: 0
}

#creditright p {
margin: 0;
padding: 0
}

#creditleft a, .creditleft a:hover, .creditleft a:visited {
color: #670202; 
text-decoration: underline;
}

#creditright a, .creditright a:hover, .creditright a:visited {
color: #670202; 
text-decoration: underline;
}

Step 17. Page Structure: Credit

Select all and copy this section in the textbox. Go to your Layout > Template > Edit HTML page.
Listen to the EWT button then
search for this section in your template code:

< div id='creditleft' >..........Ourblogtemplates.com< /a > 2008< /b >< /p > < /div >

Select it and paste it the new section. Save the template and go to the next step.