н ι α т υ ѕ

Tutorial : Cara Tukar ke Denim Template

Assalamualaikum and annyeonghaseyo. Seperti korang sedia maklum, sekarang blog sudah diupgrade. So, banyak benda dah berubah. Agak memeningkan jugak. Jadi, hari ni tieqa nak share cara utk tukar ke template denim. Btw freebies original codes ni dari adik Qihah. Jgn lupa credit kpd beliau. Sblum guna,dinasihatkan untuk backup codes.

1. Dashboard > Template > Edit HTML

2. Delete semua code yang ada dalam ruangan tu.

3. Gantikan dengan code yang ini

<?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">

<head>

<b:include data='blog' name='all-head-content'/>

<b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name: Denim

Designer: Darren Delaye

Credit codes: faqihahhusni dan hanis zakirah (jangan remove)

Date: 21 Nov 2012

-----------------------------------------------

/* 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>

<a href='#main'>skip to main </a> |

<a href='#sidebar'>skip to sidebar</a>

</span>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='haniszakirahdanfaqihahhusni (Header)' type='Header'/>

</b:section>

</div>

<b:section class='crosscol' id='crosscol'/>

</div>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

</div>

<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>

</div>

<b:section class='footer' id='footer'/>

</div>

</div></div>

<b:include data='blog' name='google-analytics'/>

</body>

</html>

4. Kemudian, preview. Kalau takde apa-II error. Bole la save
5. Done. Selamat mengedit.

3 comment [s]:

Nurhajar Danishy said...: denim template ni yang macam mana eh ?; June 13, 2013 at 9:20 PM [REPLY]
Amirah_Myra said...: cm mne nk buad nie..; June 29, 2013 at 4:41 PM [REPLY]
Najwaa said...: kalau buad neh nanti favicon,header,gadjet hilang tak?; July 1, 2013 at 4:29 PM [REPLY]

Tutorial : Cara Tukar ke Denim Template

3 comment [s]:

D'Owner!

D'tagboard!

D'Followers

D'Credits!