TUTORIAL : Tukar template baru kepada template yang lama (washed denim code)

Assalammualaikum blogger sekalian..

Okey tutorial ni untuk blogger yang inginkan template blog yang lama. untuk blog interface yang baru ni mereka dah tak ada template lama kan? mcm washed denim tu. sebab dulu-dulu edit blog mmg base pada code template ni kan? mungkin susah lah nak bermain dengan coding dia tapi.. hasil penggunaan template ni memang cantik lepas edit sana dan sinun.. hehe.. so untuk tutorial ni korunk perlu 7 step.. just take a look gambar dan korunk akan faham.. so let's start !

STEP 1 :
Log in blog -> then click new blog ( bagi yang nak create blog baru, kalau dah ade blog ikut step no.3 terus tau?)
 STEP 2 : 
Isikan mana yang una tandakan dekat gambar tu
 STEP 3 :
Buat macam dalam gambar, gerakkan cursor korunk then sila pilih template
 STEP 4 :
Click yang edit HTML tuh untuk mula masukkan coding template "WASHED DENIM"
 STEP 5 :
Pilih edit template, sila tekan right click dan select all then korunk tekan button delete/backspace
 STEP 6 :
Dah blank and sila masukkan code "WASHED DENIM" dalam page yang blank ni
 Code washed denim --> CLICK HERE
STEP 7 : 
Dah copy paste semua code korunk preview template.. dah puas hati boleh lah mula proses edit dan edit bagi cantik dan terus comel gituu ~ hehehe! 

NOTA BITBOT :
bagi yang newbies korunk boleh terus click tutorial dekat bawah ni untuk proses edit blog :)
  1. TURN YOUR TEMPLATE TO WASHED DENIM PART 1
  2. TURN YOUR TEMPLATE TO WASHED DENIM PART 2
ATAU

korunk boleh terus ambil freebies code blog daripada una sendiri.. and korunk boleh ubah code ni ikut citarasa korunk yer? 

Lots of Love,

Hai! Selamat membaca. Jangan lupa tinggal komen ya?

FREEBIES : Code Washed Denim Original

Freebies Code washed denim original... can use in this tuto -->

Tukar template baru kepada template yang lama (washed denim code)
<?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 expr:dir='data:blog.languageDirection' 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[/*
-----------------------------------------------
Blogger Template Style
Name:     Washed Denim
Designer: Darren Delaye
URL:      www.DarrenDelaye.com
Date:     11 Jul 2006
-----------------------------------------------
*/
/* Variable definitions
   ====================
 <Variable name="bgColor" description="Page Background Color"
           type="color" default="#efefef" value="#efefef">
 <Variable name="textColor" description="Text Color"
           type="color" default="#333333" value="#333333">
 <Variable name="linkColor" description="Link Color"
           type="color" default="#336699" value="#336699">
 <Variable name="headerBgColor" description="Page Header Background Color"
           type="color" default="transparent" value="transparent">
 <Variable name="headerTextColor" description="Page Header Text Color"
           type="color" default="transparent" value="transparent">
 <Variable name="headerCornersColor" description="Page Header Corners Color"
           type="color" default="transparent" value="transparent">
 <Variable name="mainBgColor" description="Main Background Color"
           type="color" default="#ffffff" value="#ffffff">
 <Variable name="borderColor" description="Border Color"
           type="color" default="#cccccc" value="#cccccc">
 <Variable name="dateHeaderColor" description="Date Header Color"
           type="color" default="#999999" value="#999999">
 <Variable name="sidebarTitleBgColor" description="Sidebar Title Background Color"
           type="color" default="#ffd595" value="#ffd595">
 <Variable name="sidebarTitleTextColor" description="Sidebar Title Text Color"
           type="color" default="#333333" value="#333333">
 <Variable name="bodyFont" description="Text Font"
           type="font" default="normal normal 100% Verdana, Arial, Sans-serif;" value="normal normal 100% Verdana, Arial, Sans-serif;">
 <Variable name="headerFont" description="Page Header Font"
           type="font" default="normal normal 210% Verdana, Arial, Sans-serif;" value="normal normal 210% Verdana, Arial, Sans-serif;">
   <Variable name="startSide" description="Start side in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="End side in blog language"
             type="automatic" default="right" value="right">
*/
body {
  background: $bgColor;
  margin: 0;
  padding: 0px;
  font: x-small Verdana, Arial;
  text-align: center;
  color: $textColor;
  font-size/* */:/**/small;
  font-size: /**/small;
}
a:link {
  color: $linkColor;
}
a:visited {
  color: $linkColor;
}
a img {
  border-width: 0;
}
#outer-wrapper {
  font: $bodyFont;
}
/* Header
----------------------------------------------- */
#header-wrapper {
  margin:0;
  padding: 0;
  background-color: $headerCornersColor;
  text-align: $startSide;
}
#header {
  width: 760px;
  margin: 0 auto;
  background-color: $headerBgColor;
  border: 1px solid $headerBgColor;
  color: $headerTextColor;
  padding: 0;
  font: $headerFont;
}
h1.title {
  padding-top: 38px;
  margin: 0 14px .1em;
  line-height: 1.2em;
  font-size: 100%;
}
h1.title a, h1.title a:visited {
  color: $headerTextColor;
  text-decoration: none;
}
#header .description {
  display: block;
  margin: 0 14px;
  padding: 0 0 40px;
  line-height: 1.4em;
  font-size: 50%;
}
                                                     
