Belajar Edit Template

Setelah saya belajar banyak dari sobat Google saya mendapatkan banyak pengetahuan, dari sanalah saya bisa meng-edit sebuah template Alhamdulilah.:-)

Sebenarnya banyak yang sudah saya pelajari tapi tidak bisa saya tuliskan disini ,bukan karena tidak mau! saya sendiri bingung mulai dari mana cara menuliskannya ,.
Pada postingan saya yang terdahulu saya mencoba menjelaskan kode kode HTML dan CSS dari sanalah saya berawal, saya banyak bertanya pada kawan-kawan yang sudah lebih dahulu Belajar Edit Tempalte,ada yang berbaik hati memberikan tata caranya ada juga yang pelit (klo saya kategorikan saya belum beruntung) unek2 sedikit gak apa apa kan :-}.

Akhirnya saya mencoba bereksperimen dengan membuat Akun baru Di Blogger dan mengunakan Template Klasik sebagai bahan dasarnya ,Ok saya akan mencoba menuliskan apa saja yang saya kerjakan untuk edit template dan perlu di ingat saya bukan jago apa lagi master :-S jauhhh..... dari itu semua saya hanya menjadikan ini semua sebagai pelajaran saya saja (Arsip Saya).Sedangkan untuk yang mau mengikuti silahkan saja saya akan menjawabnya kalau ada pertanyaan selama itu masih di dalam kebisaan saya

Cara pertama saya Daftar ke Blogger.Com , Kemudian saya memilih Template klasik
Tapi saya menemukan sebuah Template yang Bagus untuk memulai Belajar Edit Template
Silahkan di Copas File Template ini kalau mau

