Selamat Datang Diucapkan Kepada Semua Pengunjung Blog Ini Segala Komen Dan Saranan Teman Teman Amat Seri Hargai

Tutorial Modifikasi Template Bhg. 4

Perubahan yang akan kita lakukan kali ini ialah menjadikan template 4 kolom ini kepada template 3 kolom. Sila beri perhatian kerana banyak kode yang akan dibuang, lebih kurang 10% dari keseluruhan isi kandungan template.

Gambar dibawah yang bertanda petak MERAH ialah kawasan yang akan diubah dengan membuang berapa bahagian seperti sidebaratas, sidebarbawah dan sidebar2.

Template Yang Belum Diubahsuai

Template Yang Telah Diubahsuai

Kode Template Untuk Rujukkan

<?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'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template
Name: Rounded 4 kolom
Designer: Angga Leo Putra
URL: http://anggaleoputra.blogspot.com
Date: 05 April 2009
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#000000" value="#000000">
<Variable name="linkcolor" description="Link Color"
type="color" default="#000000" value="#000000">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#666666">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#999999">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#cc6600">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#999999">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="startSide" description="Side where text starts in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="Side where text ends in blog language"
type="automatic" default="right" value="right">
*/

/* Use this with templates/template-twocol.html */

body {
background: #2b2b2b;
margin:0;
color:#000000;
font:12px trebuchet ms;
text-align: center;
}
a:link {
color:#d28119;
text-decoration:none;
}
a:visited {
color:#d28119;
text-decoration:none;
}
a:hover {
color:#ffffff;
text-decoration:bold;
}
a img {
border-width:0;
}

/* Header
-----------------------------------------------
*/
#headerbg {
background:#3c3c3c;
width:980px;
height:100px;
border:0px solid #000000;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
}
#header-wrapper {
background:#ffffff;
width:960px;
height:70px;
float:left;
padding-bottom:5px;
margin-left:10px;
margin-right:0px;
margin-top:10px;
margin-bottom:10px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
border:0px;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 0px;
border: 0;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
padding:0px;
text-align:center;
border:0px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
margin-top:0px;
margin-left:0px;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: 32px georgia;
color:#066c09;
text-decoration:none;
}
#header h1 a:link {
color:#0b6701;
}
#header h1 a:hover {
color:#b66610;
}
#header h1 a:visited {
color:#0b6701;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
padding:0px;
text-align:center;
border:#c0c0c0;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:0px;
margin-top:-18px;
max-width:700px;
text-transform:none;
letter-spacing:.2em;
line-height: 1.0em;
font: 14px georgia;
color: #000000;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
.header2 .widget {
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom:5px;
}
#NavbarMenu {
background: #3c3c3c;
width: 980px;
height: 35px;
font-size: 13px;
font-family: Arial, Tahoma, Verdana;
color: #f39e24;
font-weight: bold;
margin: 0px;
padding: 0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
#NavbarMenuleft {
width: 960px;
float: left;
margin: 0;
padding: 0;
}

#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
background: #2b2b2b;
color: #eaa31a;
display: block;
font-size: 14px;
font-family: trebuchet ms, Times New Roman;
font-weight: bold;
text-transform: none;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
border: 2px solid #474747;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
#nav li a:hover, #nav li a:active {
background: #191919;
color: #eaa31a;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
text-decoration: none;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #2b2b2b;
width: 150px;
color: #eaa31a;
font-size: 14px;
font-family: trebuchet ms, Times New Roman;
font-weight: normal;
text-transform: none;
float: none;
margin: 0;
padding: 7px 10px;
border: 1px solid #474747;
}
#nav li li a:hover, #nav li li a:active {
background: #191919;
color: #eaa31a;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
background: #676767;
border: 3px solid #c0c0c0;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
width: 980px;
margin:0 auto;
padding:5px;
text-align:$startSide;
font: 12px trebuchet ms;
}

#main-wrapper {
width: 440px;
float: $startSide;
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 */
padding-top:5px;
border-right:0px solid #c0c0c0;
border-bottom:0px solid #c0c0c0;
padding-left:6px;
}

#sidebaratas-wrapper {
width: 340px;
float: right;
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 */
padding-left:0px;
padding-top:5px;
padding-bottom:5px;
padding-right:0px;
}

