Snapshot Tequila Blogger classic template by Dave Shea
Anda dapat menggunakan template ini dengan cara meng copy paste code template yang sudah saya siapkan dibawah ini, template klasik yang simple dan menarik. Jangan pernah merubah atau menghapus link kreditnya, terimakasih.
Silahkan semoga bermanfaat.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
/*
-----------------------------------------------------
Blogger Template Style
Name: Snapshot: Tequila
Designer: Dave Shea
URL: mezzoblue.com / brightcreative.com
Date: 27 Feb 2004
------------------------------------------------------ */
/* -- basic html elements -- */
body {padding: 0; margin: 0; font: 75% Helvetica, Arial, sans-serif; color: #474B4E; background: #fff; text-align: center;}
a {color: #93DB04; font-weight: bold; text-decoration: none;}
a:visited {color: #839D07;}
a:hover {text-decoration: underline; color: #6C65D5;}
h1 {margin: 0; color: #7B8186; font-size: 1.5em; text-transform: lowercase;}
h1 a {color: #7B8186;}
h2, #comments h4 {font-size: 1em; margin: 2em 0 0 0; color: #7B8186; background: transparent url(http://www.blogblog.com/snapshot_tequila/bg-header1.gif) bottom right no-repeat; padding-bottom: 2px;}
@media all {
h3 {
font-size: 1em;
margin: 2em 0 0 0;
background: transparent url(http://www.blogblog.com/snapshot_tequila/bg-header1.gif) bottom right no-repeat;
padding-bottom: 2px;
}
}
@media handheld {
h3 {
background:none;
}
}
h4, h5 {font-size: 0.9em; text-transform: lowercase; letter-spacing: 2px;}
h5 {color: #7B8186;}
h6 {font-size: 0.8em; text-transform: uppercase; letter-spacing: 2px;}
p {margin: 0 0 1em 0;}
img, form {border: 0; margin: 0;}
/* -- layout -- */
@media all {
#content {
width: 700px;
margin: 0 auto;
text-align: left;
background: #fff url(http://www.blogblog.com/snapshot_tequila/bg-body.gif) 0 0 repeat-y;
}
#header {
background: #D8DADC url(http://www.blogblog.com/snapshot_tequila/bg-headerdiv.gif) 0 0 repeat-y;
}
#header div {
background: transparent url(http://www.blogblog.com/snapshot_tequila/header-02.gif) bottom left no-repeat;
}
#main {
line-height: 1.4;
float: left;
padding: 10px 12px;
border-top: solid 1px #fff;
width: 428px;
/* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */
voice-family: "\"}\"";
voice-family: inherit;
width: 404px;
}
}
@media handheld {
#content {
width: 90%;
}
#header {
background: #D8DADC;
}
#header div {
background:none;
}
#main {
float: none;
width: 100%;
}
}
/* IE5 hack */
#main {}
@media all {
#sidebar {
margin-left: 428px;
border-top: solid 1px #fff;
padding: 4px 0 0 7px;
background: #fff url(http://www.blogblog.com/snapshot_tequila/bg-sidebar2.gif) 1px 0 no-repeat;
}
#footer {
clear: both;
background: #E9EAEB url(http://www.blogblog.com/snapshot_tequila/bg-footer.gif) bottom left no-repeat;
border-top: solid 1px #fff;
}
}
@media handheld {
#sidebar {
margin: 0 0 0 0;
background: #fff;
}
#footer {
background: #E9EAEB;
}
}
/* -- header style -- */
#header h1 {padding: 12px 0 92px 4px; width: 557px; line-height: 1;}
/* -- content area style -- */
h3.post-title {font-size: 1.2em; margin-bottom: 0;}
h3.post-title a {color: #7C78B5;}
.post {clear: both; margin-bottom: 4em;}
.post-footer em {color: #B4BABE; font-style: normal; float: left;}
.post-footer {text-align: right;}
.comment-link {margin-left:.6em;}
#main img {border: solid 1px #E3E4E4; padding: 2px; background: #fff;}
.deleted-comment {font-style:italic;color:gray;}
/* -- sidebar style -- */
@media all {
#sidebar #description {
border: solid 1px #BFFC45;
padding: 10px 17px;
color: #839D07;
background: #CCFD6A url(http://www.blogblog.com/snapshot_tequila/bg-profile2.gif);
font-size: 1.2em;
font-weight: bold;
line-height: 0.9;
margin: 0 0 0 -6px;
}
}
@media handheld {
#sidebar #description {
background: #CCFD6A;
}
}
#sidebar h2 {font-size: 1.3em; margin: 1.3em 0 0.5em 0;}
#sidebar dl {margin: 0 0 10px 0;}
#sidebar ul {list-style: none; margin: 0; padding: 0;}
#sidebar li {padding-bottom: 5px; line-height: 0.9;}
#profile-container {color: #7B8186;}
#profile-container img {border: solid 1px #7C78B5; padding: 4px 4px 8px 4px; margin: 0 10px 1em 0; float: left;}
.archive-list {margin-bottom: 2em;}
#powered-by {margin: 10px auto 20px auto;}
/* -- sidebar style -- */
#footer p {margin: 0; padding: 12px 8px; font-size: 0.9em;}
#footer hr {display: none;}
</style>
</head>
<body>
<!-- Begin #content - Centers all content and provides edges for floated columns -->
<div id="content">
<div id="header"><div>
<h1><ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage></h1>
</div></div>
<!-- Begin #main - Contains main-column blog content -->
<div id="main">
<Blogger>
<BlogDateHeader>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>
<!-- Begin .post -->
<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>
<p><$BlogItemBody$></p>
<p class="post-footer">
<em>posted by <$BlogItemAuthorNickname$> @ <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>
<!-- End .post -->
<!-- Begin #comments -->
<ItemPage>
<div id="comments">
<BlogItemCommentsEnabled><a name="comments"></a>
<h4><$BlogItemCommentCount$> Comments:</h4>
<dl id="comments-block">
<BlogItemComments>
<dt class="comment-data" id="c000000045"><a name="c<$BlogCommentNumber$>"></a>
At <a href="#c<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>,
<$BlogCommentAuthor$> said...
</dt>
<dd class="comment-body">
<p><$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
</dl>
<p>
<$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>
<p>
<a href="<$BlogURL$>"><< Home</a>
</p>
</div>
</ItemPage>
<!-- End #comments -->
</Blogger>
</div>
<!-- End #main -->
<!-- Begin #sidebar -->
<div id="sidebar">
<p id="description"><$BlogDescription$></p>
<!-- Begin #profile-container -->
<$BlogMemberProfile$>
<!-- End #profile -->
<MainOrArchivePage>
<h2 class="sidebar-title">Links</h2>
<ul>
<li><a href="http://news.google.com/">Google News</a></li>
<li><a href="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li>
<li><a href="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li>
</ul>
</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>
<ArchivePage><li><a href="<$BlogURL$>">Current Posts</a></li></ArchivePage>
</ul>
</MainOrArchivePage>
<p id="powered-by"><a href="http://www.blogger.com"><img src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger" /></a></p>
<!--
<p>This is a paragraph of text that could go in the sidebar.</p>
-->
</div>
<!-- End #sidebar -->
<!-- Begin #footer -->
<div id="footer"><hr />
<p><!-- This is an optional footer. If you want text here, place it inside these tags, and remove this comment. --> </p>
</div>
<!-- End #footer -->
</div>
<!-- End #content -->
</body>
</html>