<?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[

/* ************ START OF CSS STYLING ************ */

/* -------------------------------------------------------
Blogger Template Design: Untuk Belajar Desain Template
Blogger Newbie : http://blognewbie77.blogspot.com
Untuk mengetahu lebih jelas tentang template ini kunjungi :
http://blognewbie77.blogspot.com/search/label/Belajar%20HTML
------------------------------------------------------- */

/* Variable definitions
========================
<Variable name="bodybgColor" description="Body Background Color"
type="color" default="#D0FC5D" value="#D0FC5D">
<Variable name="contentbgColor" description="Content Background Color"
type="color" default="#D5D600" value="#D5D600">
<Variable name="headerbgColor" description="Header Background Color"
type="color" default="#6060FF" value="#6060FF">
<Variable name="mainbgColor" description="Main Background Color"
type="color" default="#077401" value="#077401">
<Variable name="postbgColor" description="Post Background Color"
type="color" default="#000000" value="#000000">
<Variable name="commentbgColor" description="Comment Background Color"
type="color" default="#333333" value="#333333">
<Variable name="sidebar1bgColor" description="Sidebar1 Background Color"
type="color" default="#A80000" value="#A80000">
<Variable name="sidebar2bgColor" description="Sidebar2 Background Color"
type="color" default="#FF8001" value="#FF8001">
<Variable name="footerbgColor" description="Footer Background Color"
type="color" default="#000074" value="#000074">

<Variable name="blogTitleColor" description="Blog Title Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="blogDescriptionColor" description="Blog Description Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="postTitleColor" description="Post Title Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="textColor" description="Text Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="blogQuoteColor" description="Blog Quote Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="mainLinkColor" description="Link Color"
type="color" default="#ddddff" value="#ddddff">
<Variable name="mainHoverLinkColor" description="Hover Link Color"
type="color" default="#ffdddd" value="#ffdddd">

<Variable name="sidebarHeaderColor" description="Sidebar Header Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="sidebarTextColor" description="Sidebar Text Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="sidebarLinkColor" description="Sidebar Link Color"
type="color" default="#ddddff" value="#ddddff">
<Variable name="sidebarHoverLinkColor" description="Sidebar Hover Link Color"
type="color" default="#ffdddd" value="#ffdddd">
<Variable name="postfooterTextColor" description="Post-Footer Text Color"
type="color" default="#aaaaaa" value="#aaaaaa">
<Variable name="postfooterLinkColor" description="Post-Footer Link Color"
type="color" default="#dddddd" value="#dddddd">
<Variable name="commentTextColor" description="Comment Text Color"
type="color" default="#555555" value="#777777">
<Variable name="footerTextColor" description="Footer Text Color"
type="color" default="#dddddd" value="#dddddd">

<Variable name="blogTitleFont" description="Blog Title Font"
type="font"
default="normal bold 250% 'bolts sf','commerce sf bold',georgia,Times, serif"
value="normal bold 248% 'bolts sf','commerce sf bold',Georgia, Times, serif">
<Variable name="blogDescriptionFont" description="Blog Description Font"
type="font"
default="normal normal 120% impact,'commerce sf bold',verdana,Georgia, serif"
value="normal normal 120% impact,'commerce sf bold',verdana,Georgia, serif">
<Variable name="dateHeaderFont" description="Date Header Font"
type="font"
default="normal normal 95% verdana,tahoma,garamond,helvetica,Sans-serif"
value="normal normal 104% verdana,tahoma,garamond,helvetica,Sans-serif">
<Variable name="postTitleFont" description="Post Title Font"
type="font"
default="normal bold 130% georgia,verdana,'Trebuchet MS',cambria,Sans-serif"
value="normal bold 130% georgia,verdana,'Trebuchet MS',cambria,Sans-serif">
<Variable name="textFont" description="Text Font"
type="font"
default="normal normal 75% verdana,arial,times,'Trebuchet MS',Sans-serif"
value="normal normal 75% verdana,arial,times,'Trebuchet MS',Sans-serif">
<Variable name="quoteFont" description="Blog Quote Font"
type="font"
default="italic normal 100% verdana,arial,times,'Trebuchet MS',Sans-serif"
value="italic normal 100% verdana,arial,times,'Trebuchet MS',Sans-serif">
<Variable name="sidebarHeaderFont" description="Sidebar Header Font"
type="font"
default="normal bold 110% verdana,tahoma,Times,'Arial Black',Times,Arial,Verdana"
value="normal bold 121% verdana,tahoma,Times,'Arial Black',Times,Arial,Verdana">
<Variable name="sidebarTextFont" description="Sidebar Text Font"
type="font"
default="normal normal 72% verdana,arial,times,'Trebuchet MS',Sans-serif"
value="normal normal 72% verdana,arial,times,'Trebuchet MS',Sans-serif">
<Variable name="postfooterTextFont" description="Post-Footer Text Font"
type="font"
default="normal normal 95% verdana,tahoma,garamond,helvetica,Sans-serif"
value="normal normal 95% verdana,tahoma,garamond,helvetica,Sans-serif">
<Variable name="commentTextFont" description="Comment Text Font"
type="font"
default="normal normal 100% tahoma,garamond,helvetica,Sans-serif"
value="normal normal 100% tahoma,garamond,helvetica,Sans-serif">
<Variable name="footerTextFont" description="Footer Text Font"
type="font"
default="normal normal 80% tahoma,garamond,helvetica,Sans-serif"
value="normal normal 80% tahoma,garamond,helvetica,Sans-serif">
*/

/* ----- GLOBAL ----- */

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 800px;
text-align: center;
color: $textColor;
background: $bodybgColor;
font-family: verdana,helvetica,tahoma,arial,Sans-serif;
font-size: 100%;
}

#outer-wrapper {
margin: 0 auto; /* to make the template lays in the screen center */
padding: 0px 0px 0px 0px;
min-width: 800px;
max-width: 800px;
}

#content-wrapper {
position: relative;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
min-width: 800px;
max-width: 800px;
background: $contentbgColor;
}

.clear {
clear: both;
line-height: 0;
height: 0;
}

/* global link attributes */
a, a:visited {
color: $mainLinkColor;
text-decoration: none;
}

a:hover {
text-decoration: underline;
color: $mainHoverLinkColor;
}

/* ----- HEADER ----- */

#header-wrapper {
position: relative;
height: 1%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 800px;
max-width: 800px;
background: $headerbgColor;
}

#header {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 800px;
max-width: 800px;
}

