Adapted Greying

Designer's Comments

Look carefully for specific instructions

The original Greying theme was made by Gabrielle Wee, to be used on tumblr. You can see it here.
Keep the entire credits, please.

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 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>BLOG TITLE</title>
<link rel="shortcut icon" href="FAVICON-URL">

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
	body {
		background: #ffffff url('none');
		font-family: "Droid Serif";
 		font-size: 11px;
		color: #343434;
		-webkit-text-stroke: 1px transparent;
		-moz-text-stroke: 1px transparent;
		-o-text-stroke: 1px transparent;
		text-stroke: 1px transparent;
		word-wrap: break-word;
	}

a, a:link, a:active, a:visited {
		color: #343434;
		text-decoration: none!important;
		-webkit-transition: color 1.5s linear;
		-moz-transition: color 1.5s linear;
		-o-transition: color 1.5s linear;
		transition: color 1.5s linear;
	}
	a:hover {
		color: #343434;
		background: #ffff00;
		-webkit-transition: color .1s linear;
		-moz-transition: color .1s linear;
		-o-transition: color .1s linear;
		transition: color .1s linear;
	}
	img, a img {
		border: 0;
		opacity: 0.5;
		filter: alpha(opacity=50);
		-webkit-transition: opacity 1.5s linear;
		-moz-transition: opacity 1.5s linear;
		-o-transition: opacity 1.5s linear;
		transition: opacity 1.5s linear;
	}
	img:hover, a:hover img {
		background: none!important;
		opacity: 1;
		filter: alpha(opacity=100);
		-webkit-transition: opacity .1s linear;
		-moz-transition: opacity 1.5s linear;
		-o-transition: opacity .1s linear;
		transition: opacity .1s linear;
	}
	blockquote {
		margin: 5px 0 0 11px;
		padding-left: 10px;
		border-left: 20px;
	}
	blockquote img, blockquote a img {
		max-width: 490px;
	}
	p {
		padding-top: 5px;
	}
	ol, ul {
		padding: 5px 0 0 25px;
	}
	
	ol {
		list-style-type: decimal;
	}
	blockquote p:first-child, blockquote ul:first-child, blockquote ol:first-child, .body p:first-child, .body ul:first-child, .body ol:first-child {
		padding-top: 0;
	}
	ul ul, ul ol, ol ol, ol ul {
		padding-bottom: 5px;
	}
	blockquote p:first-child, blockquote ul:first-child, blockquote ol:first-child {
		padding-top: 0;
	}

#container {
		margin: auto;
		padding: 0px;
	}
	#content {
		margin: 0 auto 25px;
		width: 975px;
		height: 100%;
		padding: 0;
	}

h1, h2, h1 a, h2 a {
		font-family: "Droid Serif";
		font-weight: bold;
		text-transform: uppercase;
		text-decoration: none;
	}
	h1, h1 a {
		font-size: 25px;
		color: #343434!;
	}
	h2 {
		font-size: 20px;
	}
	h3 {
		font: italic bold 17px "Droid Serif";
	}
	
	h4 {
		font-size: 12px;
                font-family: "Droid Serif";
		padding: 5px;
		background: #eeeeee;
	}
	h4 a {
		background: #eeeeee;
	}
	h4 a:hover {
		background: #ffff00;
	}

#sidebar {
		
		position: fixed;
                margin-left: 725px;
		width: 250px;
		float: right;
	}

input {
		margin-top: 8px;
		padding: 2px 4px;
		width: 100%;
		border: 0;
		background: #eeeeee;
		font: 11px Helvetica;
		color: #343434;
		-webkit-text-stroke: 1px transparent;
		-moz-text-stroke: 1px transparent;
		-o-text-stroke: 1px transparent;
		text-stroke: 1px transparent;
        }

#pages {
		margin-left: -2px;
		padding: 0;
		list-style-type: none;
	}

.page {
		font-weight: bold;
	}

#pag {
		margin-top: 8px; text-align: center;
	}

#current, #pag a {
		padding: 0 2px;
	}

.results {
		margin-bottom: 15px;
		text-align: center;
	}

.results h3, .results a {
		color: #909090;
		font-size: 15px!important;
	}