/* Content
----------------------------------------------- */
.clear {
  clear: both;
}

#content-wrapper {
  width: 760px;
  margin: 0 auto;
  padding: 0 0 15px;
  text-align: $startSide;
  background-color: $mainBgColor;
  border: 1px solid $borderColor;
  border-top: 0;
}
#main-wrapper {
  margin-$startSide: 14px;
  width: 464px;
  float: $startSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  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-wrapper {
  margin-$endSide: 14px;
  width: 240px;
  float: $endSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  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 */
}
/* Headings
----------------------------------------------- */
h2, h3 {
  margin: 0;
}
/* Posts
----------------------------------------------- */
.date-header {
  margin: 1.5em 0 0;
  font-weight: normal;
  color: $dateHeaderColor;
  font-size: 100%;
}
.post {
  margin: 0 0 1.5em;
  padding-bottom: 1.5em;
}
.post-title {
  margin: 0;
  padding: 0;
  font-size: 125%;
  font-weight: bold;
  line-height: 1.1em;
}
.post-title a, .post-title a:visited, .post-title strong {
  text-decoration: none;
  color: $textColor;
  font-weight: bold;
}
.post div {
  margin: 0 0 .75em;
  line-height: 1.3em;
}
.post-footer {
  margin: -.25em 0 0;
  color: $textColor;
  font-size: 87%;
}
.post-footer .span {
  margin-$endSide: .3em;
}
.post img, table.tr-caption-container {
  padding: 4px;
  border: 1px solid $borderColor;
}
.tr-caption-container img {
  border: none;
  padding: 0;
}
.post blockquote {
  margin: 1em 20px;
}
.post blockquote p {
  margin: .75em 0;
}
/* Comments
----------------------------------------------- */
#comments h4 {
  margin: 1em 0;
  color: $dateHeaderColor;
}
#comments h4 strong {
  font-size: 110%;
}
#comments-block {
  margin: 1em 0 1.5em;
  line-height: 1.3em;
}
#comments-block dt {
  margin: .5em 0;
}
#comments-block dd {
  margin: .25em 0 0;
}
#comments-block dd.comment-footer {
  margin: -.25em 0 2em;
  line-height: 1.4em;
  font-size: 78%;
}
#comments-block dd p {
  margin: 0 0 .75em;
}
.deleted-comment {
  font-style:italic;
  color:gray;
}
.feed-links {
  clear: both;
  line-height: 2.5em;
}
#blog-pager-newer-link {
  float: $startSide;
 }
#blog-pager-older-link {
  float: $endSide;
 }
#blog-pager {
  text-align: center;
 }
/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
 margin: 1.6em 0 .5em;
 padding: 4px 5px;
 background-color: $sidebarTitleBgColor;
 font-size: 100%;
 color: $sidebarTitleTextColor;
}
                                                     
.sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebar li {
  margin: 0;
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: .5em;
  padding-$startSide: 15px;
  text-indent: -15px;
  line-height: 1.5em;
}
.sidebar {
  color: $textColor;
  line-height:1.3em;
}
.sidebar .widget {
  margin-bottom: 1em;
}
.sidebar .widget-content {
  margin: 0 5px;
}
/* Profile
----------------------------------------------- */
.profile-img {
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  padding: 4px;
  border: 1px solid $borderColor;
}
.profile-data {
  margin:0;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight: bold;
  line-height: 1.6em;
  font-size: 78%;
}
.profile-datablock {
  margin:.5em 0 .5em;
}
.profile-textblock {
  margin: 0.5em 0;
  line-height: 1.6em;
}
                                                     
/* Footer
 ----------------------------------------------- */
#footer {
  clear: both;
  text-align: center;
  color: $textColor;
}
#footer .widget {
  margin:.5em;
  padding-top: 20px;
  font-size: 85%;
  line-height: 1.5em;
  text-align: $startSide;
}
]]></b:skin>
  </head>
  <body>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
  <div id='outer-wrapper'><div id='wrap2'>
    <!-- skip links for text browsers -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>
    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Hanis fanfic (Header)' type='Header'/>
</b:section>
    </div>
    <div id='content-wrapper'>
      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol'/>
      </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:section>
      </div>
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>
      </div>
      <!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>
    </div> <!-- end content-wrapper -->
    <div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
    </div>
  </div></div> <!-- end outer-wrapper -->
  <b:include data='blog' name='google-analytics'/>
</body>
</html>
Lots of Love,

Hai! Selamat membaca. Jangan lupa tinggal komen ya?

Assalammualaikum.. Kemetot Chomel back again :)

Assalammualaikum semuaaaa... 

yeayyyy! i'm back.. hahaha, setelah setahun lamanya meninggalkan blog una kembali.. ececehh.. yer2 je tu.. hehehe :D una terpaksa tinggalkan blog begitu saja.. sebab, i'm sitting for STPM in 2012/2013.. Alhamdulillah proses pembelajaran sangat okey.. now dah graduate pun dari form 6 in University of Semesco.. hahahaha :D eih, budak form 6 pun U juga tau.. bezanya we are in uniform and still under sekolah.. result full una pun alhamdulillah.. 3.00 pointer.. hehe :D so now just tengah tunggu panggilan  kemasukan ke Universiti for continue study for degree holder.. in shaa Allah.. doa-doakan lah yer? 

so now, everything is new.. una dah edit blog. and dah ade banner a.k.a my watermark sendiri ! hahaha.. nampak x doodle yang xberapa nak comel nie ~ hehehe :D ni una dah lukis lama dah.. in 2011 xsilap? atau 2012? hahahaha.. una pun xingat but i create it using adobe hotoshop cs5.. that time baru nak belajar lah katakan.. so redah je lah kan? huhu..
okeyy, now full page from kemetot chomel basic code semua una godek tutorial una balik.. and guna tutorial dari blogger lain jugak.. dan dah letak para blogger yang una guna tuto mereka di bahagian about the blog ya? credit to all of them.. and thank you so much.. di sebabkan una dah lama tak libatkan diri dalam blog kan, so mmg kena google sana sini lah.. hahahahaha :D pecah juga kepala sebab nak kena belajar step by step balik kan? huhu.. sooo, ini lah hasilnya :)
Tema una kali ni adalah colour pastel and rainbow.. hehehe :D so, background una edit sendiri guna adobe.. hehe :D doodle sendiri, header sendiri.. cuma icon yang kecil2 dan comel2 tuh bukan hak milik una.. semuanya hasil kerjasama dari encik google.. terima kasih... dan.. dann... una nak buat tutorial baru.. maybe tutorial ni akan berguna kepada pengguna blogger yang guna blog baru.. tak tahu macam mana nak convert code baru pada code lama dan boleh lah guna tutorial yang ada dalam blog una ^^ huhu.. so, nantikannnnnn...... 

Lots of Love,
     

Hai! Selamat membaca. Jangan lupa tinggal komen ya?