blue and purple splash

Blogger Layouts / Classic

Designer's Comments

Look carefully for specific instructions

This is the very first layout I've ever done. Thought I'd share it.

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">

body {
  background:#000;
  margin:0;
  padding:40px 20px;
  font:x-small "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
  text-align:center;
  color:#ccc;
  font-size/* */:/**/small;
  font-size: /**/small;
  }
a:link {
  color:#9ad;
  text-decoration:none;
  }
a:visited {
  color:#FF99CC;
  text-decoration:none;
  }
a:hover {
  color:#FFFFCC;
  text-decoration:underline;
  }
a img {
  border-width:0;
  }

/* Header
----------------------------------------------- */
@media all {
  #header {
    width:660px;
    margin:0 auto 10px;
    }
  }
@media handheld {
  #header {
    width:90%;
    }
  }
#blog-title {
  margin:5px 5px 0;
  padding:20px 20px .25em;
  font-size:200%;
  line-height:1.2em;
  color:#ccc;
  text-transform:uppercase;
  letter-spacing:.2em;
  }
#blog-title a {
  color:#ccc;
  text-decoration:none;
  }
#blog-title a:hover {
  color:#ad9;
  }
#description {
  margin:0 5px 5px;
  padding:0 20px 20px;
  font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#777;
  }

/* Content
----------------------------------------------- */
@media all {
  #content {
    width:660px;
    margin:0 auto;
    padding:0;
    text-align:left;
    }
  #main {
    width:410px;
    float:left;
    }
  #sidebar {
    width:220px;
    float:right;
    }
  }
@media handheld {
  #content {
    width:90%;
    }
  #main {
    width:100%;
    float:none;
    }
  #sidebar {
    width:100%;
    float:none;
    }
  }

/* Headings
----------------------------------------------- */
h2 {
	margin:1.5em 0 .75em;
	font:bold 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
	text-transform:uppercase;
	letter-spacing:.2em;
	color:#99FFFF;
	font-size: 75%;
  }

/* Posts
----------------------------------------------- */
@media all {
  .date-header {
    margin:1.5em 0 .5em;
    }
  .post {
    margin:.5em 0 1.5em;
    border-bottom:1px dotted #444;
    padding-bottom:1.5em;
    }
  }
@media handheld {
  .date-header {
    padding:0 1.5em 0 1.5em;
    }
  .post {
    padding:0 1.5em 0 1.5em;
    }
  }
.post-title {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  line-height:1.4em;
  color:#ad9;
  }
.post-title a {
  text-decoration:none;
  color:#ad9;
  }
.post-title a:hover {
  color:#fff;
  }
.post div {
  margin:0 0 .75em;
  line-height:1.6em;
  }
p.post-footer {
  margin:-.25em 0 0;
  color:#333;
  }
.post-footer em, .comment-link {
  font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
.post-footer em {
  font-style:normal;
  color:#777;
  margin-right:.6em;
  }
.comment-link {
  margin-left:.6em;
  }
.post img {
  padding:4px;
  border:1px solid #222;
  }
.post blockquote {
  margin:1em 20px;
  }
.post blockquote p {
  margin:.75em 0;
  }

/* Comments
----------------------------------------------- */
#comments h4 {
  margin:1em 0;
  font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#999;
  }
#comments h4 strong {
  font-size:130%;
  }
#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
#comments-block dt {
  margin:.5em 0;
  }
#comments-block dd {
  margin:.25em 0 0;
  }
#comments-block dd.comment-timestamp {
  margin:-.25em 0 2em;
  font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
#comments-block dd p {
  margin:0 0 .75em;
  }
.deleted-comment {
  font-style:italic;
  color:gray;
  }

/* Sidebar Content
----------------------------------------------- */
#sidebar ul {
  margin:0 0 1.5em;
  padding:0 0 1.5em;
  border-bottom:1px dotted #444;
  list-style:none;
  }
#sidebar li {
  margin:0;
  padding:0 0 .25em 15px;
  text-indent:-15px;
  line-height:1.5em;
  }
#sidebar p {
  color:#999;
  line-height:1.5em;
  }

/* Profile
----------------------------------------------- */
#profile-container {
  margin:0 0 1.5em;
  border-bottom:1px dotted #444;
  padding-bottom:1.5em;
  }
.profile-datablock {
  margin:.5em 0 .5em;
  }
.profile-img {
  display:inline;
  }
.profile-img img {
  float:left;
  padding:4px;
  border:1px solid #222;
  margin:0 8px 3px 0;
  }