#sidebarbawah-wrapper {
width: 340px;
float: right;
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 */
padding-left:0px;
padding-top:5px;
padding-bottom:5px;
padding-right:0px;
}
#sidebarkiri-wrapper {
width: 180px;
float: left;
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 */
padding-left:5px;
padding-top:5px;
padding-bottom:0px;
padding-right;0px;
}
#sidebar-wrapper {
width: 170px;
float: $endSide;
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 */
padding-left:0px;
padding-top:0px;
padding-bottom:0px;
padding-right;0px;
}
#sidebar2-wrapper {
width:170px;
float: right;
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 */
padding-left:0px;
padding-right:0px;
padding-bottom;0px;
padding-top:0px;
}
/* Headings
----------------------------------------------- */

h2 {
padding-top:10px;
font-weight: bold;
line-height: 1.3em;
text-transform:uppercase;
text-align: center;
letter-spacing:.1em;
color: #0000FF;
font: 12px Trebuchet ms;
}


/* Posts
-----------------------------------------------
*/
h2.date-header{
background: #252525;
margin: 0 0;
height: 22px;
text-align: center;
font: 12px Trebuchet MS;
font-weight: bold;
color: #ffffff;
border-left:1px solid #666666;
border-right:1px solid #666666;
border-top:1px solid #666666;
border-bottom:0px solid #666666;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
}

.post {
font: 13px trebuchet ms;
margin-bottom:15px;
text-align:justify;
color: #ffffff;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
}

.post h3 {
background: #515151;
background-padding:0px 10px 0px 0px;
border-top:1px solid #252525;
color: #0080FF;
text-align: center;
margin: 0 0;
padding: 0px 0px 0px 0px;
height:40px;
font: normal 20px "Tahoma", Arial, sans-serif;
}

.post h3 a:link {
color: #eaa31a;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#eaa31a;
border-right:1px solid #666666;
border-left:1px solid #666666;
font-weight:normal;
}

.post h3 a:hover {
color: #ffffff;
font-size:105%;
}
.post-body {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
background:#515151;
margin-top:-21px ;
line-height:1.6em;
border-right:1px solid #666666;
border-left:1px solid #666666;
}

.post-body a:link {
color: #eaa31a;
font-size:12px trebuchet ms;
}

.post-body a:visited {
color: #eaa31a;
}

.post-body a:hover {
color: #df8525;
font-weight: normal;
}

.post-body blockquote {
background-position:-10px -7px;
border: 1px dotted #FFC600;
margin: 10px;
padding: 10px;
background: url("http://img516.imageshack.us/img516/1513/blackquotewe3.png") no-repeat
#FFF8DD;
text-align: justify;
}

.post-footer {
background: #515151;
margin-top:-10px;
padding-top: 0px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 15px;
color:#000000;
text-align: right;
text-transform:none;
font: 13px trebuchet ms;
line-height: 1.4em;
font-weight: bold;
border-left:1px solid #666666;
border-right:1px solid #666666;
border-top:0px solid #666666;
border-bottom:1px solid #666666;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
.post-footer a:link {
color:#eaa31a;
}
.post-footer a:hover {
color:#ffffff;
}
.post-footer a:visited {
color:#eaa31a;
}
.comment-link {
color:#FF8000;
margin-$startSide:.6em;
}
.post img {
margin: 0px;
padding:0px;
border:0px;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

#comments h4 {
margin:0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #000;
padding-left:10px;
}

#bg_commentblock {
width: 425px;
background: #ffffff;
float: left;
padding:5px;
margin:0 0 10px 0;
border:1px solid #ffffff;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}

#commentblock {
width: 400px;
background: #ffffff;
text-align:left;
padding: 10px;
margin: 10px 0px 0px 0px;
border: 1px solid #666666;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
#commentblock ol {
list-style-type: square;
margin: 0px 0px 0px 10px;
padding: 0px 0px 10px 0px;
}
.commentdate {
font-size: 12px;
padding-left: 0px;
}
#commentlist li p {
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}

.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}

.commentinfo{
clear: both;
}

.commenttext {
background:#fbf6d4;
clear: both;
margin: 3px 0px 10px 0px;
padding: 10px;
width: 375px;
border: 1px solid #fbe96c;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}

.commenttext-admin {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 440px;
}

.feed-links {
display: none;
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
font-color:#04B404;
float: left;
}

#blog-pager-older-link {
font-color:#04B404;
float: right;
}