#header h1 {
display: block;
margin: 0px 0px 0px 0px;
padding: 10px 0px 0px 0px;
color: $blogTitleColor;
font: $blogTitleFont;
}

#header h1 a {
text-decoration: none;
color: $blogTitleColor;
}

#header h1 a:hover {
text-decoration: none;
}

#header .description {
display: block;
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 0px;
color: $blogDescriptionColor;
font: $blogDescriptionFont;
}

#header a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

/* ----- MAIN ----- */

#main-wrapper {
display: inline; /* handles IE margin bug */
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 400px;
max-width: 400px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 400px;
max-width: 400px;
background: $mainbgColor;
color: $textColor;
font: $textFont;
}

#main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

h2.date-header {
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
text-align: left;
color: $dateHeaderColor;
font: $dateHeaderFont;
}

.date-header span {
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 10px;
}

.post {
margin: 0px 20px 0px 20px;
padding: 0px 20px 0px 20px;
line-height: 1.5em;
text-align: left;
background: $postbgColor;
}

.post h3 {
margin: 0px 0px 0px 0px;
padding: 10px 0px 0px 0px;
color: $postTitleColor;
font: $postTitleFont;
text-decoration: underline;
}

.post h3 a, .post h3 a:visited {
color: $postTitleColor;
font: $postTitleFont;
font-variant: small-caps;
text-decoration: none;
}

.post-body p {
/* Fix bug in IE5/Win with italics in posts */
margin: 0px 0px 0px 0px;
padding: 10px 0px 0px 0px;
height: 1%;
overflow: visible;
}

.post ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 50px;
list-style-type: disc;
line-height: 1.6em;
}

.post ol {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 50px;
line-height: 1.6em;
}

.post li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 5px;
line-height: 1.6em;
}

a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

/* ----- SIDEBAR ----- */

.sidebar-wrapper {
display: inline; /* handles IE margin bug */
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

.sidebar {
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
min-width: 180px;
max-width: 180px;
text-align: left;
color: $sidebarTextColor;
font: $sidebarTextFont;
}

#sidebar1 {
background: $sidebar1bgColor;
}

#sidebar2 {
background: $sidebar2bgColor;
}

.sidebar .widget {
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 0px;
}

#sidebar1 .widget {
}

#sidebar2 .widget {
}

.sidebar .BlogArchive {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

/* sidebar heading */

.sidebar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $sidebarHeaderColor;
font: $sidebarHeaderFont;
}

.sidebar #BlogArchive1 h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.sidebar ul {
margin: 0px 0px 0px 0px;
padding: 0px 20px 0px 20px;
list-style-type: disc;
line-height: 1.4em;
}

.sidebar li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.sidebar a, .sidebar a:visited {
color: $sidebarLinkColor;
}

.sidebar a:hover {
text-decoration: underline;
color: $sidebarHoverLinkColor;
}

.sidebar a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

/* ----- PROFILE ----- */

#Profile1 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $sidebarTextColor;
}

#Profile1 h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.profile-img a img {
display: block;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
clear: both;
}

.profile-textblock {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
clear: both;
color: $sidebarHeaderColor;
}

.profile-data {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
letter-spacing:.1em;
font-weight: bold;
line-height: 1.6em;
}