.profile-data {
  margin:0;
  font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
.profile-data strong {
  display:none;
  }
.profile-textblock {
  margin:0 0 .5em;
  }
.profile-link {
  margin:0;
  font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  }

/* Footer
----------------------------------------------- */
#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  }
#footer hr {
  display:none;
  }
#footer p {
  margin:0;
  padding-top:15px;
  font:78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  }

/* Feeds
----------------------------------------------- */
#blogfeeds {
  }
#postfeeds {
  }
  body,td,th {
	color: #00FFFF;
}
body {
	background-color: #000000;
	background-image: url(http://cbimg6.com/layouts/07/09/14/21469aa.jpg);
}
a {
	font-size: 10px;
	color: #99FFCC;
	font-family: Times New Roman, Times, serif;
}
a:active {
	text-decoration: none;
}
</style>

</head>
<body>
<div id="Layer3" style="position:absolute; left:404px; top:5px; width:411px; height:145px; z-index:3;">
  <div id="header">

</div>
</div>
<div id="content">

<div id="sidebar"><div id="sidebar2">
<div id="Layer2" style="position:absolute; left:54px; top:50px; width:280px; height:400px; z-index:2;">

<MainOrArchivePage>
  <h2 class="sidebar-title"><$I18NLinks$></h2>
    
   	  | <a href="http://news.google.com/">Google News</a> | <a href="http://www.myspace.com/nobleghost">My Myspace account</a> | <a href="http://nobleghost.eliptex.net">My Website</a> | </MainOrArchivePage>

</ul>
  </MainOrArchivePage>

<p>Made by: <a href="http://nicholas_ghost.createblog.com/">Nicholas_Ghost
  </a></p>
    </div>
</div>

</div>

<div class="post"><a name="<$BlogItemNumber$>"></a>
         <BlogItemTitle>
    <h3 class="post-title">
	 <BlogItemUrl><a href="../../%3C$BlogItemUrl$%3E" title="external link"></BlogItemUrl>
	 <$BlogItemTitle$>
	 <BlogItemUrl></a></BlogItemUrl>
    </h3>
    </BlogItemTitle>

<p><$BlogCommentBody$></p>
      </dd>
      <dd class="comment-timestamp"><a href="#<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>
	  <$BlogCommentDeleteIcon$>
	  </dd>
      </BlogItemComments>
    </dl>
		<p class="comment-timestamp">

<$BlogItemCreate$>
    </p>
    <p id="postfeeds"><$BlogItemFeedLinks$></p>
    </BlogItemCommentsEnabled>	    
    <BlogItemBacklinksEnabled>
    <a name="links"></a><h4><$I18NLinksToThisPost$>:</h4>
    <dl id="comments-block">
    <BlogItemBacklinks>
        <dt class="comment-title">
        <$BlogBacklinkControl$>
        <a href="../../%3C$BlogBacklinkURL$%3E" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
        </dt>
        <dd class="comment-body"><$BlogBacklinkSnippet$>
        <br />
        <span class="comment-poster">
        <em><$I18NPostedByBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
        </span>
        </dd>
    </BlogItemBacklinks>
    </dl>
    <p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
    </BlogItemBacklinksEnabled>

</ItemPage>

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

</div>

Layout Comments

Showing latest 8 of 8 comments

how do you write things in the purple splash?

By DDCollection on Sep 20, 2009 8:56 am

well I liked it, Im using it, thanks.

By bellasmom06 on Jul 14, 2008 6:05 am

Thank you for the comments. I've been so busy on other stuff I haven't been able to play with coding for a bit.

By Nicholas_Ghost on Feb 11, 2008 6:13 am

anyway, 2 nicolas, ur layout is actually vry nice 4 ur first time. i think it's pretty nice. keep improving! i bet u'll do a gd job with more practice!

By leongyiling1998 on Dec 18, 2007 12:36 am

xkatie, this is the first layout the person has done. try 2 respect it.

By leongyiling1998 on Dec 17, 2007 2:35 am

i like the transparency of the purple stuff.

By confessional-luvv on Dec 8, 2007 6:41 pm

It's a pity that the background image repeats on a screen resolution over 800x600

By suckmylolly on Sep 17, 2007 1:31 am

no offense but i really don't like this one it just doesn't look that great in my opinion

By xKatie on Sep 14, 2007 9:05 pm

Layout Details

Designer	Nicholas_Ghost
Submitted on	Sep 14, 2007
Page views	22,721
Favorites	31
Comments	8
Reviewer	IVIike
Approved on	Sep 14, 2007

blue and purple splash

Designer's Comments

Using This Layout

Layout Code

Layout Comments

Layout Details

Layout Tags

Layout Tools

Layout Affiliates