code htmlnya ada di bawah silakan di cope:
<?xml version="1.0" encoding="UTF-8" ?>
<!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' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/*-- (Hiding the navbar) --*/
#navbar-iframe {
display:none !important;
}
body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
color:#cccccc;
}
h2{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:32px;
color:#cccccc;
}
#wrapper{
background:#000000;
width:100%;
}
#bg_1{
background:url(http://flash.sonypictures.com/movies/spiderman/blogtemplate/style4/images/tile_bg.jpg);
width:100%;
}
#bg_2{
background:url(http://flash.sonypictures.com/movies/spiderman/blogtemplate/style4/images/vert_bg.jpg) repeat-x;
width:100%;
}
#headerwrapper{
background-image:url(http://flash.sonypictures.com/movies/spiderman/blogtemplate/style4/images/banner_head.jpg);
background-position:center;
background-repeat:no-repeat;
height:212px;
width:758px;
margin:0 auto;
vertical-align:middle;
}
.headercontent{
width:758px;
margin:0 auto;
position:relative;
top:10px;
left:20px;
text-align:left;color:#ffffff; font-weight:normal;
font-size:12px;
}
.headercontent a:link
{
text-decoration : none;
color: #ffffff;
background: transparent;
}
.headercontent a:visited
{
text-decoration : none;
color: #ffffff;
background: transparent;
}
.headercontent a:hover
{
text-decoration : none;
color: #898d7b;
background: transparent;
}
#tableframe{
width:760px;
margin:0 auto;
}
#content{
background-color:#000000;
}
#contentwrapper{
width:566px;
min-height:100%;
vertical-align:top;
background-color:#000000;
}
#gradient_left_1{
width:12px;
vertical-align:top;
background-image:url(http://flash.sonypictures.com/movies/spiderman/blogtemplate/style4/images/gradient_left_tile.jpg);
}
#gradient_left_2{
width:12px;
height:1275px;
background-image:url(http://flash.sonypictures.com/movies/spiderman/blogtemplate/style4/images/gradient_left_vert.jpg);
background-repeat:no-repeat;
}
#gradient_right_1{
width:12px;
background-image:url(http://flash.sonypictures.com/movies/spiderman/blogtemplate/style4/images/gradient_right_tile.jpg);
}
#gradient_right_2{
width:12px;
height:1275px;
background-image:url(http://flash.sonypictures.com/movies/spiderman/blogtemplate/style4/images/gradient_right_vert.jpg);
background-repeat:no-repeat;
}
#side{
}
#sidewrapper{
background-color:#000000;
border-left:1px solid #21262e;
width:192px;
vertical-align:top;
}
#visitthesite{
width:192px;
margin:0 auto;
}
#visitthesitewrapper{
background-color:#0f161d;
}
.clearfloat{
clear:both;
}
.date{
color:#666666;
font-size:10px;
}
.icon{
border:1px solid #898d7b;
float:left;
}
.iconwrapper{
width:180px;
margin:0 auto;
clear:both;
padding:10px 0 0 0;
}
.iconwrapper li{
list-style-type:none;
}
.icontext{
float:left;
padding-left:6px;
font-size:11px;
color:#666666;
}
.icontext_title{
font-size:12px;
}
.icontext_sub{
font-size:10px;
}
.icontext a{
font-size:11px;
color:#999966;
text-decoration:underline;
}
.post{
margin:20px;
background-image:url(http://flash.sonypictures.com/movies/spiderman/blogtemplate/style4/images/post_bg.jpg);
background-repeat:repeat-x;
}
.posticon{
float:left;
}
.posticon_text{
float:left;
position:relative;
top:6px;
}
.postline{
width:100%;
}
.postline_pad{
padding:6px;
}
.post_bottom_text, .vert_spacer{
color:#666666;
font-size:12px;
}
.post_bottom_where, .post_bottom_edit, .post_comment_count{
color:#999966;
font-size:12px;
}
.post_title{
width:100%;
color:#43484e;
font-weight:bold;
font-size:16px;
}
.post_title a{color:f00;}
.post_text{
font-size:12px;
color:#cccccc;
}
.sideline, #sidewrapper .widget-content{
width:100%;
font-size:.8em;
clear:both;
}
#sidewrapper .widget-content{padding:10px;}
#sidewrapper ul{margin:0;padding:0 10px;list-style-type:none;}
.side_title, #sidewrapper h2{
background-color:#21262e;
color:#ffffff;
font-weight:bold;
padding-left:6px;
}
.spacer{
height:20px;
}
.tableborder{
background-color:#21262e;
}
h2.sidebar-title, #sidewrapper h2 {
font-size:14px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
color:#999999;
padding-left:12px;
padding-top:0px;}
/* Default Links
----------------------------------------------- */
a:link, a:visited {
text-decoration : underline;
color: #999966;
background: transparent;
}
a:hover {
text-decoration : underline;
color: #43484e;
background: transparent;
}
a:active {
text-decoration : none;
color: #999966;
background: transparent;
}
/* miscellaneous
----------------------------------------------- */
.profile-img .{
display: inline;}
.profile-data strong {
display: block;
}
.profile-textblock{padding-left:5px;}
.profile-link{padding-left:5px;}
.profile-img img {
float:left;
margin:5px 10px 5px 5px;
border:1px solid #cccccc;
}
.clear {
clear: both;
line-height: 0;
height: 0;
}
.splegal
{ font-family:Arial; font-size:9px;color:#cccccc;padding:10px;}
/* Feeds
----------------------------------------------- */
#blogfeeds {
font-size: 10px;padding:10px;
}
#postfeeds {
font-size: 12px;
}
#powered-by{text-align:center;
}
#powered-by a img {
border: none;
}
/* comments
----------------------------------------------- */
#comments {
border: 0;
border-top: 1px dashed #cccccc;
margin: 10px 0 0 0;
padding: 0;
}
#comment-body{font-weight:normal;
font-size:12px;
color:#ffffff;
}
#comments h3 {
margin-top: 10px;
margin-bottom: -10px;
font-weight: normal;
font-style: italic;
text-transform: uppercase;
letter-spacing: 1px;
}
#comments dl dt {
font-weight: bold;
font-style: italic;
margin-top: 35px;
padding: 1px 0 0 18px;
color: #cccccc;
}
#comments dl dd {
padding: 0;
margin: 0;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.comment-data{font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
font-size:12px;
color:#cccccc;}
]]></b:skin>
</head>
<body>
<div id='wrapper'><div id='bg_1'><div id='bg_2'><table cellpadding='0' cellspacing='0' id='tableframe'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<tr valign='top'>
<td id='gradient_left_1' rowspan='2'>
<div id='gradient_left_2'><img alt='' src='http://flash.sonypictures.com/movies/spiderman/blogtemplate/style4/images/spacer.gif' width='12'/></div>
</td>
<td class='tableborder' rowspan='2'><img alt='' src='http://flash.sonypictures.com/movies/spiderman/blogtemplate/style4/images/spacer.gif' width='1'/></td>
<td colspan='2' id='headerwrapper'><div class='headercontent'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Spiderman (Header)' type='Header'>
<b:includable id='main'>
<h2><b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h2>
<p><data:description/></p>
</b:includable>
</b:widget>
</b:section>
</div>
</td>
<td class='tableborder' rowspan='2'><img alt='' src='http://flash.sonypictures.com/movies/spiderman/blogtemplate/style4/images/spacer.gif' width='1'/></td>
<td id='gradient_right_1' rowspan='2'>
<div id='gradient_right_2'><img alt='' src='http://flash.sonypictures.com/movies/spiderman/blogtemplate/style4/images/spacer.gif' width='12'/></div>
</td>
</tr>
<tr>
<td id='contentwrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>
<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>
<dd class='comment-body collapseable'>
<data:backlink.snippet/>
</dd>
<dd class='comment-footer collapseable'>
<span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
<span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
</dd>
</div>
</b:loop>
</dl>
</b:if>
<p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>
</p>
</b:includable>
<b:includable id='post' var='post'>
<a expr:name='data:post.id'/>
<div class='postline'>
<div class='posticon'>
<img alt='' src='http://flash.sonypictures.com/movies/spiderman/blogtemplate/style4/images/post_icon.jpg'/>
</div>
<div class='posticon_text'>
<div class='postline'>
<b:if cond='data:post.title'>
<span class='post_title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</span>
</b:if>
</div>
<div class='postline'>
<span class='date'><data:post.dateHeader/>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
<span class='vert_spacer'> | </span>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<span class='email-post-icon'> </span>
</a>
</span>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
</div>
</div>
<div class='clearfloat'/>
</div>
<div class='postline'><div class='postline_pad'>
<span class='post_text'><data:post.body/></span>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div></div>
<div class='postline'>
<div class='postline_pad'>
<span class='post_bottom_text'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</div>
</div>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
<span class='delete-comment-icon'> </span>
</a>
</span>
</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
<span expr:class='"item-control " + data:backlink.adminClass'>
<a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
<span class='delete-comment-icon'> </span>
</a>
</span>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<span class='quick-edit-icon'> </span>
</a>
</span>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<div id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-body' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-data'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-body'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>
<b:includable id='main' var='top'>
<!-- posts -->
<div id='content'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<div class='post'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</div>
</b:loop>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
</b:includable>
</b:widget>
</b:section>
</td><!--contentwrapper-->
<td id='sidewrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
(<span class='post-count'><data:i.post-count/></span>)
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy'>► </span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
<div class='sideline'>
<div class='spacer'><img alt='' height='1' src='http://flash.sonypictures.com/movies/spiderman/blogtemplate/style4/images/spacer.gif' width='1'/></div>
</div>
<div class='sideline'>
<div id='visitthesitewrapper'>
<div id='visitthesite'><a href='#'><img alt='Visit the Site' border='0' src='http://flash.sonypictures.com/movies/spiderman/blogtemplate/style4/images/visit_the_site.jpg'/></a></div>
</div>
</div>
<div class='sideline'>
<div class='spideman_vert'><img alt='' src='http://flash.sonypictures.com/movies/spiderman/blogtemplate/style4/images/spiderman_vert.jpg'/></div>
</div>
<div class='splegal'>MARVEL and SPIDER-MAN: TM & 2007 Marvel Characters, Inc. Motion Picture © 2007 Columbia Pictures Industries, Inc. All Rights Reserved. 2007 Sony Pictures Digital Inc. All rights reserved. <a href='http://blogger-templates.blogspot.com/'>blogger templates</a></div>
</td><!--sidewrapper-->
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</tr>
</table>
</div><!--bg2-->
</div><!--bg1-->
</div><!--wrapper-->
</body>
</html>