.post {
		margin-bottom: 25px;
	}
	
	
	.date {
		margin-top: 5px;
		text-transform: uppercase;
	}
	.date, .date a, #pag, #current, #pag .center a {
		font: 10px "Droid Serif";;
		color: #343434;
		text-transform: uppercase;
		text-decoration: none;
	}
	.date a:hover, #pag a:hover, #footer a:hover {
		color: #343434;
	}
	#comments {
		margin-top: 25px;
	}
	#comments ol {
		padding: 0;
		list-style-type: none;
	}
	#comments li {
		margin-bottom: 10px;
	}

#main {
             width: 700px;
             position: absolute;
             font: 12px "Droid Serif";
	     text-align: justify;
 	     padding-bottom:25px;
	     padding-top: 30px;
	}

left: 48%;
		width: 32px;
		padding: 10px;
		font-size: 15px;
		z-index: 99999;
		background: white;
		background: hsla( 0, 0%, 100%, 0.9 );
		text-align: center;
		text-transform: uppercase;
	}

#footer {
		text-align: center;
		margin-top: 8px;
	}
	#footer p {
		padding-top: 3px!important;
	}
	#footer, #footer a {
		font: 12px "Droid-Serif";
		color: #909090;
		text-transform: uppercase;
		text-decoration: none;
	}

</script>
</style>
</head>

<div id="main">
<BLOGGER>
<h2><a href="<$BlogItemPermalinkURL$>"><$BlogItemTitle$></a></h2>
<div class="body"><$BlogItemBody$> <div align="right"><BlogItemCommentsEnabled>
<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> COMMENTS</a>
</BlogItemCommentsEnabled></div></div>
<div id="date">
<div class="left" style="text-transform:uppercase;">Written on <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> at <$BlogItemDateTime$>
by <$BlogItemAuthor$>
</div>
</div>
</BLOGGER>
	</div>

<ul id="pages">
			<li style="font-family: 'Droid-Serif'; float: left; width: 124px; margin-left: 2px; display: block; margin-top: 2px; background: #eeeeee; padding: 3px 6px;" onMouseOver="this.style.color='#ffffff'; this.style.background='#565656'" onMouseOut="this.style.color='black'; this.style.background='#eeeeee'" onClick="document.getElementById('profile').style.visibility='visible'">Profile</li>
			<li style="font-family: 'Droid-Serif'; float: left; width: 124px; margin-left: 2px; display: block; margin-top: 2px; background: #eeeeee; padding: 3px 6px;" onMouseOver="this.style.color='#ffffff'; this.style.background='#565656'" onMouseOut="this.style.color='black'; this.style.background='#eeeeee'" onclick="document.getElementById('archives').style.visibility='visible'">Archives</li>
			<li style="font-family: 'Droid-Serif'; float: left; width: 124px; margin-left: 2px; display: block; margin-top: 2px; background: #eeeeee; padding: 3px 6px;" onMouseOver="this.style.color='#ffffff'; this.style.background='#565656'" onMouseOut="this.style.color='black'; this.style.background='#eeeeee'" onclick="document.getElementById('friends').style.visibility='visible'">Friends</li>
		</ul>
			
<br>
<br>
<br>
<br>
<br>
<br>
<div id="profile" style="visibility:hidden"> 
Write something nice about you.
<br>
Couple links will do.
<br>
<a href="">link1</a> & <a href="">link2</a> & <a href="">link3</a>
</div>

<div id="friends" style="visibility:hidden"> 
<a href="">friend</a> <a href="">friend</a> <a href="">friend</a> <a href="">friend</a> <a href="">friend</a>
<a href="">friend</a>  <a href="">friend</a>  <a href="">friend</a>  <a href="">friend</a> 
</div>
<div id="footer">
<div id="credits"> 
<center>
<p><a href="http://www.tumblr.com/theme/13410">Greying</a> by <a href="http://elletricity.com">Gabrielle Wee</a>.<br />
Adapted by <a href="http://twitter.com/filledruppel/">Isla Black </a><br />
Powered by <a href="http://blogger.com">Blogger</a>.</p></center>   
</div>
</div>
<div id="pag">
					<OlderPosts><a href="<$OlderPosts$>">←</OlderPosts>
					<NewerPosts><a href="<$NewerPosts$>">→</NewerPosts>

</div>
<div class="clear"></div>

</div>