xtreme fat loss diet download recipes results program free

xtreme fat loss diet download xtreme fat loss diet recipes xtreme fat loss diet results xtreme fat loss diet program xtreme fat loss diet free

Landing Page

Landing Page
» » Tutorial Modifikasi Template Bhg. 2

Tutorial Modifikasi Template Bhg. 2

Tutorial kali ini seri akan tunjukkan cara hendak mengubah header yang sedia ada. Sebenarnya template ini mengandungi 2 sub-section dibahagian header. Satu bahagian untuk memasang latar header dan yang satu lagi untuk memasang widget.

Bagi mereka yang tak ingin membuang atau mengubahsuai dibahagian ini tidak perlu melakukan apa-apa perubahan.

Gambar Header Yang Belum Di Ubahsuai

Gambar Header Yang Telah Di Ubahsuai

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:474px;
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:0px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:0px;
border:0px;
}
#header2-wrapper {
background:#ffffff;
height:70px;
width:486px;
float:right;
padding-bottom:5px;
margin-left:0px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:0px;
-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: 640px;
float: left;
margin: 0;
padding: 0;
}
#NavbarMenuright {
background: #2b2b2b;
width: 268px;
font-size: 11px;
float: right;
margin: 0px;
padding-left: 3px;
padding-right: 0px;
padding-top: 3px;
padding-bottom: 3px;
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 {
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;
}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #ffffff;
width: 220px;
color: #202020;
font-size: 11px;
font-family: Trebuchet MS;
font-weight: normal;
margin: 0;
padding: 3px;
border: 1px solid #c0c0c0;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
display: inline;
}
#searchbutton {
cursor:pointer;
background: #ffffff;
color: #fea323;
font-size: 10px;
font-family: Trebuchet MS;
margin: 0 0 0 5px;
padding: 2px;
font-weight: bold;
border: 1px solid #c0c0c0;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
}
/* 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 id='header2-wrapper'>
<b:section class='header2' id='header2' preferred='yes'/>
</div>

</div>

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'><img border='0' height='14' src='http://i730.photobucket.com/albums/ww306/gozhilaq/home2.gif' width='14'/> Home</a></li>
<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='#'>Link2</a>
</li>
</ul>
</div>

<div id='NavbarMenuright'>
&lt;form action=&#39;/demo/church/index.php&#39; id=&#39;searchform&#39; method=&#39;get&#39;&gt; &lt;input id=&#39;searchbox&#39; name=&#39;s&#39; onblur=&#39;if (this.value == &#39;&#39;) {this.value = &#39;Search this website...&#39;;}&#39; onfocus=&#39;if (this.value == &#39;Search this website...&#39;) {this.value = &#39;&#39;;}&#39; type=&#39;text&#39; value=&#39;Search this website...&#39;/&gt; &lt;input id=&#39;searchbutton&#39; type=&#39;submit&#39; value=&#39;GO&#39;/&gt;&lt;/form&gt;
</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>



Dibahagian header ini mengandungi 2 sub-section, #header-wrapper dan #header2-wrapper. Yang perlu kita buang ialah bahagian kode #header2-wrapper. Sila perhatikan lebar kedua-dua sub-section tersebut;
#header-wrapper - width:474px;
height:70px;
float:left;
padding-bottom:5px;
margin-left:10px;
margin-right:0px; (Angka Kosong Ganti Dengan 10px)
margin-top:10px;
margin-bottom:10px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:0px; (Angka Kosong Ganti Dengan 15px)
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:0px; (Angka Kosong Ganti Dengan 15px)
border:0px;
}

#header2-wrapper - width:486px;

Apa yang perlu dilakukan ialah campur lebar kedua-dua sub-section tersebut agar lebar #header-wrapper berubah menjadi 960px.

Kode CSS header-wrapper Yang Telah Diubahsuai

#header-wrapper {
background:#ffffff;
width:960px;
height:70px;
float:left;
padding-bottom:5px;
margin-left:10px;
margin-right:10px;
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;
}


Langkah selanjutnya cari kode <div id='header2-wrapper'>, buang semua kode yang berwarna BIRU. Save template dan lihat hasilnya.

Selamat mencuba, sila rujuk di SINI untuk melihat contoh template.

Share :

Facebook Twitter Google+