.profile-datablock {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.profile-link {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

/* ----- BLOGQUOTE ----- */

blockquote {
margin: 20px 20px 20px 20px;
padding: 0px 0px 0px 0px;
color: $blogQuoteColor;
font: $quoteFont;
line-height: 1.5em;
}

/* ----- CODE ----- */

.code {
color: $postTitleColor;
}

/* ----- POST-FOOTER ----- */

.post-footer {
display: block;
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 0px;
text-align: left;
font: $postfooterTextFont;
color: $postfooterTextColor;
font-weight: normal;
}

.post-footer-line {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-footer a {
color: $postfooterLinkColor;
}

.post-footer a:hover {
text-decoration: none;
color: $mainHoverLinkColor;
}

.post-footer .post-comment-link a {
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 10px;
border-left: 1px solid $postfooterLinkColor;
border-right: 1px solid $postfooterLinkColor;
font-weight: bold;
}

.post-footer .post-comment-link a:hover {
text-decoration: none;
color: $mainHoverLinkColor;
}

#blog-pager {
margin: 0px 0px 0px 0px;
padding: 10px 20px 0px 20px;
text-align: center;
}

#blog-pager-newer-link {
float: left;
margin: 0px 0px 0px 0px;
padding: 10px 10px 0px 10px;
}

#blog-pager-older-link {
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.feed-links {
margin: 0px 0px 0px 0px;
padding: 10px 20px 10px 20px;
clear: both;
line-height: 1.5em;
text-align: left;
color: $textColor;
}

.feed-links a {color: $mainLinkColor}
.feed-links a:hover {color: $mainHoverLinkColor}

/* ----- COMMENT ----- */

#comments {
margin: 20px 20px 0px 20px;
padding: 20px 20px 20px 20px;
text-align: left;
background: $commentbgColor;
color: $commentTextColor;
font: $commentTextFont;
}

#comments a {
color: $mainLinkColor;
}

/* comment-header */
#comments h4 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $postTitleColor;
font-weight: bold;
}

.deleted-comment {
font-style:italic;
color:gray;
}

.comment-author {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $mainLinkColor;
}

.comment-body p {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 1.4em;
}

#comments ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: disc;
}

#comments li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

a.comment-link {
/* ie5.0/win doesn't apply padding to inline elements,
so we hide these two declarations from it */
padding-left: 0px;
}

html>body a.comment-link {
/* respecified, for ie5/mac's benefit */
padding-left: 0px;
}

/* ----- FOOTER ----- */

#footer-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 800px;
max-width: 800px;
background: $footerbgColor;
}

#footer {
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
text-align: center;
color: $footerTextColor;
font: $footerTextFont;
line-height: 1.2em;
}

#footer h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
font-size: 100%;
font-weight: bold;
}

#footer .widget {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.footer a {
color: $mainHoverLinkColor;
}

/* ************ END OF CSS STYLING ************ */

/** Page structure tweaks for layout editor wireframe */

body#layout #main,
body#layout #sidebar {
padding: 0;
}
]]></b:skin>
</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Generic Template (Header)' type='Header'>
<b:includable id='main'>

<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>

<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</div>
<b:else/>

<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-repeat: no-repeat; " + "width: " + data:width + "px; " + "height: " + data:height + "px;"' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</div>
</b:if>
<b:else/>

<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>

<div id='content-wrapper'>

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:team == "true"'> 
<ul>
<b:loop values='data:authors' var='i'>
<li><a expr:href='data:i.userUrl'><data:i.display-name/></a></li>
</b:loop>
</ul>

<b:else/> 

<b:if cond='data:photo.url != ""'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
</b:if>

<dl class='profile-datablock'>
<dt class='profile-data'><data:displayname/></dt>

<b:if cond='data:showlocation == "true"'>
<dd class='profile-data'><data:location/></dd>
</b:if>

<b:if cond='data:aboutme != ""'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
</dl>
<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

<div id='main-wrapper'>
<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'>
<div class='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 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>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> 
</div>
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'><span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span> <span class='post-timestamp'>
<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> <span class='post-comment-link'>
<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>
</span> <span class='post-icons'>

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


<b:include data='post' name='postQuickEdit'/>
</span> </p>

<p class='post-footer-line post-footer-line-2'><span class='post-labels'>
<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> </p>

<p class='post-footer-line post-footer-line-3'/>
</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='feedLinks'>
<b:if cond='data:blog.pageType != "item"'> 
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

<b:else/> 
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</b:loop>
</div>
</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='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</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 class='comments' 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-author' 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-body'>
<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-footer'>
<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'>

<div class='blog-posts'>

<b:include data='top' name='status-message'/>

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
<data:adEnd/>
</div>


<b:include name='nextprev'/>


<b:include name='feedLinks'/>
</b:includable>
</b:widget>
</b:section>
</div>

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' 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='Categories' 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>


<div class='clear'> </div>

</div> 

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='Generic Template' type='Text'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>

