In Nature

Blogger Layouts / Classic

Designer's Comments

Look carefully for specific instructions

Made with love and care :)

Using This Layout

For specific instructions read designer's comments

1. Log into blogger.com
2. Click on Template
3. Copy (ctrl c) and paste (ctrl v) code to EDIT HTML

Layout Code

Copy and paste to Template

Help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><$BlogMetaData$>

body {
	margin:0;
	padding:10px 0 14px;
	font:11px Verdana,Sans-serif;
	text-align:center;
	color:#CCCCCC;
	background-image:url("http://layouts.cbimg6.com/23/11411c.gif");
	background-position:top;
	background-repeat:repeat-x;
	font-size/* */:/**/small;
	font-size: /**/small;
	background-color:#363533;
}

/* Page Structure
----------------------------------------------- */
#wrap {
	position:relative;
	top:4px;
	left:4px;
	width:725px;
	margin:0 auto;
	text-align:left;
  }
#wrap2 {
	position:relative;
	top:-4px;
	left:-4px;
	padding:0 3px 0 3px;
	margin: 0;
  }
#content {
  background:url("http://layouts.cbimg6.com/23/11411d.gif") repeat-y left top;
  width:100%;
  font-size:85%;
  }
#main {
	width:460px;
	float:left;
  }
#main2 {
  margin:0;
  padding:15px 20px;
  }
#sidebar {
	width:254px;
	float:right;
	padding:0;
  }
#sidebar2 {
  margin:0;
  padding:2px 20px 9px;
  }

/* Links
----------------------------------------------- */
a:link {
  color:#FF6600;
  text-decoration:none;
  }
a:visited {
  color:#FF542E;
  text-decoration:none;
  }
a:hover {
  color:#000;
  background-color:#FF6600;
  text-decoration: none;
  }
a img {
  border-width:0;
  }
#sidebar a:link {
  color:#99CC00;
  text-decoration: none;
  }
#sidebar a:visited {
  color:#999;
  text-decoration: none;
  }
#sidebar a:hover {
  color:#2F343E;
  background-color:#99CC00;
  text-decoration: none;
}

/* Header
----------------------------------------------- */
#header {
  background:url("http://layouts.cbimg6.com/23/11411e.jpg") no-repeat left top;
  padding:0 0 0 0px;
  margin:0;
  color:#fff;
  width:auto;
  width/* */:/**/auto;
  width:auto;
  height: 214px;
  }
#blog-title {
	margin:0;
	padding:60px 45px 0;
	font-size:24px;
	color:#0099FF;
	font-weight:lighter;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
 }
#blog-title a {
  color:#fff;
  text-decoration:none;
  }
.postpage #blog-title {
  padding-top:0;
  background-position:0 -40px;
  }

/* Description
----------------------------------------------- */
#description {
  background:#f90 url("http://layouts.cbimg6.com/23/11411f.gif") no-repeat left top;
  margin:0 0 10px;
  padding:12px 0 0;
  color:#fff;
  }
#description p {
  background:url("http://layouts.cbimg6.com/23/11411g.gif") no-repeat left bottom;
  margin:0;
  padding:0 0 12px;
  }
#description em {
  /* To remove the word next to the desription, delete the following background property */
  background:url("http://layouts.cbimg6.com/23/11411h.gif") no-repeat left center;
  /* Keep everything below */
  display:block;
  padding:0 0 0 140px;
  font:bold 75%/1.6em Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:0.1em;
  min-height:12px;
  }
.postpage #description em {
  font-size:1px;
  line-height:1px;
  color:#8df;
  visibility:hidden;
  }

/* Posts
----------------------------------------------- */
.date-header {
  margin:0 0 .5em;
  font:115%/1.4em "Trebuchet Ms",Verdana,Arial,Sans-serif;
  text-transform:lowercase;
  color:#AACD65;
  }
.post {
  margin:0 0 2em;
line-height: 17px;
text-align: justify;
  }
.post-title {
  margin:0 0 .25em;
  font:150%/1.4em "Trebuchet Ms",Helvetica,Arial,Verdana,Sans-serif;
  color:#D0EAFF;
  }
#main .post-title a {
  text-decoration:none;
  color:#D0EAFF;
  }
#main .post-title a:hover {
  color:#0A99F5;
  }
.post p {
  margin:0 0 .75em;
  line-height: 20px;
  text-align: justify;
  }
.post-footer {
  color:#ab9;
  text-transform:lowercase;
  }
.post-footer em {
  font-style:normal;
  color:#ab9;
  }
