Showing posts with label XML. Show all posts

Home » Posts filed under XML

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, CSS, XML, JavaScript

Saturday, December 3, 2011

Dalam rangka pembelajaran Ngblog saya akan menuliskan apa yang telah saya pelajari sebagai bahan pengingat kelak ,
Saya berniat belajar HTML, CSS, XML, JavaScript ini di karenakan saya melihat tampilan template orang lain begitu indah dengan berbagai macam gaya dan setelah saya tanya kepada empunya template dia katakan bahwa hanya bermain CSS ,,...ck ck ck Hanya bermain CSS ...!!! seolah -olah CSS begitu mudahnya, tapi setelah saya surfing di google dan sampai disini W3Scools saya melihat banyak sekali tutorial yang bermanfaat buat saya sekaligus bikin pusing kepala .X*
Saya sempat bertanya pada abang sendiri yang sudah lebih dahulu bermain dengan internet (perblogan) dan dia katakan "banyak buka -buka situs tutorial sesuai apa yang saya niatkan untuk belajar" akan saya ingat selalu kata kata beliau (abangku).
Saya akan memulai menuliskan pembelajaran saya mulai dari awal saya belajar sekaligus saya akan copas semua artikel pembelajaran yang saya dapat dari W3Scools atau dari Situs yang lain nya untuk di jadikan bahan pengingat saya .
Sebelumnya saya berdoa dahulu :
Bismilahirrohmanirrohiim

Yaa Allloh Yaa Robb yang maha Pengasih lagi maha penyayang berilah saya ilmu yang bermanfaat di dunia... kelak di akhirat serta berilah saya kemudahan dalam belajar HTML, CSS, XML, JavaScript dan jaukan saya dari sifat takabur ketika engkau sudah memberikan kepandaian pada saya Amin ..Amin...Amin Ya robbal A'lamin.
Dan juga semoga para Sahabat,Agan,Sis, Akang,Om,Tante..turut serta membantu dan mendoakan saya :-)
Tahap pertama saya harus tahu dahulu apa itu HTML, CSS, XML, JavaScript.
Ke-4 serangkai diatas yang menurut para master tidak dapat di pisahakan harus menjadi satu kesatuan agar sebuah Website atau Weblog (blog) menjadi lebih indah

1. HTML ( Hyper Text Markup Language ) ada juga HTML 5

Adalah file teks atau file ASCII yang berisi instruksi/script kepada web browser untuk menampilkan suatu tampilan grafis dari sebuah halaman web. Didalam file HTML terdapat beberapa "tag" atau kode-kode yang dimengerti oleh web browser dan dapat menampilkannya di layar monitor.

File HTML dapat dibuat dengan aplikasi text editor apapun di sistem operasi apapun, antara lain : Notepad di Windows, emasc atau vi di Unix atau SimpleText di Macintosh. File HTML ini juga bisa dibuat di aplikasi word processor apapun asalkan saat menyimpan file tersebut disimpan dengan format text-only.

Salah satu kelebihan file HTML adalah cross platform, artinya file HTML dapat ditampilkan di beberapa Operating System (OS) yang berbeda dan memiliki tampilan yang sama walaupun saat pembuatannya menggunakan satu OS tertentu saja.

Contoh Kode HTML :

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Nanti nya akan menjadi :

My First Heading

My first paragraph.

2. CSS ( Cascading Style Sheets ) ada juga CSS 1, 2, 3

Adalah bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML.

Contoh CSS :

body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}

Ditampikan dengan gabungan HTML dan CSS menjadi

3. XML ( eXtensible Markup Language )

Adalah bahasa pemrogram dimana kata ‘extensible” berarti pengembang dapat mengembangkan kemampuannya. Informasi dalam XML disimpan didalam tag. Markup berarti sebuah bahasa yang dibangun dengan menggunakan tag untuk mengelilinginya atau mark up text.

Di HTML tag didefinisikan dan diterjemahkan oleh browser. Tag akan mengatakan kepada brower untuk memformar object seperti; text, image dan form. Pada XML tidak ada strktur informasi yang disampaikan seperti halnya HTML, sehingga untuk menampilkan informasi diperlukan parser untuk menterjemahkan antara data dan tag.

Contoh XML :

<?xml version="1.0"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

4. JavaScript :

Adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan di browser.

Javascript dipanggil untuk memberikan fungsi pada halaman web dengan meletakannya secara internal pada halaman html diantara tag <script> </script> atau dibuat pada file terpisah ( eksternal ) dan lalu di link menggunakan <link rel=”" href=”"> pada bagian <head>, seperti CSS

Contoh JavaScript :

Untuk Awal saya belajar saya cukupkan saja sampai disini dahulupostinganya,butuh beberapa waktu untuk saya belajar dan mengenal bahasa program diatas karena jujur saya bukan anak IT :-(.
Mudah mudahan atas iringan doa serta bantuan para master yang membaca postingan ini Saya bisa lebih baik lagi.

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, CSS, XML, JavaScript

Saturday, December 3, 2011

My First Heading

Site Info

Followers

Komentar Pembaca