Buat Blog Kayak Punya Ku (Part 2)

====================
OK Class, we will continue our last part... Halah,,, he3x,,,

Mengubah background gambar dan background warna

Hmm, gmn ya,,, Langsung aja deh, dr kode-kode yang dulu pada Part 1 sudah kita paste kan, Selanjutnya mempelajari, kode2 tersebut, sehingga kita bisa memodifikasinya, tidak hanya background dan warna, namun juga segala tetek bengek yang ada, halah,,, he3x,,,
Sebenarnya blogger sudah menyediakan fasilitas Edit Font and Color, tp ya cmn sejauh Font and Color,..
Nah gambar blog di atas adalah blog yang sudah diotak-atik dari asal template yg sebenarnya:

<?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'" b="'http://www.google.com/2005/gml/b'" data="'http://www.google.com/2005/gml/data'" 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[ /* --- * Blogger Template Style---- * Name: Girl 3-column----- *Designer: J.aghili ----- * URL: www.finalsense.com ------ * Date: December 2007 ----- */ /* Variable definitions ==================== <variable name="textcolor" description="Text Color" type="color" default="#666"> <variable name="PageBgColor" description="Page Background Color" type="color" default="#515F6C"> <variable name="pagetitlecolor" description="Page Header Color" type="color" default="#ffc"> <variable name="datecolor" description="Date Header Color" type="color" default="#ccc"> <variable name="titlecolor" description="Post Title Color" type="color" default="#f93"> <variable name="titlehovercolor" description="Post Title Hover Color" type="color" default="#80aad5"> <variable name="footercolor" description="Post Footer Color" type="color" default="#E4B181"> <variable name="sidebartextcolor" description="Sidebar Text Color" type="color" default="#80aad5"> <variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#80aad5"> <variable name="sidebarlink" description="Sidebar Link Color" type="color" default="#80aad5"> <variable name="sidebarhover" description="Sidebar Hover Color" type="color" default="#369"> <variable name="linkcolor" description="Link Color" type="color" default="#80aad5"> <variable name="linkhover" description="Link Hover Color" type="color" default="#f93"> <variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#80aad5"> <variable name="descriptioncolor" description="Description Color" type="color" default="#fff"> <variable name="Commentscolor" description="Comments Text Color" type="color" default="#666"> <variable name="bodyfont" description="Text Font" type="font" default="normal normal 83% Verdana, sans-serif"> <variable name="pagetitlefont" description="Page Header Font" type="font" default="normal bold 340% 'Times New Roman','Georgia'"> <variable name="titlefont" description="Post Title Font" type="font" default="normal bold 105% 'Times New Roman','Georgia'"> <variable name="sidebarheaderfont" description="Sidebar Title Font" type="font" default="normal bold 135% 'Times New Roman','Georgia'"> <variable name="sidebarfont" description="Sidebar Text Font" type="font" default="normal normal 91% 'Verdana','Arial'"> <variable name="descriptionfont" description="Description Font" type="font" default="normal normal 86% 'Verdana','Arial'"> */ /* ---( page defaults )--- */ body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background:$PageBgColor} blockquote { margin: 0 0 0 30px; padding: 10px 0 0 20px; font-size: 88%; line-height: 1.5em; } blockquote p { margin-top: 0; } abbr, acronym { cursor: help; font-style: normal; } code { color: #f63; } hr { display: none; } img { border: none; } /* unordered list style */ ul { list-style: none; margin-left: 10px; padding: 0; } li { list-style: none; padding-left: 14px; margin-bottom: 3px; } /* links */ a:link { color: $linkcolor; text-decoration: none; } a:visited { color: $visitedlinkcolor; text-decoration: none; } a:hover { color: $linkhover; text-decoration: none; } a:active { color: $visitedlinkcolor; text-decoration: none; } /* ---( layout structure )---*/ #outer-wrapper { width: 920px; margin: 0px auto 0; text-align: justify; } #content-wrapper { margin-left: 0px; /* to avoid the border image */ width: 100%; } #main { float: left; width: 418px; margin:0px 5px; padding: 0px 0px 0px 14px; line-height: 1.5em; 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 { float: left; width:200px; padding-left:30px; font-size: 85%; color: $sidebartextcolor; line-height: 1.4em; 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 */ } #ads-wrapper {float:right; width:200px; padding-right:43px; 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 */} #ads{font-size: 100%; color: $sidebartextcolor; padding: 0px; } #center {background:#fff url('http://lh5.google.com/jvdmds/R19kSLoNgUI/AAAAAAAABA8/HMBTgSkGmoI/girl-b.jpg') repeat-y top left;} /* ---( header and site name )--- */ #header-wrapper { margin: 0; } #header { margin: 0; height:306px; width:920; color: $pagetitlecolor; background: url('http://lh6.google.com/jvdmds/R19jmboNgOI/AAAAAAAAA_0/sGxVe9K5xTc/girl-a.jpg') no-repeat top left; overflow: hidden} #header h1 { width:630px; font: $pagetitlefont; margin:120px 40px 5px 50px; padding:5px; filter: glow(color=#000000,Strength=5); text-align:left;} #header h1 a { text-decoration: none; color: $pagetitlecolor; } #header h1 a:hover { color: $descriptioncolor; } #header .description { margin:-10px 5px 5px 50px; width:630px; text-align:left; font: $descriptionfont; color: $descriptioncolor; } /* ---( main column )--- */ h2.date-header {font-size: 70%; color: $datecolor; margin:0px; text-align: left;} .post h3 {text-align: left; font: $titlefont; color: $titlecolor; border-top: 1px solid #f93; border-bottom: 1px solid #f93;} .post {padding:0px;} .post h3 a {color: $titlecolor; text-decoration: none;} .post h3 a:hover {color: $titlehovercolor; text-decoration: none;} .post-footer {height:30px; margin:0px; text-align: right; font-size: 88%; color:$footercolor;} .post img {padding: 6px; border-top: 1px solid #ddd; border-left: 1px solid #ccc; border-bottom: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; } .feed-links {clear: both; line-height: 2.5em; color:$footercolor; border-top: 1px solid #f93;} .blog-feeds {text-align: right; color:$footercolor;} #blog-pager-newer-link {float: left} #blog-pager-older-link {float: right} #blog-pager {text-align: center} /* comment styles */ #comments { padding-top: 10px; font-size: 95%; line-height: 1.5em; color: $Commentscolor; } #comments h4 { margin: 5px 0px; padding: 2px 0 0 20px; font-family: "Lucida Grande", "Trebuchet MS"; font-size: 110%; color: $Commentscolor; height: 30px !important; /* for most browsers */ height /**/:37px; /* for IE5/Win */ } #comments ul { margin-left: 0; } #comments li { background: none; padding-left: 0; } .comment-body { padding: 0 10px 0 25px; } .comment-body p { margin-bottom: 0; } .comment-author { margin: 4px 0 0 0; padding: 0 10px 0 60px; color: #999; } .comment-footer { border-bottom: 1px solid #ddd; padding-bottom: 1em;} .deleted-comment { font-style:italic; color:gray; } /* ---( sidebar )--- */ .sidebar h2 { margin: 0 0 0 0; padding: 10px 0 0 0px; font: $sidebarheaderfont; color: $sidebarcolor; height: 32px !important; /* for most browsers */ height /**/:57px; /* for IE5/Win */ } .sidebar .widget { margin: 0; padding: 0 0 5px 10px;} .sidebar a {color: $sidebarlink; text-decoration: none;} .sidebar a:hover {color: $sidebarhover; } .sidebar li { background: 0 5px; } .profile-textblock {margin-left: 3px;} .profile-img {float:left; margin:5px; border: 1px solid #ddd; padding: 4px;} /* ---( footer )--- */ .clear { /* to fix IE6 padding-top issue */ clear: both;} #footer-wrapper {margin: 0px; padding:0px; font-size: 77%; clear: both;} #footer {margin: 0; width:920px; height:116px; background: url('http://lh4.google.com/jvdmds/R19jm7oNgPI/AAAAAAAAA_8/bXHmNHPGjt0/girl-c.jpg') no-repeat top left; text-align:center; color: #eddeb5} #footer-wrapper a {color: #eddeb5; text-decoration: none; line-height:62px} #footer-wrapper a:hover{color: #fff; text-decoration: none;} /** Page structure tweaks for layout editor wireframe */ body#layout #outer-wrapper, body#layout #main, body#layout #sidebar { padding-top: 0; margin-top: 0;} body#layout #outer-wrapper,body#layout #content-wrapper { padding:0px} body#layout #sidebar { margin-right: 0; margin-bottom: 1em; } body#layout #header,body#layout #footer, body#layout #main { padding: 0; } body#layout #content-wrapper { margin: 0px; } #navbar-iframe { height:0px; visibility:hidden; display:none } ]]> </b:skin> </head> <body> <div id="'outer-wrapper'"> <div id="'wrap2'">  <a href="'#main'" shape="'rect'">skip to main</a> | <a href="'#sidebar'" shape="'rect'">skip to sidebar</a> <div id="'header-wrapper'"> <b:section class="'header'" id="'header'" maxwidgets="'1'" showaddelement="'no'"> <b:widget id="'Header1'" locked="'true'" title="'Wordpress" type="'Header'/"> </b:section> </div> <div id="'center'"> <div id="'content-wrapper'"> <div id="'sidebar-wrapper'"> <b:section class="'sidebar'" id="'sidebar'" preferred="'yes'"> <b:widget id="'Profile1'" locked="'false'" title="'About" type="'Profile'/"> <b:widget id="'BlogArchive1'" locked="'false'" title="'Blog" type="'BlogArchive'/"> </b:section> </div> <div id="'main-wrapper'"> <b:section class="'main'" id="'main'" showaddelement="'yes'"> <b:widget id="'Blog1'" locked="'false'" title="'Blog" type="'Blog'"> </b:section> </div> <div id="'ads-wrapper'"> <b:section class="'sidebar'" id="'ads'" preferred="'yes'"> <b:widget id="'Label1'" locked="'false'" title="'Ads'" type="'Label'"> <b:widget id="'HTML1'" locked="'false'" title="'Text-Ads'" type="'HTML'"> <b:widget id="'HTML2'" locked="'false'" title="'Links'" type="'HTML'"> <b:widget id="'HTML3'" locked="'false'" title="'Feeds'" type="'HTML'"> </b:section> </div>  <div class="'clear'"> </div> </div>  </div>  <div class="'footer" id="'footer'"><div id="footer-wrapper"> Design by: <a title="Blogger Templates" href="http://www.finalsense.com/services/blog_templates/" shape="rect">FinalSense</a> </div> </div> </div> </div> </body> </html>