.post blockquote {
  margin:1em 20px;
  padding:5px 0;
  border:1px dashed #ab9;
  border-width:1px 0;
  }
.post blockquote p {
  margin:.5em 0;
  }
.post img {
  border:5px solid #3E3939;
  }

/* Comments
----------------------------------------------- */
#comments {
  margin:2em 0 0;
  border-top:2px solid #dec;
  padding-top:1em;
  }
#comments h4 {
  margin:0 0 .25em;
  font:bold 150%/1.4em Helvetica,Arial,Verdana,Sans-serif;
  text-transform:lowercase;
  color:#D0EAFF;
  }
#comments-block {
  margin:0;
  line-height:1.6em;
  }
.comment-poster {
  margin:0 0 .25em;
  font:bold 112%/1.4em Arial,Verdana,Sans-serif;
  text-transform:lowercase;
  }
.comment-body, .comment-body p {
  margin:0 0 .75em;
  }
p.comment-timestamp {
  margin:-.25em 0 2em;
  }
.deleted-comment {
  font-style:italic;
  color:gray;
  }

/* Sidebar
----------------------------------------------- */
.sidebar-title {
  margin:1em 0 .25em;
  font:bold 125%/1.4em "Trebuchet MS",Helvetica,Arial,Verdana,Sans-serif;
  color:#D0EAFF;
  text-transform:uppercase;
  background-image:url("http://layouts.cbimg6.com/23/11411i.gif");
  background-repeat:no-repeat;
  background-position:left 50%;
  padding-left:20px;
  
}
#sidebar ul {
  margin:0 0 1.5em;
  padding:0;
  list-style:none;
  }
#sidebar li {
  margin:0;
  padding:0 0 .25em 20px;
  text-indent:-20px;
  line-height:1.4em;
  }
#sidebar p {
  margin:0 0 .75em;
  line-height:1.4em;
  }

/* Profile
----------------------------------------------- */
#profile-container {
  margin:0 0 1.75em;
  }
.profile-datablock, .profile-textblock {
  margin:0 0 .75em;
  line-height:1.4em;
  }
.profile-img {
  display:inline;
  }
.profile-img img {
  float:left;
  margin:0 10px 5px 0;
  }
.profile-data {
  font-weight:bold;
  color:#fff;
  }
.profile-data strong {
  display:none;
  }

/* Footer
----------------------------------------------- */
#footer {
  clear:both;
  padding:10px 0 0;
  }
#footer hr {
  display:none;
  }
#footer p {
	margin:0;
	padding:5px 0;
	text-align: center;
  }

/* Misc
----------------------------------------------- */
.clear {
  clear:both;
  display:block;
  height:1px;
  margin:0;
  padding:0;
  font-size:1px;
  line-height:1px;
  }
  </style>

</head>

<body>

<div id="header">
  <div id="blog-title">Suga's Sample Blog</div> 
</div>

<div id="content">

<div id="main"><div id="main2">

<BlogDateHeader>
  <h2 class="date-header"><$BlogDateHeaderDate$></h2>
  </BlogDateHeader>
  
     
  
  <div class="post"><a name="<$BlogItemNumber$>"></a>
     
    <BlogItemTitle>
    <h3 class="post-title">
	 <BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>

<$BlogItemTitle$>
	 <BlogItemUrl></a></BlogItemUrl>
    </h3>
    </BlogItemTitle>
     
    <div class="post-body">
    <p>
      <$BlogItemBody$>
    </p>
    </div>
    
    <p class="post-footer">

<em>posted by <$BlogItemAuthorNickname$> at <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>
      <MainOrArchivePage><BlogItemCommentsEnabled> |
         <a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a>
      </BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links">links to this post</a>
</BlogItemBacklinksEnabled>
</MainOrArchivePage> <$BlogItemControl$>
    </p>
  
  </div>

<ItemPage>
  <div id="comments">

<BlogItemCommentsEnabled><a name="comments"></a>
    
    <h4><$BlogItemCommentCount$> Comments:</h4>
    
    <dl id="comments-block">

<dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
        <$BlogCommentAuthor$> said...
      </dt>
      <dd class="comment-body">
        <p><$BlogCommentBody$></p>
        <p class="comment-timestamp"><a href="#c<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a></p>
        <$BlogCommentDeleteIcon$>
      </dd>
      </BlogItemComments>

