Tutorial Modifikasi Template Bhg. 6

Setelah lama berehat, kini kita kembali lagi pada artikel Tutorial Modifikasi Template. Kali ini kita hanya menyentuh di bahagian kode CSS saja. Tutorial kali ini seri akan mengajar cara hendak mengecilkan atau memperbesarkan saiz template.

Untuk tujuan ini seri akan mengecilkan saiz template yang sedia ada dari ukuran 980px kepada 960px. Sila ambil PERHATIAN, bila kita hendak mengecilkan atau memperbesarkan saiz (lebar) template, jumlah px yang hendak diubah MESTILAH serata disetiap bahagian.

Kedua, jika template kita versi 2 kolom (main-wrapper + sidebar kiri atau sidebar kanan) atau 3 kolom (main-wrapper + sidebar kiri + sidebar kanan), kita hanya perlu mengubah salah satu bahagian saja.

Jika ingin membuat perubahan di main-wrapper dan salah satu sidebar, jumlah perubahan px haruslah sama dengan jumlah asal px yang hendak dibuang atau ditambah. Contoh kita hendak menambah 30px untuk kelebaran template. Jadi 30px tadi haruslah di serapkan diantara main-wrapper atau di antara sidebar kiri atau sidebar kanan.

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 == "index"'>
<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; (Ubah ukuran lebar kepada 960px)
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; (Ubah ukuran lebar kepada 940px)
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; (Ubah ukuran lebar kepada 960px)
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; (Ubah ukuran lebar kepada 940px)
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; (Ubah ukuran lebar kepada 960px)
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;
}
#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: 340px; (Ubah ukuran lebar kepada 320px)
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;
}

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

/* 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; (Ubah ukuran lebar kepada 960px)
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;
}

#box-main-container {
clear:both;
}
.box-column {
padding-left: 0px;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
}
.quickedit {
display:none;
}
.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'>


<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='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Label2' locked='false' title='Labels' type='Label'/>
</b:section>
</div>


<div class='clear'> </div>

</div> 

<div id='box-main-container'>
<div id='box4' style='width: 320px; (Ubah ukuran lebar kepada 313px) 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; (Ubah ukuran lebar kepada 314px) 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; (Ubah ukuran lebar kepada 313px) 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></div> 
</body>
</html>

Bahagian-Bahagian Yang Perlu Di Ubah

#headerbg {
width:980px; (Ubah ukuran lebar kepada 960px)

#header-wrapper {
width:960px; (Ubah ukuran lebar kepada 940px)

#NavbarMenu {
width:980px; (Ubah ukuran lebar kepada 960px)

#NavbarMenuleft {
width:960px; (Ubah ukuran lebar kepada 940px)

#outer-wrapper {
width:980px; (Ubah ukuran lebar kepada 960px)

#sidebar-wrapper {
width: 340px; (Ubah ukuran lebar kepada 320px)

#footerbg {
width:980px; (Ubah ukuran lebar kepada 960px)

#box-main-container {
<div id='box4' style='width: 320px; (Ubah ukuran lebar kepada 313px)
<div id='box5' style='width: 320px; (Ubah ukuran lebar kepada 314px)
<div id='box6' style='width: 320px; (Ubah ukuran lebar kepada 313px)

Perhatikan dibahagian box-main-container. Ia dibahagikan kepada 3 sub-block. Jadi seri buang 7px di box4 dan box6. Sementara di box5 seri buang 6px. Jadi keseluruhan jumlah px yang seri buang ialah 20px.

Sila rujuk kepada Kode Template Untuk Rujukkan di atas untuk keterangan lebih lanjut. Semua bahagian yang hendak diubah telah seri tandakan. Selamat mencuba.

Landing Page

Tutorial Modifikasi Template Bhg. 6

Share :

Previous

Next