Blogger Newbie

Showing posts with label Belajar HTML. Show all posts

Home » Posts filed under Belajar HTML

Belajar Edit Template

Tuesday, December 6, 2011

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

Letak CSS Di Dalam Template

Sunday, December 4, 2011

Sekarang saya memasuki bagian CSS didalam sebuah template dan saya mau mengenal bagian - bagian CSS sebuah template

STRUKTUR DARI BAGIAN CSS STYLE

Di tutorial ini akan diperlihatkan struktur dari CSS Styling Section, yang
merupakan bagian ke 2 dalam struktur blogger template code.
Sekali lagi, tidaksemua template memiliki struktur yang sama. Itu tergantung style pribadi dari
desainernya. Tapi saya menemukan struktur yang memperlihatkan struktur
yang sangat logis dan banyak memudahkan ketika coding, debugging, dan
customizing template. Sekali lagi, Jika kita bisa mengerti tutorial ini, nanti kita
bisa mengubah desain dan struktur dengan cara yang kita mau. Tapi pertama-
tama kita harus mengerti ini dan di bawah ini ada struktur yang sangat
sederhana untuk dimengerti dan digunakan.

Kita bagi CSS Styling Section menjadi 9 bagian yang lebih kecil. Untuk saat ini
kita akan mempelajari bagian-bagian ini secara umum. Kita akan
mempelajarinya lebih detail mengenai coding di dalam sub-bagian2 ini nanti di
rangkaian tutorial ini. Selalulah mengacu pada struktur blogger template code
untuk membantu kita memahami sub-bagian yang dijelaskan di sini.

Subsection 1 - Variable:

Sub-bagian ini mengandung deklarasi (pengenalan) dari font dan warna
variable yang muncul di bagian Font and Color tab dalam page Layout.
Contohnya Text color atau text font variable yang bisa kita pilih dan ubah
menggunakan font and colors tab. Di dalam template-template yang dibuat
ourbloggertemplate.com, ditambahkan banyak variable (mendekati 40+)
disesuaikan dengan beberapa standard blogger template untuk memudahkan
kita mengatur banyak hal dalam template.

Subsection 2 - Global:

Bagian ini berisikan kode untuk mengontrol Layout dan tampilan umum. Jika
kita melihat kotak hijau d atas, kita akan melihat "body {.....}". ini berarti setiap
kode berada di dalam "{.....}" akan mengontrol property umum (size, layout, dan
tampilan) dari badan template (body/semua yang terlihat di layar komputer).
Sebagai contoh, bagian ini mengontrol lebar dari template dan warna latar
belakang atau gambar. Tapi ini tidak mengatur property detail dalam body
container, contohnya, jika ini mendeklarasikan text font kemudian dalam sub-
bagian memasang kembali property yang sama, property yang diatur dalam
body container akan tidak diperlihatkan atau dibatalkan.

Dalam sub-bagian, kita juga menemukan bagian besar yang penting lainnya-
Outer-wrapper dan content-wrapper- sehingga sub-bagian ini tempat untuk
mengatur bagian-bagian ini.

Subsection 3 - Header:

bagian ini mengatur property di dalam bagian header wrapper. Yang paling
umum adalah Blog Title dan Blog Description. Pada kebanyakan template di
ourblogspottemplate, sudah ditambahkan extra objek pada Header wrapper-
yakni Linkbar (Menubar Horisontal). Biasanya, kita tidak bisa menambah objek
pada header karena tidak bisa menggunakan tab Add Page Element. Untuk
menambahkan linkbar, kita bisa mengubah bagian ke 3 dari template code
struktur ( bagian data). Selain itu Ada juga yang menambahkan Google Search
Bar. Idealnya, kita bisa menambahkan apapun yang kita inginkan jika tahu
bagaimana caranya menggunakan bagian ketiga ini. Ini akan kita lakukan nanti.

Subsection 4 - Main:

Bagian ini mengatur segala property (ukuran, Layout, dan tampilan) dalam
Main -Wrapper, antara lain- Date Header, Posting, Comment, feed link, dan
beberapa widget yang kita tarik ke bagian Main menggunakan tab add page
element.

Subsection 5 - Sidebar:

Bagian ini mengatur property dari segala sesuatu dalam Sidebar-wrapper,
contohnya label, Blog Archieve, adsense, links, dll. Tapi ini tidak mengatur
berapa banyak sidebar yang kita punya atau lokasinya di blog (contoh: template
Sidebar-main-sidebar atau main-sidebar-sidebar). Bagian yang mengatur hal itu
adalah bagian tiga dari struktur blogger template code - yaitu Data Section.

