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.
 |
| Tic Tac Blogger Classic |
<!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$>
<style type="text/css">
/*
Blogger Template Style
Name: TicTac
Author: Dan Cederholm
URL: www.simplebits.com
Date: 1 March 2004
*/
/* ---( page defaults )--- */
body {
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
font-size: small;
text-align: center;
color: #333;
background: #e0e0e0;
}
blockquote {
margin: 0 0 0 30px;
padding: 10px 0 0 20px;
font-size: 88%;
line-height: 1.5em;
color: #666;
background: url(http://www.blogblog.com/tictac/quotes.gif) no-repeat top left;
}
blockquote p {
margin-top: 0;
}
abbr, acronym {
cursor: help;
font-style: normal;
border-bottom: 1px dotted;
}
code {
color: #f63;
}
hr {
display: none;
}
img {
border: none;
}
/* unordered list style */
ul {
list-style: none;
margin: 0 0 20px 30px;
padding: 0;
}
li {
list-style: none;
padding-left: 14px;
margin-bottom: 3px;
background: url(http://www.blogblog.com/tictac/tictac_orange.gif) no-repeat 0 6px;
}
/* links */
a:link {
color: #69c;
}
a:visited {
color: #666699;
}
a:hover {
color: #693;
}
a:active {
color: #cc3333;
text-decoration: none;
}
/* ---( layout structure )---*/
@media all {
#wrap {
width: 847px;
margin: 0 auto;
text-align: left;
background: url(http://www.blogblog.com/tictac/tile.gif) repeat-y;
}
#content {
margin-left: 62px; /* to avoid the BMH */
}
#main-content {
float: left;
width: 460px;
margin: 20px 0 0 0;
padding: 0;
line-height: 1.5em;
}
#sidebar {
margin: 0 41px 0 547px;
padding: 20px 0 0 0;
font-size: 85%;
line-height: 1.4em;
color: #999;
background: url(http://www.blogblog.com/tictac/sidebar_bg.gif) no-repeat 0 0;
}
}
@media handheld {
#wrap {
width: 90%;
background: none;
}
#content {
margin:0 2% 0 2%;
}
#main-content {
float: none;
width: 100%;
}
#sidebar {
margin: 0 2% 0 2%;
}
}
/* ---( header and site name )--- */
@media all {
#blog-header {
margin: 0;
padding: 0;
font-family: "Lucida Grande", "Trebuchet MS";
background: #e0e0e0 url(http://www.blogblog.com/tictac/top_div.gif) no-repeat top left;
}
#blog-header h1 {
margin: 0;
padding: 45px 60px 50px 160px;
font-size: 200%;
color: #fff;
text-shadow: #81A75B 2px 2px 2px;
background: url(http://www.blogblog.com/tictac/top_h1.gif) no-repeat bottom left;
}
}
@media handheld {
#blog-header {
background: #99cc66;
}
#blog-header h1 {
background: none;
}
}
#blog-header h1 a {
text-decoration: none;
color: #fff;
}
#blog-header h1 a:hover {
color: #eee;
}
/* ---( main column )--- */
h2.date-header {
margin-top: 0;
padding-left: 14px;
font-size: 90%;
color: #f93;
background: url(http://www.blogblog.com/tictac/date_icon.gif) no-repeat 0 50%;
}
h3.post-title {
margin-top: 0;
font-family: "Lucida Grande", "Trebuchet MS";
font-size: 130%;
letter-spacing: -1px;
color: #f63;
}
.post {
margin: 0 0 1.5em 0;
padding: 0 0 1.5em 14px;
border-bottom: 1px solid #ddd;
}
.post-footer {
margin: 0;
padding: 0 0 0 14px;
font-size: 88%;
color: #999;
background: url(http://www.blogblog.com/tictac/tictac_grey.gif) no-repeat 0 8px;
}
.post img {
padding: 6px;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
}
/* comment styles */
#comments {
padding-top: 10px;
font-size: 85%;
line-height: 1.5em;
color: #666;
background: #eee url(http://www.blogblog.com/tictac/comments_curve.gif) no-repeat top left;
}
#comments h4 {
margin: 20px 0 15px 0;
padding: 8px 0 0 40px;
font-family: "Lucida Grande", "Trebuchet MS";
font-size: 130%;
color: #666;
background: url(http://www.blogblog.com/tictac/bubbles.gif) no-repeat 10px 0;
height: 29px !important; /* for most browsers */
height /**/:37px; /* for IE5/Win */
}
#comments ul {
margin-left: 0;
}
#comments li {
background: none;
padding-left: 0;
}
.comment-body {
padding: 0 10px 0 25px;
background: url(http://www.blogblog.com/tictac/tictac_orange.gif) no-repeat 10px 5px;
}
.comment-body p {
margin-bottom: 0;
}
.comment-data {
margin: 4px 0 0 0;
padding: 0 10px 1em 60px;
color: #999;
border-bottom: 1px solid #ddd;
background: url(http://www.blogblog.com/tictac/comment_arrow.gif) no-repeat 44px 2px;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.comment-link {
margin-left:.6em;
}
/* ---( sidebar )--- */
h2.sidebar-title {
margin: 0 0 0 0;
padding: 25px 0 0 50px;
font-family: "Lucida Grande", "Trebuchet MS";
font-size: 130%;
color: #666;
height: 32px;
background: url(http://www.blogblog.com/tictac/sidebar_icon.gif) no-repeat 20px 15px;
height: 32px !important; /* for most browsers */
height /**/:57px; /* for IE5/Win */
}
#sidebar ul, #sidebar p {
margin: 0;
padding: 5px 20px 1em 20px;
border-bottom: 1px solid #ddd;
}
#sidebar li {
background: url(http://www.blogblog.com/tictac/tictac_green.gif) no-repeat 0 5px;
}
/* profile block */
.profile-datablock {
margin: 0;
padding: 5px 20px 0 20px;
}
.profile-datablock dd {
margin: 0;
padding: 0;
}
.profile-img img {
float: left;
margin: 0 10px 0 0;
padding: 4px;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
background: #fff;
}
#sidebar p.profile-link {
padding-left: 36px;
background: url(http://www.blogblog.com/tictac/profile.gif) no-repeat 20px 4px;
}
p#powered-by, #sidebar p.profile-textblock {
margin-top: 1em;
border: none;
}
/* ---( footer )--- */
.clear { /* to fix IE6 padding-top issue */
clear: both;
height: 0;
}
@media all {
#footer {
margin: 0;
padding: 0 0 9px 0;
font-size: 85%;
color: #ddd;
background: url(http://www.blogblog.com/tictac/bottom_sill.gif) no-repeat bottom left;
}
#footer p {
margin: 0;
padding: 20px 320px 20px 95px;
background: url(http://www.blogblog.com/tictac/bottom_sash.gif) no-repeat top left;
}
}
@media handheld {
#footer {
background: none;
}
#footer p {
background: none;
}
}
<ItemPage>
/* ---- overrides for post page ---- */
.post {
padding: 0;
border: none;
}
</ItemPage>
</style>
</head>
<body>
<div id="wrap"> <!-- #wrap - for centering -->
<!-- Blog Header -->
<div id="blog-header">
<h1>
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
</div>
<div id="content"> <!-- #content wrapper -->
<!-- Begin #main-content -->
<div id="main-content">
<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>
<div class="post-body">
<p><$BlogItemBody$></p>
</div>
<p class="post-footer">posted by <$BlogItemAuthorNickname$> at
<a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>
<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>
<ul>
<BlogItemComments>
<li id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
<div class="comment-body">
<p><$BlogCommentBody$></p>
</div>
<p class="comment-data">By <$BlogCommentAuthor$>, at <a href="#c<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>
<$BlogCommentDeleteIcon$></p>
</li>
</BlogItemComments>
</ul>
<p class="comment-data">
<$BlogItemCreate$>
<br /><br />
</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>
<a href="<$BlogURL$>"><< Home</a>
</p>
</div>
</ItemPage>
<!-- End #comments -->
</Blogger>
<hr />
</div><!-- End #main-content -->
</div><!-- End #content -->
<!-- Begin #sidebar -->
<div id="sidebar">
<h2 class="sidebar-title">About</h2>
<p><$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</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>
<!--<h2 class="sidebar-title">New</h2>
<p>This is a paragraph of text in the sidebar.</p>
-->
<p id="powered-by"><a href="http://www.blogger.com"><img src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger" /></a></p>
</div>
<!-- End #sidebar -->
<div class="clear"> </div>
<div id="footer">
<p><!-- If you'd like, you could place footer information here. --> </p>
</div>
</div> <!-- end #wrap -->
<!-- c(~) -->
</body>
</html>