</dl>
    
    <p class="comment-timestamp">
    <$BlogItemCreate$>
    </p>
    </BlogItemCommentsEnabled>	    
    <BlogItemBacklinksEnabled>
    <a name="links"></a><h4>Links to this post:</h4>
    <dl id="comments-block">
    <BlogItemBacklinks>
        <dt class="comment-title">
        <$BlogBacklinkControl$>
        <a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
        </dt>
        <dd class="comment-body"><$BlogBacklinkSnippet$>
        <br />
        <span class="comment-poster">
        <em>posted by <$BlogBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
        </span>
        </dd>
    </BlogItemBacklinks>
    </dl>
    <p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
    </BlogItemBacklinksEnabled>

</div>

</ItemPage>

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

<div id="sidebar"><div id="sidebar2">

<$BlogMemberProfile$>

</MainOrArchivePage>
  
<h2 class="sidebar-title">Previous Posts</h2>
  
  <ul id="recently">
    <BloggerPreviousItems>
        <li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
     </BloggerPreviousItems>
  </ul>
  
  <MainOrArchivePage>

<h2 class="sidebar-title">Archives</h2>
  
  <ul class="archive-list">
    <BloggerArchives>
    	<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
	  </BloggerArchives>
  </ul>
  </MainOrArchivePage>
 
  
  <h2 class="sidebar-title">Blogroll</h2>
  	<ul>
   		<li><a href="http://d-y-p.blogspot.com">Don't Panic</a></li>
   		<li><a href="http://ishmeet.wordpress.com/">Ish</a></li>
   		<li><a href="http://suga.wordpress.com/">Suga Suga</a></li>
		<li><a href="http://slimspeare.blogspot.com/">Slim's empty blog.</a></li>
  	</ul>
  <h2 class="sidebar-title">My Wishlist</h2>
	<ul>
    	<li><a href="http://www.amazon.com/gp/product/1590593812/ref=pd_cpt_gw_3/102-9893413-1311316?%5Fencoding=UTF8&v=glance&n=283155">Web Standards Solutions</a></li>
   		<li><a href="http://www.amazon.com/gp/product/1590596145/102-9893413-1311316?SubscriptionId=1B0QAVJ13VNN726ST8R2&n=283155">CSS Mastery</a></li>
   		<li><a href="http://www.style.com/slideshows/standalone/shopping/guide/spring06/021106/12m.jpg" target=_blank>Multicolor bolero :)</a></li>
	</ul>
  <h2 class="sidebar-title">Links</h2>
    <ul>
    	<li><a href="http://suga.wordpress.com">Sugalicious</a></li>
		<li><a href="http://singingfish.com/">Singing Fish</a></li>
    	<li><a href="http://www.yetisports.com">Yeti Sports</a></li>
        <li><a href="http://flatlick.siteburg.com">Flatlick</a></li>
    </ul>
</div>

</div>

<em class="clear"> </em>
<div id="footer">
  <p>A <a href="http://suga.wordpress.com" target="_blank">sugalicious</a> template.</p> 
</div>
</div>

</div></div>

</body>
</html>

Layout Comments

Showing latest 10 of 18 comments

Awesome. just awesome...i haven't any word to appreciate this post.....Really i am impressed from this post....the person who create this post he is a great human..free blackjack downloads

By varisha17 on Jun 25, 2009 6:13 am

umm...can i change the name of the blog to what i want instead of "suga's sample blog"?

By kestrella on Jul 11, 2008 3:21 am

man, i cant use it. it gives the same error code.

By Mizuro on Jun 17, 2008 11:21 pm

this looks really nice, how can i revert to the old template?

By optimusrhyme on Mar 22, 2008 5:29 pm

yea i have the same problem!!

By hightop900 on Feb 10, 2008 7:06 pm

This template code is not right and it won't work. Maybe you should try to find the right code. :]

By anniez-lyts on Feb 2, 2008 5:58 pm

y it say???"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup."

By alaopz on Sep 28, 2007 6:33 am

y i cant put on my blog?

By alaopz on Sep 28, 2007 6:26 am

i added an ad code that i want at the top left of my page. i put the code in a newsidebar but it still doesn't until directly after the sidebar code. i like where it is situated but need to start across from the sidebar. what am i doing wrong?

By ktvincent1 on Sep 7, 2007 1:25 pm

i like the connection with nature...i wish the links in the body of the layout were green like the others

By jesusisthebestthing on Aug 5, 2007 2:50 pm

View all »

Layout Details

Designer	scind3r3lla
Submitted on	May 31, 2006
Page views	76,636
Favorites	85
Comments	18

In Nature

Designer's Comments

Using This Layout

Layout Code

Layout Comments

Layout Details

Layout Tags

Layout Tools

Layout Affiliates