Subsection 6 - Miscellaneous:

Bagian ini mengatur property dari elemen-elemen tambahan yang tidak diatur
oleh bagian-bagian di atas. Elemen tersenut antara lain Profile (about me),
Blockquote, dan kode. Ini berarti jika ingin mengubah warna quoted text atau
font dari nama panggilan di profile, bagian inilah yang perlu diubah.

Subsection 7 - Post-Footer:

Dalam template umum, bagian ini mengatur 3 hal:

1. Post-Footer - text di bawah post body. Ini bagian yang berisikan Informasi
tentang posting, atau text yang berkata "Posted by YourNickname, Labels: ....., 5
Comments, dll.
2. Blog-Pager - Link di bawah posting yang berkata "Newer Posts, Home, atau
Older Posts".
3. Feed-Link - link yang bilang "Subscribe to: Posts (Atom)".

Subsection 8 - Comment:

Bagian ini mengatur property dari bagian Comment di dalam blog.

Subsection 9 - Footer:

Bagian ini mengatur property dalam bagian footer. Pada umumnya, bagian
footer berisikan beberapa text yang menjelaskan kepemilikan atau copyright dari
blog. Dalam beberapa blog, mereka juga meletakkan bagian extra seperti :
Recent Posts atau Popular Posts dalam 2 kolom atau lebih. Pada dasarnya, kita
bisa meletakkan apapun dalam footer seperti dalam sidebar. Tapi jika kita ingin
menambahkan lebih dari 1 kolom di bagian footer, kita harus merombak bagian
ketiga dari struktur blogger template code

Semakin dalam semakin pusing kepala saya dalam belajar hal ini ... tapi Alhamdulilah tidak sepusing waktu pertama saya belajar lebih banyak tahu jadinya dan semakin penasaran .
Saya akan lanjutkan pada psotingan yang lain Ingat ini hasil COPAS yang sudah di edit

Template ? Apa Dan Bagaimana ?

Dengan harapan ingin belajar terus di dalam dunia HTML, CSS, JavaScript dan XML saya cari tutorialnya sampai mana pun maklum saja fakir bukan jebolan IT ,Jadi saya belajar secara otodidak saja .

Dan kali ini pada postingan saya,Mencoba menuliskan kembali apa yang sudah banyak di bahas oleh para master di google tentang Template tapi sesuai dengan gaya saya menulisnya Plus copas sana copas sini itu semua untuk saya pribada umumnya buat yang mamapir di blog ini sukur sukur ada yang mau bantuin agar saya lebih berkembang lagi dalam belajar bahasa Pemrograman
Pernah abang saya berkata " klo mau belajar HTML Atau yang lainnya tentang per website an saya mesti tahu terlebih dahulu tentang Template"

Kata-kata abang saya menjadi sebuah cambuk untuk saya karena saya hanya tahu template jadi saja karena dengan mudah saya dapat download di google tanpa tahu kenapa bisa jadi sebuah bentuk yang indah dari kode kode yang rumitnya bikin pusing kepala X*
Karena hal di atas tadi saya pun kembali googling dan menemukan sebuah tutorial dari awal sampai akhir penciptaan sebuah template dari situs Our Blogger yang salah satu templatenya juga saya pakai :-)

Mengawali Tulisan tentang tempalte saya coba tuliskan sesuai gaya saya pribadi tapi perlu di ingat...!!! bahwa ini hasil COPAS bukan hasil karya sendiri tapi sudah saya edit kalimatnya,Biarlah saya menjadi seorang Plagiant dahulu awalnya, setelah banyak belajar saya tidak akan menjadi seorang plagiant lagi karena saya memang tidak punya basic IT atau apalah namanya yang bisa buat web atau blog .

Sebuah Tempalte memiliki bagian bagian tertentu yang bisa di hilangkan dan di tambah kan sesuai yang punya tempalte itu sendiri

Contoh gambar template secara global :
[template-structure.jpg]

Keterangan :

1. Body: block paling lebar yang merupakan badan dari template (pada dasarnya
semua yang terlihat di layar komputer).

