Midnightblue

Installing the template in your NEW BLOG

>> Sunday, September 27, 2009

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

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.

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.

>> Saturday, September 26, 2009

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 value= " #6c82b5 "
 	
 	Header Background Color value= " #32527a "
 	
 	Blog Description Color value= " #ccdbff "
 	
 	Linkbar Main Border Color value= " #ccdbff "

Linkbar Border Color value= " #ccdbff "

Linkbar Text Color value= " #ccdbff "

Save changes.

Linkbar Hover Background Color value= " #003366 "
 	
 	Content Background Color value= " #ccdbff "

Content Border Color value= " #ccdbff "

Post Background Color value= " #ccdbff "
 	
 	Date Header Color value= " #6c82b5 "

Text Color value= " #32527a "

Save changes.

Main Link Color value= " #979a9a "
 	
 	Main Visited Link Color value= " #6c82b5 "
 
 	Blockquote Border Color value= " #ccdbff "

Blockquote Color value= " #ccdbff "

Code Text Color value= " #6c82b5 "

Photo Background Color value= " #32527a "

Photo Border Color value= " #ffffff "

Save changes.

Postfooter Background Color value= " #ccdbff "

Postfooter Border Color value= " #ccdbff "
 	
 	Feed Links Color value= " #6c82b5 "

Main Sidebar Background Color value= " #6c82b5 "

Sidebar1 Background Color value= " #6c82b5 "

Sidebar2 Background Color value= " #6c82b5 "

Save changes.

Sidebar1 Border Color value= " #ccdbff "

Sidebar2 Border Color value= " #ccdbff "
 	
 	Sidebar1 Header Border Color value= " #ccdbff "

Sidebar2 Header Border Color value= " #ccdbff "

Sidebar1 Header Color value= " #ccdbff "

Sidebar2 Header Color value= " #ccdbff "

Save Changes.

Sidebar1 Text Color" value= " #eaefef "

Sidebar2 Text Color value= " #eaefef "

Sidebar1 Link Color value= " #ccdbff "

Sidebar2 Link Color value= " #ffffff "

Sidebar1 Hover Link Color value= " #eaefef "

Sidebar2 Hover Link Color value= " #eaefef "

Save changes.

Sidebar1 Visited Link Color value= " #ffffff "

Sidebar2 Visited Link Color value= " #ffffff "
 
 	Lowerbar Background Color value= " #32527a "

Lowerbar Border Color value= " #ccdbff "

Lowerbar Header Color value= " #ccdbff "

Lowerbar Header Background Color value= " #6c82b5 "

Save Changes.

Lowerbar Header Border Color value= " #ccdbff "

Lowerbar Text Color value= " #ffffff "

Lowerbar Link Color value= " #ccdbff "

Lowerbar Hover Link Color value= " #ffffff "

Lowerbar Visited Link Color value= " #ccdbff "

Lowerbar List Line Color value= " #ffffff "

Save changes.

Comment Background Color value= " #eaefef "

Comment Border Color value= " #eaefef "
 
 	Comment Author Background Color value= " #eaefef "

Comment Author Border Color value= " #ccdbff "

Comment Author Color value= " #6c82b5 "
 	
 	Footer Background Color value= " #6c82b5 "

Save Changes.

Footer Border Color value= " #6c82b5 "

Footer Header Color value= " #eaefef "

Footer Text Color value= " #eaefef "

Footer Link Color value= " #ccdbff "

Footer Hover Link Color value= " #ffffff "

Footer Visited Link Color value= " #ffffff "

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://static1.grsites.com/user/folders/klaraweb67/t61514-1/lostinthoughtbg.jpg) repeat top right;
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/t61517-1/lostinthoughtbg4.jpg) repeat top right;
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://static1.grsites.com/user/folders/klaraweb67/t61515-1/lostinthoughtbg2.jpg) repeat top right;
border: 0px 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://static1.grsites.com/user/folders/klaraweb67/t61515-1/lostinthoughtbg2.jpg) repeat top right;
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://static1.grsites.com/user/folders/klaraweb67/t957-1/lblue047.gif) repeat top right;
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://static1.grsites.com/user/folders/klaraweb67/t957-1/lblue047.gif) repeat; 
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;
background:  url(http://static1.grsites.com/user/folders/klaraweb67/t61515-1/lostinthoughtbg2.jpg) repeat top right;
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;
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: $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://static1.grsites.com/user/folders/klaraweb67/t61515-1/lostinthoughtbg2.jpg) repeat top right;
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://static1.grsites.com/user/folders/klaraweb67/t61515-1/lostinthoughtbg2.jpg) repeat top right;
border: 1px solid $sidebar2BorderColor;
}

/* sidebar heading ----- Blogger template design by Ourblogtemplates.com */
/* sidebar heading ----- Blogger theme design by klara-web.blogspot.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: $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: $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;
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: $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;
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;}

Step 14. 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://static1.grsites.com/user/folders/klaraweb67/t61515-1/lostinthoughtbg2.jpg) repeat top right;
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.

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.