Wah2 aku buat textarea kok jadinya ga keruan ya??? Whatever lah.. Lanjut.....

Tadinya seperti kode2 di atas, lalu aku ubah jadi :

<?xml version="1.0" encoding="UTF-8" ?><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns="'http://www.w3.org/1999/xhtml'" b="'http://www.google.com/2005/gml/b'" data="'http://www.google.com/2005/gml/data'" expr="'http://www.google.com/2005/gml/expr'"><br />  <head><br />    <b:include data="'blog'" name="'all-head-content'/"><br />    <title><data:blog.pagetitle/></title><br />    <b:skin><![CDATA[ /* --- * Blogger Template Style---- * Name: Girl 3-column----- *Designer: J.aghili ----- * URL: www.finalsense.com ------ * Date: December 2007 -----  Edited by : Ly_Le2 http://LynSide.blogspot.com*/ /* Variable definitions    ====================    <variable name="textcolor" description="Text Color" type="color" default="#666" value="#e6e6e6"><br />             <br />   <variable name="PageBgColor" description="Page Background Color" type="color" default="#515F6C" value="#660000"><br /><br />   <variable name="pagetitlecolor" description="Page Header Color" type="color" default="#ffc" value="#66B5FF"><br /><br />   <variable name="datecolor" description="Date Header Color" type="color" default="#ccc" value="#80aad5"><br /><br />   <variable name="titlecolor" description="Post Title Color" type="color" default="#f93" value="#b3daff"><br /><br />    <variable name="titlehovercolor" description="Post Title Hover Color" type="color" default="#80aad5" value="#e1771e"><br />             <br />   <variable name="footercolor" description="Post Footer Color" type="color" default="#E4B181" value="#E4B181"><br /><br />   <variable name="sidebartextcolor" description="Sidebar Text Color" type="color" default="#80aad5" value="#000000"><br /><br />   <variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#80aad5" value="#cc0000"><br />             <br />   <variable name="sidebarlink" description="Sidebar Link Color" type="color" default="#80aad5" value="#e1771e"><br />             <br />   <variable name="sidebarhover" description="Sidebar Hover Color" type="color" default="#369" value="#336699">          <br /><br />   <variable name="linkcolor" description="Link Color" type="color" default="#80aad5" value="#80aad5"><br /><br />   <variable name="linkhover" description="Link Hover Color" type="color" default="#f93" value="#ff9933"><br />             <br />   <variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#80aad5" value="#00663a"><br />             <br />   <variable name="descriptioncolor" description="Description Color" type="color" default="#fff" value="#ffffff"><br /><br />   <variable name="Commentscolor" description="Comments Text Color" type="color" default="#666" value="#ffff66">   <br />             <br />   <variable name="bodyfont" description="Text Font" type="font" default="normal normal 83% Verdana, sans-serif" value="normal normal 91% Verdana, sans-serif"><br /><br />   <variable name="pagetitlefont" description="Page Header Font" type="font" default="normal bold 340% 'Times New Roman','Georgia'" value="italic bold 497% 'Times New Roman','Georgia'"><br /><br />   <variable name="titlefont" description="Post Title Font" type="font" default="normal bold 105% 'Times New Roman','Georgia'" value="normal bold 155% 'Times New Roman','Georgia'"><br /><br />   <variable name="sidebarheaderfont" description="Sidebar Title Font" type="font" default="normal bold 135% 'Times New Roman','Georgia'" value="normal bold 149% 'Times New Roman','Georgia'"><br />       <br />       <variable name="sidebarfont" description="Sidebar Text Font" type="font" default="normal normal 91% 'Verdana','Arial'" value="normal bold 133% Arial, sans-serif">      <br />         <br />   <variable name="descriptionfont" description="Description Font" type="font" default="normal normal 86% 'Verdana','Arial'" value="normal normal 86% 'Verdana','Arial'"><br />*/<br /><br />/* ---( page defaults )--- */<br />body {  margin: 0px;  padding: 0px;  text-align: left; font:$bodyfont; color:$textcolor; background:$PageBgColor}<br />blockquote {  margin: 0 0 0 30px;  padding: 10px 0 0 20px;  font-size: 88%;  line-height: 1.5em; }<br />blockquote p {  margin-top: 0;  }<br />abbr, acronym {  cursor: help;  font-style: normal;  }<br />code {  color: #f63;  }<br />hr {  display: none;  }<br />img {  border: none;  }<br /><br />/* unordered list style */<br />ul {  list-style: none;  margin-left: 10px;  padding: 0;  }<br />li {  list-style: none;  padding-left: 14px;  margin-bottom: 3px;  }<br /><br />/* links */<br />a:link {  color: $linkcolor; text-decoration: none;  }<br />a:visited {  color: $visitedlinkcolor; text-decoration: none;  }<br />a:hover {  color: $linkhover; text-decoration: none;  }<br />a:active { color: $visitedlinkcolor; text-decoration: none;  }<br /><br />/* ---( layout structure )---*/<br />#outer-wrapper {  width: 920px;  margin: 0px auto 0;   text-align: justify; }<br />#content-wrapper {  margin-left: 0px;  /* to avoid the border image */  width: 100%;  }<br />#main {  float: left;  width: 418px;  margin:0px 5px; padding: 0px 0px 0px 14px;  line-height: 1.5em;  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 */  }<br />#sidebar { float: left;  width:200px;  padding-left:30px;  font-size: 85%;  color: $sidebartextcolor; line-height: 1.4em;  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 */  }<br />#ads-wrapper {float:right; width:200px; padding-right:43px;  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 */}<br />#ads{font-size: 100%; color: $sidebartextcolor; padding: 0px; }<br />#center {background:#000000 url('http://img21.imageshack.us/img21/9536/bodyehg.jpg') repeat-y top center;}<br /><br />/* ---( header and site name )--- */<br />#header-wrapper {  margin: 0;  }<br />#header { margin: 0; height:250px; width:1000; color: $pagetitlecolor;   background: url('http://img11.imageshack.us/img11/1972/headergxl.jpg') no-repeat top center; overflow: hidden}<br />#header h1 { width:630px; font: $pagetitlefont; margin:120px 40px 5px 50px; padding:5px; filter: glow(color=#000000,Strength=5); text-align:left;}<br />#header h1 a { text-decoration: none;  color: $pagetitlecolor;  }<br />#header h1 a:hover {  color: $descriptioncolor;  }<br />#header .description { margin:-10px 5px 5px 50px; width:630px; text-align:left;  font: $descriptionfont;  color: $descriptioncolor; }<br /><br />/* ---( main column )--- */<br />h2.date-header {font-size: 70%; color: $datecolor; margin:0px; text-align: left;}<br />.post h3 {text-align: left; font: $titlefont;  color: $titlecolor; border-top: 1px solid #f93; border-bottom: 1px solid #f93;}<br />.post {padding:0px;}<br />.post h3 a {color: $titlecolor; text-decoration: none;}<br />.post h3 a:hover {color: $titlehovercolor;  text-decoration: none;}<br />.post-footer {height:30px;  margin:0px; text-align: right;  font-size: 88%;  color:$footercolor;}<br />.post img {padding: 6px;  border-top: 1px solid #ddd;  border-left: 1px solid #ccc;  border-bottom: 1px solid #c0c0c0;  border-right: 1px solid #c0c0c0;  }<br />.feed-links {clear: both;  line-height: 2.5em; color:$footercolor; border-top: 1px solid #f93;}<br />.blog-feeds {text-align: right; color:$footercolor;}<br />#blog-pager-newer-link {float: left}<br />#blog-pager-older-link {float: right}<br />#blog-pager {text-align: center}<br /><br />/* comment styles */<br />#comments {  padding-top: 10px;  font-size: 95%;  line-height: 1.5em;  color: $Commentscolor;  }<br />#comments h4 {  margin: 5px 0px;  padding: 2px 0 0 20px;  font-family: "Lucida Grande", "Trebuchet MS";  font-size: 110%;  color: $Commentscolor;  height: 30px !important; /* for most browsers */  height /**/:37px; /* for IE5/Win */  }<br />#comments ul {  margin-left: 0;  }<br />#comments li {  background: none;  padding-left: 0;  }<br />.comment-body {  padding: 0 10px 0 25px;  }<br />.comment-body p {  margin-bottom: 0;  }<br />.comment-author {  margin: 4px 0 0 0;  padding: 0 10px 0 60px;  color: #999;    }<br />.comment-footer {  border-bottom: 1px solid #ddd; padding-bottom: 1em;}<br />.deleted-comment {  font-style:italic;  color:gray;  }<br /><br />/* ---( sidebar )--- */<br />.sidebar h2 {   margin: 0 0 0 0;  padding: 10px 0 0 0px; font: $sidebarheaderfont;  color: $sidebarcolor;  height: 32px !important; /* for most browsers */  height /**/:57px; /* for IE5/Win */  }<br />.sidebar .widget {  margin: 0;  padding: 0 0 5px 10px;}<br />.sidebar a {color: $sidebarlink; text-decoration: none;}<br />.sidebar a:hover {color: $sidebarhover; }<br />.sidebar li {  background:  0 5px;  }<br />.profile-textblock {margin-left: 3px;}<br />.profile-img {float:left; margin:5px;  border: 1px solid #ddd;  padding: 4px;}<br /><br /><br />/* ---( footer )--- */<br />.clear { /* to fix IE6 padding-top issue */  clear: both;}<br />#footer-wrapper {margin: 0px;  padding:0px;  font-size: 77%;  clear: both;}<br />#footer {margin: 0; width:920px; height:116px; background: url('') no-repeat top left; text-align:center; color: #eddeb5}<br />#footer-wrapper a {color: #eddeb5; text-decoration: none; line-height:62px}<br />#footer-wrapper a:hover{color: #fff;  text-decoration: none;}<br /><br /><br />/** Page structure tweaks for layout editor wireframe */<br />body#layout #outer-wrapper,<br />body#layout #main,<br />body#layout #sidebar {   padding-top: 0;  margin-top: 0;}<br />body#layout #outer-wrapper,body#layout #content-wrapper { padding:0px}<br />body#layout #sidebar {   margin-right: 0;  margin-bottom: 1em; }<br />body#layout #header,body#layout #footer,<br />body#layout #main {  padding: 0; }<br />body#layout #content-wrapper {   margin: 0px; }<br />#navbar-iframe {   height:0px;   visibility:hidden;   display:none   } <br />  <br />  ]]></b:skin><br />  </head><br /><body><br />  <script src="'http://track.mybloglog.com/js/jsserv.php?mblID=" type="'text/javascript'/"><br />  <div id="'outer-wrapper'"><br /><div id="'wrap2'"><br /><!-- skip links for text browsers   --> <br /><span id="'skiplinks'" style="'display:none;'"><br />  <a href="'#main'" shape="'rect'">skip to main</a> <br />  | <br />  <a href="'#sidebar'" shape="'rect'">skip to sidebar</a> <br />  </span><br /><div id="'header-wrapper'"><br />      <b:section class="'header'" id="'header'" maxwidgets="'1'" showaddelement="'no'"><br /><b:widget id="'Header1'" locked="'true'" title="'Ly" type="'Header'/"><br /></b:section><br />    </div><br /><div id="'center'"><br /> <div id="'content-wrapper'"><br /> <div id="'sidebar-wrapper'"><br />        <b:section class="'sidebar'" id="'sidebar'" preferred="'yes'"><br /><b:widget id="'HTML2'" locked="'false'" title="''" type="'HTML'/"><br /><b:widget id="'BlogList1'" locked="'false'" title="'My" type="'BlogList'/"><br /></b:section><br /> </div><br /> <div id="'main-wrapper'"><br /> <b:section class="'main'" id="'main'" showaddelement="'yes'"><br /><b:widget id="'HTML3'" locked="'false'" title="''" type="'HTML'/"><br /><b:widget id="'Blog1'" locked="'false'" title="'Blog" type="'Blog'/"><br /><b:widget id="'Feed1'" locked="'false'" title="'Recent" type="'Feed'/"><br /></b:section><br />  </div><br /> <div id="'ads-wrapper'"><br /> <b:section class="'sidebar'" id="'ads'" preferred="'yes'"><br /><b:widget id="'HTML1'" locked="'false'" title="''" type="'HTML'/"><br /><b:widget id="'Label1'" locked="'false'" title="'Search" type="'Label'/"><br /></b:section><br />  </div><br /><!-- spacer for skins that want sidebar and main to be the same height  --> <br />  <div class="'clear'"> </div> <br />  </div><br /><!-- end content-wrapper  --> <br /></div> <!--end center--><br />  <div class="'footer" id="'footer'"><div id="'footer-wrapper'"><br />Design by:  <a href="'http://lynside.blogspot.com/'" shape="'rect'" title="'Ly">LynSide</a> <br />  </div><br /></div><br /></div><br /></div><!-- end outer-wrapper --> <br />  </body><br />  </html>

Nah, kira2 tahu ga apa2 aja yang udah aku ubah? Kita bahas disini.
Tenang ga susah kok ternyata, cmn ganti link gambarnya,,,
Pertama untuk Header...
Dari bagian:

Nah, kamu tinggal ganti background url nya dari
http://lh6.google.com/jvdmds/R19jmboNgOI/AAAAAAAAA_0/sGxVe9K5xTc/girl-a.jpg
menjadi
http://img11.imageshack.us/img11/1972/headergxl.jpg (ini link gambarku)

Nah untuk membuat link gambar seperti tempatku, caranya:
--Buat gambar yang akan dijadikan Header, ukurannya kamu sesuaikan dengan gambar asli atau tinggal lihat di bagian header untuk height dan width nya, untuk template ini height=306px dan width=920px.
--Karena contoh tempatku itu produk gagal, jadi ukurannya agak berbeda dengan yang asli, he3x,,,
--Kalau sudah jadi gambarnya, kamu bisa upload gambarmu ke file hosting, kalo aku pake imageshack, km bs pke photobucket, dll... (Saya sarankan menggunakan Imageshack karena jika menggunakan photobucket, gambar tidak sesuai ukuran yang kita upload)...
--Kalau sudah, tinggal copy paste link tersebut menggantikan link yang ada ditemplate asli.

Nah gampangkan, lakukan juga untuk background body dan footer, atau yang lainnya.
Contoh nya kamu bisa membandingkan mana2 saja yang berubah dari template awal ke template yang sudah aku ubah...

Sekian dulu, untuk widget, menyusul part 3 aja... Cape bgt euy...
OK OK,,,
Met Mencoba :P
Jangan bosen2 mencoba...

Comments

Andykhan_studioOctober 23, 2009 at 11:46 PM
wkwkwkwk..gak ngerti bu guru??
LyLeleOctober 28, 2009 at 10:28 AM
wah, emang aq g co2k ni buat tutorial,,, ha3x,,,,
mksdku gini, tp yg kketulis gtu,,, dll,,,

gmn y biar bisa bikin yg orang gmpang paham??
Andykhan_studioDecember 15, 2009 at 1:15 AM
pussssssssssssiiiing
LyLeleDecember 16, 2009 at 9:01 AM
bikin pusing ya?
intinya jangan copy paste code di atas, yg penting disini, cmn ngerubah background, gambar, dan warna aja,,, jadi sebenarnya gampang kok,,,

Search This Blog

LynSide

Buat Blog Kayak Punya Ku (Part 2)

Comments

Post a Comment

Popular posts from this blog

Buat Blog Kayak Punya Ku (Part 1)

Ksatria Baja Hitam RX Versi Indonesia

Minky Momo Versi Indonesia