#blog-pager {
text-align: center;
}

/* Sidebarkiri Content
----------------------------------------------- */
.sidebarkiri {
padding-left: 0px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 5px;
margin-top: 0px;
margin-bottom: 0px;
font: 12px trebuchet ms;
color: #FFFFFF;
line-height: 1.5em;
}
.sidebarkiri h2 {
background:#252525;
border-left:0px solid #666666;
border-right:0px solid #666666;
border-top:0px solid #666666;
border-bottom:0px solid #666666;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
height:28px;
line-height:28px;
font-weight:bold;
font-size:12px;
color:#eaa31a;
padding:0 0 0 0px;
}
.sidebarkiri ul {
background:#4a4a4a;
border:0px solid #666666;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
list-style:none;
margin:0 0 0;
padding:5px;
}
.sidebarkiri li {
color: #000000;
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:10px;
text-indent:-15px;
line-height:1.5em;
}
.sidebarkiri li a:link {
width:160px;
color: #ffffff;
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:10px;
text-indent:-15px;
line-height:1.5em;
text-decoration:none;
}
.sidebarkiri li a:hover {
color: #0b9804;
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:10px;
text-indent:-15px;
line-height:1.5em;
text-decoration:none;
}
.sidebarkiri li a:visited {
color: #ffffff;
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:10px;
text-indent:-15px;
line-height:1.5em;
text-decoration:none;
}
.sidebarkiri a:link {
color:#0b9804;
}
.sidebarkiri a:hover {
color:#d48f2c;
}
.sidebarkiri a:visited {
color:#0b9804;
}
.sidebarkiri .widget {
background:#3c3c3c;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom: 15px;
padding-left:7px;
padding-right:7px;
padding-top:7px;
padding-bottom:7px;
border:0px solid #c0c0c0;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar {
padding-left: 0px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 5px;
margin-top: 0px;
margin-bottom: 0px;
font: 12px trebuchet ms;
color: #ffffff;
line-height: 1.5em;
}
.sidebar h2 {
background:#252525;
border-left:0px solid #666666;
border-right:0px solid #666666;
border-top:0px solid #666666;
border-bottom:0px solid #666666;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
height:28px;
line-height:28px;
font-weight:bold;
font-size:12px;
color:#ffffff;
padding:3px;
}
.sidebar ul {
background:#4a4a4a;
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar li a:hover {
color: #8000FF;
font-size:100%;
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:25px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget {
background:#3c3c3c;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom: 15px;
padding-left:7px;
padding-right:7px;
padding-top:7px;
padding-bottom:7px;
border:0px solid #c0c0c0;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
.main .widget {
border:0px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .Blog {
border-bottom-width: 0;
}

/* Sidebar2 Content
----------------------------------------------- */
.sidebar2 {
padding-left: 0px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 5px;
margin-top: 0px;
margin-bottom: 0px;
font: 12px trebuchet ms;
color: #ffffff;
line-height: 1.5em;
}
.sidebar2 h2 {
background:#252525;
border-left:0px solid #666666;
border-right:0px solid #666666;
border-top:0px solid #666666;
border-bottom:0px solid #666666;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
height:28px;
line-height:28px;
font-weight:bold;
font-size:12px;
color:#ffffff;
padding:3px;
}
.sidebar2 ul {
background:#4a4a4a;
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar2 li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar2 li a:link {
width:160px;
color: #3576a0;
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:10px;
text-indent:-15px;
line-height:1.5em;
text-decoration:none;
}
.sidebar2 li a:hover {
color: #d48f2c;
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:10px;
text-indent:-15px;
line-height:1.5em;
text-decoration:none;
}
.sidebar2 li a:visited {
color: #3576a0;
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:10px;
text-indent:-15px;
line-height:1.5em;
text-decoration:none;
}
.sidebar2 .widget {
background:#3c3c3c;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom: 15px;
padding-left:7px;
padding-right:7px;
padding-top:7px;
padding-bottom:7px;
border:0px solid #c0c0c0;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}

/* Sidebaratas Content
----------------------------------------------- */
.sidebaratas {
padding-left: 0px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 5px;
margin-top: 0px;
margin-bottom: 0px;
font: 12px trebuchet ms;
color: #000000;
line-height: 1.5em;
}
.sidebaratas h2 {
background:#252525;
border-left:0px solid #666666;
border-right:0px solid #666666;
border-top:0px solid #666666;
border-bottom:0px solid #666666;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
height:28px;
line-height:28px;
font-weight:bold;
font-size:12px;
color:#ffffff;
padding:3px;
}
.sidebaratas ul {
background:#4a4a4a;
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebaratas li {
border-bottom:1px dotted #c0c0c0;
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebaratas li a:link {
color:#0b9804;
}
.sidebaratas li a:hover {
color: #0b9804;
font-size:100%;
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:25px;
text-indent:-15px;
line-height:1.5em;
}
.sidebaratas .widget {
background:#3c3c3c;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom: 0;
padding-left:7px;
padding-right:7px;
padding-top:7px;
padding-bottom:7px;
border:0px solid #c0c0c0;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}

/* Sidebarbawah Content
----------------------------------------------- */
.sidebarbawah {
padding-left: 0px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 5px;
margin-top: 0px;
margin-bottom: 0px;
font: 12px trebuchet ms;
color: #ffffff;
line-height: 1.5em;
}
.sidebarbawah h2 {
background:#252525;
border-left:0px solid #666666;
border-right:0px solid #666666;
border-top:0px solid #666666;
border-bottom:0px solid #666666;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
height:28px;
line-height:28px;
font-weight:bold;
font-size:12px;
color:#ffffff;
padding:3px;
}
.sidebarbawah ul {
background:#4a4a4a;
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebarbawah li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebarbawah li a:hover {
color: #8000FF;
font-size:105%;
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:25px;
text-indent:-15px;
line-height:1.5em;
}
.sidebarbawah .widget {
background:#3c3c3c;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom: 0;
padding-left:7px;
padding-right:7px;
padding-top:7px;
padding-bottom:7px;
border:0px solid #c0c0c0;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}

/* Profile
----------------------------------------------- */
.profile-img {
float: left;
margin: 5px 5px 0px 0px;
padding: 4px;
border: 1px solid $bordercolor;
}

.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}

.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}

/* Footer
----------------------------------------------- */
#footerbg {
padding:0px;
text-align:center;
background:#e6e6e6;
width:980px;
height:20px;
border:0px solid #000000;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
#footer {
width:980px;
clear:both;
margin:0 auto;
padding-top:0px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
.quickedit {
display:none;
}
#box-main-container {
clear:both;
}
.box-column {
padding-left: 0px;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
}

.box-column a:link {
color:#e16205;
font-weight:normal;
}
.box-column a:hover {
color:#0000ff;
font-weight:normal;
}
.box-column h2 {
height:28px;
line-height:28px;
font-size:13px;
color:#ffffff;
font-weight:bold;
margin:0;
background:#4ea5fe;
background-repeat:none;
padding:0 0 0 0px;
border: 1px solid #000000;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
}

]]></b:skin>

</head>

<body>
<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='headerbg'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Mp3zone (Header)' type='Header'/>
</b:section>
</div>
</div>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li>
<a href='#'>Menu1</a>
<ul>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu2</a></li>
<li><a href='#'>Submenu3</a></li>
<li><a href='#'>Submenu4</a></li>
</ul>
</li>
<li>
<a href='#'>Menu2</a>
</li>
<li>
<a href='#'>Menu3</a>
</li>
<li>
<a href='#'>Menu4</a>
</li>
<li>
<a href='#'>Menu5</a>
</li>
<li>
<a href='#'>Link1</a>
</li>
<li>
<a href='#'>Menu2</a>
</li>
<li>
<a href='#'>Menu3</a>
</li>
<li>
<a href='#'>Menu4</a>
</li>
<li>
<a href='#'>Menu5</a>
</li>
<li>
<a href='#'>Link1</a>
</li>
<li>
<a href='#'>Link2</a>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/>

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='sidebarkiri-wrapper'>
<b:section class='sidebarkiri' id='sidebarkiri' preferred='yes'>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebaratas-wrapper'>
<b:section class='sidebaratas' id='sidebaratas' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label2' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<div id='sidebar2-wrapper'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
<b:widget id='Label6' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<div id='sidebarbawah-wrapper'>
<b:section class='sidebarbawah' id='sidebarbawah' preferred='yes'>
<b:widget id='HTML23' locked='false' title='Sembang-Sembang Sini' type='HTML'/>
</b:section>
</div>
&lt;/div&gt;


<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-wrapper -->

<div id='box-main-container'>
<div id='box4' style='width: 320px; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col4' preferred='yes' style='float:left;'>
<b:widget id='Label4' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
<div id='box5' style='width: 320px; float: left; padding-left:10px; margin:0; text-align: left;'>
<b:section class='box-column' id='col5' preferred='yes' style='float:left;'>
<b:widget id='Label5' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
<div id='box6' style='width: 320px; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col6' preferred='yes' style='float:right;'>
<b:widget id='Label3' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

<div id='footerbg'>
This Blog is proudly powered by <a href='http://www.blogger.com'>Blogger.com</a> | Template by <a href='http://anggaleoputra.blogspot.com'>Angga Leo Putra</a>
</div>

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='HTML11' locked='false' title='940 Px' type='HTML'/>
</b:section>
</div>

</div></div> <!-- end outer-wrapper -->
</body>
</html>


Langkah pertama cari awalan kode CSS ini; #sidebaratas-wrapper{, #sidebarbawah-wrapper{ dan #sidebar2-wrapper{. Sebelum membuang semua kode dibahagian ini pastikan ukuran lebar #sidebar2-wrapper ditambahkan ke #sidebar-wrapper{ agar lebar di bahagian tersebut menjadi 340px.

#sidebar-wrapper{
width: 170px; (Ubah ukuran lebar kepada 340px)
float: $endSide;
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 */
padding-left:0px;
padding-top:0px; (Angka Kosong Diubah kepada 5px)
padding-bottom:0px;
padding-right;0px;
}

Langkah kedua cari kode ini; /* Sidebar2 Content, /* Sidebaratas Content dan /* Sidebarbawah Content. Bila sudah jumpa buang semua kode yang telah seri tanda dengan warna MERAH(Sila rujuk kepada Kode Template Untuk Rujukkan).

Kode CSS #sidebar-wrapper{ Yang Telah Diubahsuai

#sidebar-wrapper {
width: 340px;
float: $endSide;
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 */
padding-left:0px;
padding-top:5px;
padding-bottom:0px;
padding-right;0px;
}



Dibahagian kode HTML pula kita perlu cari awalan kode ini; <div id='sidebaratas-wrapper'>, <div id='sidebar2-wrapper'> dan <div id='sidebarbawah-wrapper'>. Seperti biasa hapus semua kode yang telah seri warnakan dan lepas tu save template.

Senang kan tak susah pun nak ubah template. Yang penting kemahuan untuk belajar mesti ada. Seri pun dulu belajar ambil masa 3 bulan baru faham sikit-sikit. Untuk melihat contoh template yang telah diubah menjadi 3 kolom sila lihat di SINI.

5 Pandangan:

tehr April 14, 2011  

kerja macam ni perlu tumpuan yang lebih ni, seri
kalau tidak, sesat dan punah
haha

Yastro April 14, 2011  

Yup...setuju ngan tehr...kene lebih masa dan tumpuan...kalau idak hancusss...tp tang download html tu jangan lope, kalau tak lg hancuss laaa....

chii April 14, 2011  

hurm..skali lg..hanya mampu memandang..

owh ye..chii ada request..ada org tanya camne nak wat button read more..mayb seri leh sharing2 is caring n loving ye :D

~~su manje~~~ April 16, 2011  

Salam Seri...
su singgah pagi sabtu up traffik je disini buat sahabat su.....

Amri Abd Rani April 17, 2011  

Pakwi xreti nk edit2 camtu, xterror sgt kot..

Pakwi pilih template yg memang dah ada beberapa kolom...lg senang, tp bg yg berminat n suka edit2 template... entry ni amat bermakna utk mereka..
Pakwi singgah dan kagum ngan ilmu Allah yg takkan cukup utk ditulis walau habis semua air di lautan...

Teman Setia

This Blog Is Proudly Sponsored By SURF7 Template Modified By Seri Bahasa Proud To Be A Kinabatangan Blogger