Tutorial : Turn Template to Denim

Actually template ini lebih ringan daripada template yang lain...
Tak percaya kah ? ?Sila lah check berat blog korunk sekarang dan selepas guna Denim nieh..

Backup template dulu yer... nanti tiba-tiba tak jadi nangis tak berlagu.. Jangan salahkan siapa-siapa.. :P
1. Layout --> Template --> Edit Html --> Delete semua code yang ada di situ
2. Sila copy code Template Denim .Paste dan gantikan dengan code yang ada...
#kalau ada warning /delete widget , just keep widget 
<?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:     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="#ffffff" value="#ffffff">
 <Variable name="headerTextColor" description="Page Header Text Color"
           type="color" default="#333333" value="#333333">
 <Variable name="headerCornersColor" description="Page Header Corners Color"
           type="color" default="#ffffff" value="#ffffff">


 <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='haniszakirahdanfaqihahhusni (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>
4.Save ! creditdenimcode : Faqihah,Hanis
Lepas dah copy code denim , Boleh ikut step di bawah :



Then , masukkan background untuk blog korunk :
Edit Html | tick expand widget | tekan CRTL+F and find this code :
body {
dekat bawah code ini , korunk paste code ini:
background: url(url background)fixed;
  margin: 0;
  padding: 0px;
  font: x-small Verdana, Arial;
  text-align: center;
  color: #000;
  font-size/* */:/**/small;
  font-size: /**/small;
}
Preview , dah cantik kan ada background tiba-tiba nampak warna putih dekat header korunk .. Jom kita transparentkan ! 

Crtl+F find this code :
/* Variable definitions
ada anak-anak code kan ? korunk cari 
<Variable name="headerBgColor" description="Page Header Background Color"
           type="color" default="#ffffff" value="#ffffff">
 <Variable name="headerTextColor" description="Page Header Text Color"
           type="color" default="#333333" value="#333333">
 <Variable name="headerCornersColor" description="Page Header Corners Color"
           type="color" default="#ffffff" value="#ffffff">
dah jumpa ?  tukar  semua code diatas dengan code ini :
<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">
dah transparent pun header korunk :) chomell kann ? 

  • Header bersambung dengan body
  • Header tak bersambung dengan body

then kalau buat yang no tittle tuh kan ? guna width nya 760px and height dia 300px kite leh jer buat body melengkung :) soo , mehh kita buat kayy :
click ctrl + F and cari code nie :
#content-wrapper {
then bawah dia ade anak-anak code kann ? hahh , ganty kan saje dengan code nie kayy .
width: 760px;
margin: 0 auto;
padding:15px;
background : url(url background);
text-align: $startSide;
background-color: $mainBgColor;
border: 0px solid $borderColor;
border-top: 0;
border-top-left-radius: 25px 25px;
border-top-right-radius: 25px 25px;
border-bottom-left-radius: 25px 25px;
border-bottom-right-radius: 25px 25px;
}
Link Color
Template  > Edit Html >Proceed --> *tick expand widget then click ctrl + F and search this code .
a:link {
then dekat bawah code nie korunk ganti code yang ade kat bawah tuh dengan code :
 a:link {
text-decoration: none;
color: #7C63C8;
}
a:visited {
text-decoration: none;
color: #7C63C8;
}
EDIT :
ABC : korunk boleh tukar warna dia dekat SINI

Tuto For This Template :
Tutorial : Blockquote
Tutorial : Sidebar and Post Title Settings
Tutorial : Remove Navigation Bar
Tutorial : Customize Home,Older and Newer

Sampai di sini dulu.. kalau nak comelkan  lagi blog cari aje dekat Tuto Nurrul , 
Mana yang boleh edit.. Edit lah.. :") Harap korunk dapat edit dengan jayanya ! :")


19 comments

  1. wahh, bestnya... Tempalte wash denim ni macam template awak skrg ni ke? macam saya nak try, tapi risau lak kalau nak ubah2... ehehe

    Salam kunjung mengunjung ye.. ada masa jenguk2 lah blog Gen2Merah ye.. salam persahabatan.. (",)

    ReplyDelete
    Replies
    1. yups ! thats right ! .. alah tapi blog gen2merah ringan juga..
      jadi tak perlu tukar :)

      Delete
  2. Kalau tukar kepada denim ni ad hilang tk widget, followers ap sume ?

    ReplyDelete
  3. @Fatimah Azzahra'Hmm, tak hilang.. ini hanya untuk design blog awk ajee..
    tak menjejaskan yg lain :")

    ReplyDelete
  4. akak, kenapa bila nak save dia tak boleh??

    ReplyDelete
  5. @Yana KeysErr , tak boleh save ? Yeke? Cuba awk try dan follow step by step..

    ReplyDelete
  6. akk, saya pun ada masalah yg sama.. x boleh nak save... kena buat semua benda dulu baru save ke?

    ReplyDelete
  7. @LuQmAn MiZz HaQieM...awk kene revert tempalte calssic awk dulu kepada Template design baru ikut turo ini..
    http://youismysoul.blogspot.com/2013/01/tutorial-revert-classic-template-to.html

    ReplyDelete
  8. @Nurrulakk mcm mne ? nak search code ape akk ?

    ReplyDelete
  9. salam.. akak nak tnya ni knpa post title sya jd warna biru?

    ReplyDelete
  10. Nurul,bukan cam ni ke..
    background: url("url background");repeat ;
    background-attachment:Fixed;
    ...confius nih

    ReplyDelete
  11. @Faeytynn Zayn Dear , banyak coding yang boleh digunakan sama... :)
    guna saja yg mana-mana awak nak.. janji senang coding tuh.. Kalau Nurrul guna code yang Nurrul beri tuh :D

    ReplyDelete
  12. akak saya nak copy code boleh??

    ReplyDelete
  13. No one can copy because you have disabled right click.

    ReplyDelete
  14. @Y HoneybunchPlease read the instruction correctly before using all tuto in my site.. I already told that at tutorial page.. :)

    ReplyDelete
  15. Cara pasang header gimana? :)

    ReplyDelete

Terima kasih kerana sudi menulis komen di blog Nurrul, sebarang pertanyaan akan dibalas secepatnya. Jazakallahu khairan