blog guru.com

Rabu, 07 November 2018

23.05 Posted by gleftinlove.blogspot.co.id No Comments

 ...&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&lt;style type='text/css'&gt;
/*&lt;![CDATA[*/
pre {
  position: relative;
  overflow: visible;
  display: block;
  padding: 0;
  white-space: initial;
  word-break: normal;
  word-wrap: normal;
  background: #eee;
  line-height: 20px!important;
  border: 0;
  border-radius: 0
}

pre code {
  white-space:initial;
}
mark,
mark span {
  background-color: red!important;
  color: #fff!important
}

pre .btn {
  -webkit-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  padding: 2px 6px;
  position: absolute;
  right: 4px;
  top: 4px;
}

.btn {
  position: relative;
  display: inline-block;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: bold;
  line-height: 20px;
  color: #333;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-color: #eee;
  background-image: linear-gradient(#fcfcfc, #eee);
  border: 1px solid #d5d5d5;
  border-radius: 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-appearance: none;
}

code {
  font-family: Consolas, Monaco, "Andale Mono", monospace;
  white-space: initial;
  word-spacing: normal;
  word-break: normal;
  hyphens: none;
  color: #BC587E;
  font-size: 80%;
  padding: 0;
  vertical-align: 1px;
  font-style: normal!important
}

img.clippy {
  position: relative;
  vertical-align: middle;
  padding: 0;
  background: none;
  border: none;
  -moz-box-shadow: 0;
  -webkit-box-shadow: 0;
  box-shadow: 0;
}

pre:hover .btn {
  opacity: 1;
}

.tooltipped {
  position: relative
}

.tooltipped:after {
  position: absolute;
  z-index: 1000000;
  display: none;
  padding: 5px 8px;
  font: normal normal 11px/1.5 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  color: #333;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: break-word;
  white-space: pre;
  pointer-events: none;
  content: attr(aria-label);
  background: rgba(252, 252, 252, 0.8);
  border-radius: 3px;
  -webkit-font-smoothing: subpixel-antialiased
}

.tooltipped:before {
  position: absolute;
  z-index: 1000001;
  display: none;
  width: 0;
  height: 0;
  color: rgba(252, 252, 252, 0.8);
  pointer-events: none;
  content: "";
  border: 5px solid transparent
}

.tooltipped:hover:before,
.tooltipped:hover:after,
.tooltipped:active:before,
.tooltipped:active:after,
.tooltipped:focus:before,
.tooltipped:focus:after {
  display: inline-block;
  text-decoration: none
}

.tooltipped-w:after {
  right: 100%;
  bottom: 50%;
  margin-right: 5px;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(50%)
}

.tooltipped-w:before {
  top: 50%;
  bottom: 50%;
  left: -5px;
  margin-top: -5px;
  border-left-color: rgba(252, 252, 252, 0.8)
}

.tooltipped-w:after {
  right: 100%;
  bottom: 50%;
  margin-right: 5px;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(50%)
}

.hljs {
  display: block;
  overflow-x: auto;
  padding: .5em;
  background: #333;
  color: #fff
}

.hljs-name,
.hljs-strong {
  font-weight: 700
}

.hljs-code,
.hljs-emphasis {
  font-style: italic
}

.hljs-tag {
  color: #62c8f3
}

.hljs-selector-class,
.hljs-selector-id,
.hljs-template-variable,
.hljs-variable {
  color: #ade5fc
}

.hljs-bullet,
.hljs-string {
  color: #a2fca2
}

.hljs-attribute,
.hljs-built_in,
.hljs-builtin-name,
.hljs-quote,
.hljs-section,
.hljs-title,
.hljs-type {
  color: #ffa
}

.hljs-bullet,
.hljs-number,
.hljs-symbol {
  color: #d36363
}

.hljs-keyword,
.hljs-literal,
.hljs-selector-tag {
  color: #fcc28c
}

.hljs-code,
.hljs-comment,
.hljs-deletion {
  color: #888
}

.hljs-link,
.hljs-regexp {
  color: #c6b4f0
}

.hljs-meta {
  color: #fc9b9b
}

.hljs-deletion {
  background-color: #fc9b9b;
  color: #333
}

.hljs-addition {
  background-color: #a2fca2;
  color: #333
}

.hljs a {
  color: inherit
}

.hljs a:focus,
.hljs a:hover {
  color: inherit;
  text-decoration: underline
}
/*]]&gt;*/
&lt;/style&gt;
&lt;/b:if&gt;...

 ...Masukan Kode CSS Disini...

 ...Masukan Kode JavaScript Disini...

 ...Masukan Kode jQuery disini...

21.09 Posted by gleftinlove.blogspot.co.id No Comments

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
pre {
  position: relative;
  overflow: visible;
  display: block;
  padding: 0;
  white-space: initial;
  word-break: normal;
  word-wrap: normal;
  background: #eee;
  line-height: 20px!important;
  border: 0;
  border-radius: 0
}

pre code {
  white-space:initial;
}
mark,
mark span {
  background-color: red!important;
  color: #fff!important
}

pre .btn {
  -webkit-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  padding: 2px 6px;
  position: absolute;
  right: 4px;
  top: 4px;
}

.btn {
  position: relative;
  display: inline-block;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: bold;
  line-height: 20px;
  color: #333;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-color: #eee;
  background-image: linear-gradient(#fcfcfc, #eee);
  border: 1px solid #d5d5d5;
  border-radius: 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-appearance: none;
}

code {
  font-family: Consolas, Monaco, "Andale Mono", monospace;
  white-space: initial;
  word-spacing: normal;
  word-break: normal;
  hyphens: none;
  color: #BC587E;
  font-size: 80%;
  padding: 0;
  vertical-align: 1px;
  font-style: normal!important
}

img.clippy {
  position: relative;
  vertical-align: middle;
  padding: 0;
  background: none;
  border: none;
  -moz-box-shadow: 0;
  -webkit-box-shadow: 0;
  box-shadow: 0;
}

pre:hover .btn {
  opacity: 1;
}

.tooltipped {
  position: relative
}

.tooltipped:after {
  position: absolute;
  z-index: 1000000;
  display: none;
  padding: 5px 8px;
  font: normal normal 11px/1.5 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  color: #333;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: break-word;
  white-space: pre;
  pointer-events: none;
  content: attr(aria-label);
  background: rgba(252, 252, 252, 0.8);
  border-radius: 3px;
  -webkit-font-smoothing: subpixel-antialiased
}

.tooltipped:before {
  position: absolute;
  z-index: 1000001;
  display: none;
  width: 0;
  height: 0;
  color: rgba(252, 252, 252, 0.8);
  pointer-events: none;
  content: "";
  border: 5px solid transparent
}

.tooltipped:hover:before,
.tooltipped:hover:after,
.tooltipped:active:before,
.tooltipped:active:after,
.tooltipped:focus:before,
.tooltipped:focus:after {
  display: inline-block;
  text-decoration: none
}

.tooltipped-w:after {
  right: 100%;
  bottom: 50%;
  margin-right: 5px;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(50%)
}

.tooltipped-w:before {
  top: 50%;
  bottom: 50%;
  left: -5px;
  margin-top: -5px;
  border-left-color: rgba(252, 252, 252, 0.8)
}

.tooltipped-w:after {
  right: 100%;
  bottom: 50%;
  margin-right: 5px;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(50%)
}

.hljs {
  display: block;
  overflow-x: auto;
  padding: .5em;
  background: #333;
  color: #fff
}

.hljs-name,
.hljs-strong {
  font-weight: 700
}

.hljs-code,
.hljs-emphasis {
  font-style: italic
}

.hljs-tag {
  color: #62c8f3
}

.hljs-selector-class,
.hljs-selector-id,
.hljs-template-variable,
.hljs-variable {
  color: #ade5fc
}

.hljs-bullet,
.hljs-string {
  color: #a2fca2
}

.hljs-attribute,
.hljs-built_in,
.hljs-builtin-name,
.hljs-quote,
.hljs-section,
.hljs-title,
.hljs-type {
  color: #ffa
}

.hljs-bullet,
.hljs-number,
.hljs-symbol {
  color: #d36363
}

.hljs-keyword,
.hljs-literal,
.hljs-selector-tag {
  color: #fcc28c
}

.hljs-code,
.hljs-comment,
.hljs-deletion {
  color: #888
}

.hljs-link,
.hljs-regexp {
  color: #c6b4f0
}

.hljs-meta {
  color: #fc9b9b
}

.hljs-deletion {
  background-color: #fc9b9b;
  color: #333
}

.hljs-addition {
  background-color: #a2fca2;
  color: #333
}

.hljs a {
  color: inherit
}

.hljs a:focus,
.hljs a:hover {
  color: inherit;
  text-decoration: underline
}
/*]]>*/
</style>
</b:if>

 ISI KODE

 ISI KODE

  ISI KODE

 ISI KODE

Rabu, 08 Februari 2017

23.42 Posted by gleftinlove.blogspot.co.id No Comments

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 == "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;
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'>


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


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

</div> 

<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> 
</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 menjadi340px.

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

blog guru.com

Subscribe

Recent Posts

Like us

Formulir Kontak

Ads

Featured Posts

Rabu, 07 November 2018

Rabu, 08 Februari 2017

Recent

Weekly

Comment