<p style='text-align:right;margin:0px 0px 0px 0px'>
<a href='Url Kamu' style='font-family:verdana,helvetica;font-size:70%;color:#a00000'>Edit 2011</a></p>

</div></div> 

</body>
</html>

Kalau anda membaca pada postingan saya yang terdahulu pastilah anda tahu bentuknya dari template ini silahkan baca Template ? Apa Dan Bagaimana ?

Akhirnya dengan penuh semangat 11 bukan 45 itu tahun kakek saya ;-D saya masukan File Template diatas kedalam akun Blogger saya yang baru
tampilanya sangat sederhana tanpa embel embel yang memusingkan saya hanya kotak kotak berwarna dengan masing masing tempat,pokoknya sangat baik sekali untuk saya gunakan dalam Belajar Edit Template.
Untuk meng edit Template saya sering bulak balik ke situs penulis Tutorial dari mulai Tutorial Html,Tutorial CSS, Tutorial JavaScript dlsb.
Dan dalam tahap ini saya tidak lupa untuk selalu meng-clic Expand Widget Templates pada menu layout blogger, Saya masukan kode-kode yang sudah saya dapat sesuai dengan keinginan saya dalam men-edit Template contohnya saya mau meng- Edit Header saya maka saya cari kode CSS untuk Header

I/* ----- HEADER ----- */

#header-wrapper {
position: relative;
height: 1%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 800px;
max-width: 800px;
background: $headerbgColor;
}

#header {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 800px;
max-width: 800px;
}

#header h1 {
display: block;
margin: 0px 0px 0px 0px;
padding: 10px 0px 0px 0px;
color: $blogTitleColor;
font: $blogTitleFont;
}

Dlsb .........

Kemudian baru saya Edit apa yang mau saya edit misalnya Width Header atau Height Header, lantas saya coba Preview kalau hasilnya sesuai baru saya Save Template nya

Dalam Belajar Edit Template saya selalu saja menemukan banyak kendala ada yang terlalu kepinggir atau terlalu rapat bahkan yang Exstrem Template saya jadi Blank gak ada tampilan apa apa X* untuk itulah gunanya meng-clic Expand Widget Templates dan Preview jadi kalau saya gagal saya bisa kembalikan kebentuk aslinya Tempalte yang di atas tadi

Intinya dalam Belajar Edit Template saya harus tahu letak dan fungi daripada kode-kode di dalam Template saya ( harus betul -betul paham) ingat jangan Kode Template orang lain yang di ingat XD.

Saya sudahkan dahulu postingan kali ini nanti saya akan tuliskan lagi hasil yang lain dalam meng Edit Template , .
Doakan saya agar saya bisa dan mengerti dalam Belajar Edit Template

5 comments:

Outbound Malang said... Reply Comment: berkunjung sob..salam blogger
sukses selalu ..:); December 7, 2011 at 9:29 AM
Al Fakir said... Reply Comment: @Outbound Malang:
thnks kunjungannya saya akan berkunjung ballik; December 15, 2011 at 7:14 PM
Bloklnya anak brondong said... Reply Comment: mas tolong bantuannya
di dalam blok mas paling ats saya lihat ada yang namanya : home kabar berita donlod dsb.
kllo yang itu di blogger namanya pa ya bro
saya juga mau belajar ama om google biar gampang searchingnya

TOLONG BALASANNYA KE sini ea alirusman@rocketmail.com; March 7, 2012 at 7:16 PM
Al Fakir said... Reply Comment: @Bloklnya anak brondong:Namanya Menu navigasi mas thnks dah berkunjung; April 13, 2012 at 8:04 PM
Bahrudin said... Reply Comment: membantu sekali, saya masih pemula banget, jadi tambah wawasan. kenapa dari dulu saya tidak berkunjung ke blog ini. Don't vorget to visit my blog. Ok!; December 24, 2012 at 6:58 AM

Blogger Newbie

Translate

Encode Html / JavaScript

Labels

Entri Populer

Belajar Edit Template

Tuesday, December 6, 2011

Artikel Yang Berhubungan

5 comments:

Post a Comment

Site Info

Followers

Komentar Pembaca