2. Outer-wrapper: kotak ini melapisi bagian template (Body lebih mirip bagian
luar template). Pada umumnya, kita membangun sebuah wrapper untuk
menempatkan beberapa kotak lebih kecil di dalamnya. Kotak-kotak yang paling
umum di dalam outer-wrapper adalah : header, content, dan footer

3. Header: Kotak ini adalah bagian teratas dari blog (namanya sudah
memperlihatkan dengan jelas. Tapi di dalam header kita punya sub-block lain-
Header title block, Header description block, dan lainnya contohnya adsense
banner, menu bar, dll. Jadi, untuk menggabungkan semua sub-block ini dalam
satu kotak besar, kotak paling besar di bagian header biasanya Header-wrapper
yang menggabungkan semua di dalamnya.

4. Content: Di bawah header adalah content wrapper- pada dasarnya ini bagian
terpenting dari semua block. Di dalam wrapper ini ada kotak-kotak sidebar (1,2
atau lebih) dan kotak utama ( main block) yang memuat Post, comment, dan
beberapa iklan.

5. Footer: adalah kotak paling bawah dari template. Seperti bagian header, kita
juga memerlukan Footer wrapper untuk memuat sub-block yang lain di bagian
footer.

6. Main: Main-wrapper adalah kotak paling lebar dalam content wrapper. Di
dalam main-wrapper terdapat Post block, comment block, date header, dan
widget lain yang dibuat dari add page element option.

7. Sidebar: adalah block yang memuat semua side widget- About me, label,
archieve, text, Html and Javascript, adsense, dll. Dalam blogger template
standard, kita sering menemukan satu sidebar saja, oleh karena itu disebut 2-
column template (Main dan sidebar). Tapi sebenarnya mudah menambahkan
banyak kolom sidebar. Yang paling banyak setelah satu sidebar adalah 2 sidebar
atau 3-column template. Kita akan belajar itu nanti. Setelah mempelajari
rangkaian tutorial ini, pertama kita pahami dulu struktur template, nanti akan
terasa mudah menambahkan maupun memindahkan sidebar ke bagian kiri atau
kanan main block.

8. Blog Post: block ini memuat isi terpenting- Judul posting, post, Post author,
label, dll.

Cara lain untuk melihat struktur ini adalah dengan melihat bagian
hierarkis. Dimulai dengan kotak terbesar kemudian kotak-kotak di dalamnya,
strukturnya terlihat seperti bagian di bawah ini :

Body

Outer-wrapper

Header-wrapper

Blog Title

Blog Description

Other widgets

Content-wrapper

Sidebar-wrapper (1,2,3...)

Main-wrapper

Date Header

Posts

Post Title

Post Content (or called Post Body)

Post Footer (Author, Labels, etc)

Comments

Feed Link

Other widgets (mostly ad units)

Footer-wrapper

Footer text (disclaimer, copyrights, etc)

Other widgets

Rupanya begitu saja bentuk daripada template bila di lihat hanya kotak kotak saja dengan masing masing nama dan tempat,tapi saya tidak tahu dengan nama nama yang ada di atas tadi sangat amat asing bukan bahasa englishnya yang saya tidak mengerti tapi bahasa itu untuk apa dan bagaimana menempatkanya kedalam template jadi ?
Bila belajar HTML dan CSS saja saya yakin tidak tahu jadinya apa ? ...template saya nantinya, tanpa tahu harus meletakan kode -kode di dalam template saya nantinya untuk itu saya kembali lagi mempelajari sekaligus copas artikel yang ada untuk saya pelajari.

STRUKTUR BLOGGER TEMPLATE CODE

Gambar di bawah ini menampilkan Struktur Kode Dari Tempalte secara Global

[template-code.jpg]

Keterangan :

Bagian 1: Tampilan kode untuk Header. Pada dasarnya bagian ini mengandung informasi
penting tentang template kode dan judul dari blog. Tapi, yang terpenting, kita
tidak perlu kawatir tentang apapun di bagian ini. Sudah ada header standard
untuk semua template.

Bagian 2: Tampilan CSS singkatan dari Cascading Style
Sheets, bahasa pemrograman web yang digunakan untuk mengatur style
(desain) dari HTML dokumen. Inilah bagian yang harus paling dipahami untuk
memodifikasi template kita sekarang atau membuat template baru. Meskipun ini
merupakan kode pemrograman web, kita masih bisa melakukan banyak hal
pada template kita jika mengerti struktur dari bagian ini tanpa perlu banyak
tahu tentang HTML dan CSS.

Bagian 3 : Tampilan Kode Body (badan) atau data dari kode- bagian paling penting
yang mengambil semua content dari blogger database dan meletakkannya di
bagian yang benar ke dalam blog ketika seseorang melihat blog kita.Ini juga
bagian yang memberitahu blog bagian mana yang muncul duluan- header,
sidebar, Main, Post, Footer, dll. Tapi bagian ini tidak mengatur tampilan blog
dan bagaimana kelihatannya di internet(karena bagian CSS-lah yang punya
peran di sini).

Kesimpulannya :
Jadi sebuah template itu di dalamnya memiliki beberapa bagian yang mana bagian - bagian itu harus di pisahkan dengan kode kode tertentu misalnya Untuk bagian Header kita masukan kode Header tepat di atas bukan di bawah kalau di bawah namnya footer.
Dan untuk melengkapi sebuah template, saya harus memiliki kode - kode untuk bagian-bagian template seperti Body, Outer warpper, Header, Conten, Footer, Main, Sidebar,Dan Blog Post.
Kesemuanya bisa tampil menarik bila di bubuhi oleh kode CSS karena ternyata CSS lah yang menjadi biang indahnya sebuah template akan saya pelajari lagi nanti tentang CSS .

Belajar HTML 2

Saturday, December 3, 2011

Posting lanjutan dari Belajar HTML 1

Element HTML
Adalah segala sesuatu yang dimulai dari Tag Awal dan Tag Akhir

Tag Awal	Element Content	Tag Akhir
<p>	This is a paragraph	</p>
<a href="default.htm" >	This is a link	</a>
<h1>	Heading	</h1>

Jadi kalau di lihat dari table di atas dapat saya simpulkan bahwa segala sesuatunya harus ada kunci(tag) pembuka dan kunci (tag)penutup itu nanti di namakan HTML Element Syntax

Atribut HTML
Adalah Sebuah tambahan kode di dalam Html yang saling berkaitan

Elemen HTML dapat memiliki atribut
Atribut memberikan informasi tambahan tentang elemen
Atribut selalu ditentukan dalam Tag awal
Atribut datang dalam pasangan nama / nilai seperti: Name = "Value"

Contoh :

Disana saya lihat ada atribut di dalam kode Html Setelah Tag < a yaitu href
href itu lah yang dinamakan Atribut

Atribut selalu di dampingi oleh tanda kutip ( " )atau tanda kutip tunggal ( ' )

Contoh :

Masih banyak lagi jenis - jenis atribut yang bisa di pasang kedalam HTML

Contoh Berbagai macam Atribut :

Core Atribut
Tidak berlaku di Base, Head, html, meta, param, script, style, dan Titel elemen.

Attribute	Value	Description
class	classname	Menentukan nama kelas untuk suatu elemen
id	id	Menentukan sebuah id unik untuk elemen
style	style_definition	Menentukan gaya inline untuk suatu elemen
title	tooltip_text	Menentukan tambahan informasi tentang elemen (ditampilkan sebagai tool tip

Language Atributes :
Tidak berlaku di Base, br, frame, frameset,, hr, iframe, param, dan elemen script.

Attribute	Value	Description
dir	ltr rtl	Menentukan arah teks untuk konten dalam elemen
lang	language_code	Menentukan kode bahasa untuk isi dalam suatu elemen. Bahasa kode referensi
xml:lang	language_code	Menentukan kode bahasa untuk isi dalam suatu elemen, dalam dokumen XHTML. Bahasa kode referensi

Keyboard Attributes

Attribute	Value	Description
accesskey	character	Menentukan cara pintas keyboard untuk mengakses suatu elemen
tabindex	number	Menentukan urutan tab dari suatu elemen

Dibawah ini berbagai macam Atribut hasil copas
DTD: menunjukkan di mana HTML 4.01 / DTD XHTML 1.0 tag diperbolehkan.
S = Strict, T = Transisi, dan F = Frameset

Tag Description DTD

 Defines a comment STF
<!DOCTYPE> Defines the document type STF
<a> Defines an anchor STF
<abbr> Defines an abbreviation STF
<acronym> Defines an acronym STF
<address> Defines contact information for the author/owner of a document STF
<applet> Deprecated. Defines an embedded applet TF
<area /> Defines an area inside an image-map STF
<b> Defines bold text STF
<base /> Defines a default address or a default target for all links on a page STF
<basefont /> Deprecated. Defines a default font, color, or size for the text in a page TF
<bdo> Defines the text direction STF
<big> Defines big text STF
<blockquote> Defines a long quotation STF
<body> Defines the document's body STF
<br /> Defines a single line break STF
<button> Defines a push button STF
<caption> Defines a table caption STF
<center> Deprecated. Defines centered text TF
<cite> Defines a citation STF
<code> Defines computer code text STF
<col /> Defines attribute values for one or more columns in a table STF
<colgroup> Defines a group of columns in a table for formatting STF
<dd> Defines a description of a term in a definition list STF
<del> Defines deleted text STF
<dfn> Defines a definition term STF
<dir> Deprecated. Defines a directory list TF
<div> Defines a section in a document STF
<dl> Defines a definition list STF
<dt> Defines a term (an item) in a definition list STF
<em> Defines emphasized text STF
<fieldset> Defines a border around elements in a form STF
<font> Deprecated. Defines font, color, and size for text TF
<form> Defines an HTML form for user input STF
<frame /> Defines a window (a frame) in a frameset F
<frameset> Defines a set of frames F
<h1> to <h6> Defines HTML headings STF
<head> Defines information about the document STF
<hr /> Defines a horizontal line STF
<html> Defines an HTML document STF
<i> Defines italic text STF
<iframe> Defines an inline frame TF
<img /> Defines an image STF
<input /> Defines an input control STF
<ins> Defines inserted text STF
<kbd> Defines keyboard text STF
<label> Defines a label for an input element STF
<legend> Defines a caption for a fieldset element STF
<li> Defines a list item STF
<link /> Defines the relationship between a document and an external resource STF
<map> Defines an image-map STF
<menu> Deprecated. Defines a menu list TF
<meta /> Defines metadata about an HTML document STF
<noframes> Defines an alternate content for users that do not support frames TF
<noscript> Defines an alternate content for users that do not support client-side scripts STF
<object> Defines an embedded object STF
<ol> Defines an ordered list STF
<optgroup> Defines a group of related options in a select list STF
<option> Defines an option in a select list STF
<p> Defines a paragraph STF
<param /> Defines a parameter for an object STF
<pre> Defines preformatted text STF
<q> Defines a short quotation STF
<s> Deprecated. Defines strikethrough text TF
<samp> Defines sample computer code STF
<script> Defines a client-side script STF
<select> Defines a select list (drop-down list) STF
<small> Defines small text STF
<span> Defines a section in a document STF
<strike> Deprecated. Defines strikethrough text TF
<strong> Defines strong text STF
<style> Defines style information for a document STF
<sub> Defines subscripted text STF
<sup> Defines superscripted text STF
<table> Defines a table STF
<tbody> Groups the body content in a table STF
<td> Defines a cell in a table STF
<textarea> Defines a multi-line text input control STF
<tfoot> Groups the footer content in a table STF
<th> Defines a header cell in a table STF
<thead> Groups the header content in a table STF
<title> Defines the title of a document STF
<tr> Defines a row in a table STF
<tt> Defines teletype text STF
<u> Deprecated. Defines underlined text TF
<ul> Defines an unordered list STF
<var> Defines a variable part of a text STF
<xmp> Deprecated. Defines preformatted text

Akhirnya selesai juga ..:-) walau pun postingan ini hasil copas di W3scools tapi lumayan juga editnya hehehe .
Untuk yang berniat dan serius belajar lebih banyak mari bersama saya ke W3Scools untuk belajar bersama ,Saya sempat berfikir tadinya kenapa saya tulis artikel cape -cape lebih baik saya langsung saja belajar ketempatnya baru lah kemudian setelah agak mengerti saya posting artikel tentang apa saja yang sudah saya mengerti tentang HTML .
Oleh karena itu saya sekian kan saja dahulu posting artikel tentang belajar HTML nya Sesuai dengan deskripsi Blog ini yaitu "Blog Ini Adalah Sarana Tuk Berbagi Segala Hal Positif" itulah hal positif yang saya share kembali dari hasil surfing .
Mudah-mudahan ada manfaatnya :-)

Blogger Newbie

Translate

Encode Html / JavaScript

Labels

Entri Populer

Belajar Edit Template

Tuesday, December 6, 2011

Letak CSS Di Dalam Template

Sunday, December 4, 2011

Template ? Apa Dan Bagaimana ?

Belajar HTML 2

Saturday, December 3, 2011

Site Info

Followers

Komentar Pembaca