Bahagian ini untuk tab.Korang boleh buat tab ikut tutorial ini di Hajaaminho.Lepas tu just letak code tab kat HTML Gadget okey.

Thursday, January 12, 2012

Kod Untuk Picture Window

Yang ini sama sahaja.Tapi aku buat untuk orang yang malas nak download template tu kan.Copy Paste je la.Preview sama je macam blog aku nih.Nak buat header bersambung,dan picture window nya tidak transparent lagi.





<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' 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>
<style>body {cursor:url(http://ego-box.com/cursors/20.ani), url(http://i214.photobucket.com/albums/cc105/24168/egobox/vf/yours/cursors/20.gif), auto;} </style>
<script type='text/javascript'>
if(document.location.protocol=='http:'){
var Tynt=Tynt||[];Tynt.push('dNn3Bsljmr4l2madbi-bnq');Tynt.i={"st":true,"ap":"Read more:"};
(function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://tcr.tynt.com/ti.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})();
}
</script>

<!--RAINBOW-LINKS-STARTS-->
<script src='http://files.bloggerbuzz.net/uploads/4/1/9/0/4190919/rainbowlink.js'/>
<!--RAINBOW-LINKS-STOPS-@-HELP-http://www.bloggerbuzz.net-->
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-widthh,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<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 Style
Name: Picture Window
Designer: Josh Peterson
URL: http://www.noaesthetic.com/
----------------------------------------------- */

/* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#1a222a" value="#c75048"/>
<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)" default="#111111 url(http://themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center" value="$(color) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWzxY1uPMufYUJtheV-3kKZEWP5ADEGd2TTvzUxBkTQOjezANmXA13kL6GBJ6OAwduTqTpo1O8fyiuLlBsu2Cp68YgYtXA1w1VFigm2KJu-Fwfv3UPJmXWCGyJqkkcqgjXBW82hqRnjC0Y/s0/76.gif) repeat fixed top left"/>

<Group description="Page Text" selector=".content-inner">
<Variable name="body.font" description="Font" type="font"
default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 13px Verdana, Geneva, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#333333" value="#000000"/>
</Group>

<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
<Variable name="body.background.color" description="Outer Background" type="color" default="#296695" value="#ba3333"/>
<Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
<Variable name="post.background.color" description="Post Background" type="color" default="#ffffff" value="#ffffff"/>
</Group>

<Group description="Links" selector=".main-outer">
<Variable name="link.color" description="Link Color" type="color" default="#336699" value="#0000ff"/>
<Variable name="link.visited.color" description="Visited Color" type="color" default="#6699cc" value="#0000ff"/>
<Variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#3d85c6"/>
</Group>

<Group description="Blog Title" selector=".header">
<Variable name="header.font" description="Title Font" type="font"
default="normal normal 36px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 42px Nobile"/>
<Variable name="header.text.color" description="Text Color" type="color" default="#ffffff" value="#ffffff"/>
</Group>

<Group description="Tabs Text" selector=".tabs-outer .PageList">
<Variable name="tabs.font" description="Font" type="font"
default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px Verdana, Geneva, sans-serif;"/>
<Variable name="tabs.text.color" description="Text Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="$(link.color)" value="#000000"/>
</Group>


<Group description="Post" selector=".post blockquote .post">
<Variable name="post.title.font" description="Title Font" type="font"
default="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 16px Verdana, Geneva, sans-serif"/>
<Variable name="post.footer.text.color" description="Footer Text Color" type="color" default="#999999" value="#000000"/>
<Variable name="post.border.color" description="Border Color" type="color" default="#dddddd" value="transparent"/>
</Group>

<Group description="Gadgets" selector=".sidebar .widget">
<Variable name="widget.title.font" description="Title Font" type="font"
default="bold normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 14px Mountains of Christmas"/>
<Variable name="widget.title.text.color" description="Title Color" type="color" default="#888888" value="#000000"/>
</Group>

<Group description="Footer" selector=".footer-outer">
<Variable name="footer.text.color" description="Text Color" type="color" default="#cccccc" value="#d2d2d2"/>
<Variable name="footer.widget.title.text.color" description="Gadget Title Color" type="color" default="#aaaaaa" value="#000000"/>
</Group>

<Group description="Footer Links" selector=".footer-outer">
<Variable name="footer.link.color" description="Link Color" type="color" default="#99ccee" value="#3d85c6"/>
<Variable name="footer.link.visited.color" description="Visited Color" type="color" default="#77aaee" value="#0000ff"/>
<Variable name="footer.link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#3d85c6"/>
</Group>

<Variable name="content.margin" description="Content Margin Top" type="length" default="20px" value="20px"/>
<Variable name="content.padding" description="Content Padding" type="length" default="0" value="0"/>
<Variable name="content.background" description="Content Background" type="background"
default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>
<Variable name="content.border.radius" description="Content Border Radius" type="length" default="0" value="0"/>
<Variable name="content.shadow.spread" description="Content Shadow Spread" type="length" default="0" value="0"/>

<Variable name="header.padding" description="Header Padding" type="length" default="0" value="0"/>
<Variable name="header.background.gradient" description="Header Gradient" type="url"
default="none" value="none"/>
<Variable name="header.border.radius" description="Header Border Radius" type="length" default="0" value="0"/>

<Variable name="main.border.radius.top" description="Main Border Radius" type="length" default="20px" value="20px"/>
<Variable name="footer.border.radius.top" description="Footer Border Radius Top" type="length" default="0" value="0"/>
<Variable name="footer.border.radius.bottom" description="Footer Border Radius Bottom" type="length" default="20px" value="20px"/>
<Variable name="region.shadow.spread" description="Main and Footer Shadow Spread" type="length" default="3px" value="3px"/>
<Variable name="region.shadow.offset" description="Main and Footer Shadow Offset" type="length" default="1px" value="1px"/>

<Variable name="footer.background" description="Footer Background" type="background"
default="transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top center" value="transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top center"/>

<Variable name="tab.border.radius" description="Tab Border Radius" type="length" default="10px" value="10px"/>
<Variable name="tab.first.border.radius" description="First Tab Border Radius" type="length" default="10px" value="10px"/>
<Variable name="tabs.border.radius" description="Tabs Border Radius" type="length" default="0" value="0"/>

<Variable name="tabs.spacing" description="Tab Spacing" type="length" default=".25em" value=".25em"/>
<Variable name="tabs.margin.bottom" description="Tab Margin Bottom" type="length" default="0" value="0"/>
<Variable name="tabs.margin.sides" description="Tab Margin Sides" type="length" default="20px" value="20px"/>

<Variable name="main.background" description="Main Background" type="color"
default="#ffffff" value="#ffffff"/>
<Variable name="main.padding.sides" description="Main Padding Sides" type="length" default="20px" value="20px"/>

<Variable name="post.margin.sides" description="Post Margin Sides" type="length" default="-20px" value="-20px"/>
<Variable name="post.border.radius" description="Post Border Radius" type="length" default="5px" value="5px"/>
<Variable name="widget.title.text.transform" description="Widget Title Text Transform" type="string" default="uppercase" value="uppercase"/>

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

/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}

html body .region-inner {
min-width: 0;
max-width: 100%;
width: auto;
}

.content-outer {
font-size: 90%;
}

a:link {
text-decoration:none;
color: $(link.color);
}

a:visited {
text-decoration:none;
color: $(link.visited.color);
}

a:hover {
text-decoration:underline;
color: $(link.hover.color);
}

.content-outer {
background: $(content.background);

-moz-border-radius: $(content.border.radius);
-webkit-border-radius: $(content.border.radius);
-goog-ms-border-radius: $(content.border.radius);
border-radius: $(content.border.radius);

-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

margin: $(content.margin) auto;
}

.content-inner {
padding: $(content.padding);
}

/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll top center;
_background-image: none;

color: $(header.text.color);

-moz-border-radius: $(header.border.radius);
-webkit-border-radius: $(header.border.radius);
-goog-ms-border-radius: $(header.border.radius);
border-radius: $(header.border.radius);
}

.Header img, .Header #header-inner {
-moz-border-radius: $(header.border.radius);
-webkit-border-radius: $(header.border.radius);
-goog-ms-border-radius: $(header.border.radius);
border-radius: $(header.border.radius);
}

.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
padding-left: $(header.padding);
padding-right: $(header.padding);

}

.Header h1 {
font: $(header.font);
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.Header h1 a {
color: $(header.text.color);
}

.Header .description {
font-size: 130%;
}


/* Headings
----------------------------------------------- */
h2 {

font: $(widget.title.font);
text-transform: $(widget.title.text.transform);
color: $(widget.title.text.color);
background:url("http://i696.photobucket.com/albums/vv323/naz89_blog/back07.gif");
border: solid 2px #33CCFF ;
/* the border will curve into a 'D' */
-moz-border-radius: 40px 10px;
border-radius: 40px 10px;
margin:5px 5px;
padding:10px;
}
u {

text-decoration:underline; border-bottom: 2px double #66FFFF;}

/* Main
----------------------------------------------- */
.main-outer {
border: 2px solid #FFFFFF;
-moz-border-radius-bottomleft: 30px;
-moz-border-radius-bottomright: 30px;
background: $(main.background);

}

.main-inner {
padding: 15px $(main.padding.sides) 20px;
}

.main-inner .column-center-inner {
padding: 0 0;
}

.main-inner .column-left-inner {
padding-left: 0;
}

.main-inner .column-right-inner {
padding-right: 0;
}

/* Tabs
----------------------------------------------- */
.tabs-outer {
border: 2px solid #FFFFFF;
background: $(main.background);
padding-top: 20px;
padding-bottom: 10px;
}

/* Posts
----------------------------------------------- */
h3.post-title {
background: #99CCFF;
border: dashed #000000 2px;
/* the border will curve into a 'D' */
padding: 5px 5px;
margin: 0 $(post.margin.sides) 10px;

}

.comments h4 {
margin: 1em 0 0;
font: $(post.title.font);

}

.post-outer {
background-color: $(post.background.color);


padding: 15px 20px;
margin: 0 $(post.margin.sides) 20px;
}

.post-body {
line-height: 1.4;
font-size: 110%;
position: relative;
}
.post blockquote {
background:url("http://i696.photobucket.com/albums/vv323/naz89_blog/back07.gif");
border-left: solid 10px #33CCFF;

{
margin:0;
padding:0;
}

.post-header {
margin: 0 0 1.5em;

color: $(post.footer.text.color);
line-height: 1.6;
}

.post-footer {
margin: .5em 0 0;

color: $(post.footer.text.color);
line-height: 1.6;
}

#blog-pager {
font-size: 140%
}

#comments .comment-author {
padding-top: 1.5em;

border-top: dashed 1px #ccc;
border-top: dashed 1px rgba(128, 128, 128, .5);

background-position: 0 1.5em;
}

#comments .comment-author:first-child {
padding-top: 0;

border-top: none;
}

.avatar-image-container {
margin: .2em 0 0;
}

/* Widgets
----------------------------------------------- */
.widget ul, .widget #ArchiveList ul.flat {
padding: 0;
list-style: none;

}

.widget ul li, .widget #ArchiveList ul.flat li {
margin:0;
padding:0 0 2px 12px;
margin-bottom:3px;
line-height:1.4em;
border-top: solid 2px #ccc;
border-top: solid 2px rgba(128, 128, 128, .5);
}

.widget ul li:first-child, .widget #ArchiveList ul.flat li:first-child {
border-top: none;
}

.widget .post-body ul {
list-style: disc;
}

.widget .post-body ul li {
border: none;

}

/* Footer
----------------------------------------------- */
.footer-outer {
color:$(footer.text.color);
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi9YSm_GjiRMQ462UK_pj7pePAMDfdYwFtSj46FyBG0ni35NyS9vB4_16ikII0YWNt3vzcw6oiV6DxRrx7dl0NYV0FhhgTN1kXI8PjkC_t3eD9TJYQ1FWEUtaZUbbnQQPD5nYeb34whIM/s1600/mata-lalat-footer.png") no repeat;
-moz-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);
-webkit-border-top-left-radius: $(footer.border.radius.top);
-webkit-border-top-right-radius: $(footer.border.radius.top);
-webkit-border-bottom-left-radius: $(footer.border.radius.bottom);
-webkit-border-bottom-right-radius: $(footer.border.radius.bottom);
-goog-ms-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);
border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);

-moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
}

.footer-inner {
padding: 10px $(main.padding.sides) 20px;
}

.footer-outer a {
color: $(footer.link.color);
}

.footer-outer a:visited {
color: $(footer.link.visited.color);
}

.footer-outer a:hover {
color: $(footer.link.hover.color);
}

.footer-outer .widget h2 {
color: $(footer.widget.title.text.color);
padding-top: 0px;
font-size: 85%;
line-height: 1.5em;
text-align: center;
}
}

#comments h4 {
margin: 1em 3em;
font-weight: bold;
line-height: 1.4em;
color: #ffffff;
}
#comments-block{
margin:0;
padding:0;
}
#comments-block .comment-author{
background:#33ccff !important;

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;


padding:5px;

font-size:13px;

font-weight:bold;

border:1px solid #33ccff;
}
#comments-block .comment-body{
margin: 0;

font-size: 13px;

border-left: 1px solid #33ccff;
border-right: 1px solid #33ccff;
margin-top: -5px; /*position*/

padding: 5px;
}
#comments-block .comment-footer{
margin:0;

font-size: 13px;

font-weight: normal;

margin-bottom: 20px;

border-left: 1px solid #33ccff;
border-right: 1px solid #33ccff;
border-bottom: 1px solid #33ccff;

-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;

margin-top: -12px; /*position*/

padding: 5px;
}
#comments-block .deleted-comment{
font-style:italic;
color:gray;
}
#comments-block .comment-author a{
color:#ffffff !important;
}
#comments-block .comment-footer a, .comment-body a{
color:#33ccff !important;
}
.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
.region-inner {margin-top:0;}
.content-outer {margin-top:0;}
]]></b:skin>
<b:template-skin>
<b:variable default='930px' name='content.width' type='length' value='1000px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='300px'/>
<b:variable default='360px' name='main.column.right.width' type='length' value='0px'/>

<![CDATA[
body {
min-width: $(content.width);
}

.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}

.main-inner .columns {
padding-left: $(main.column.left.width);
padding-right: $(main.column.right.width);
}

.main-inner .fauxcolumn-center-outer {
left: $(main.column.left.width);
right: $(main.column.right.width);
/* IE6 does not respect left and right together */
_width: expression(this.parentNode.offsetWidth -
parseInt("$(main.column.left.width)") -
parseInt("$(main.column.right.width)") + 'px');
}

.main-inner .fauxcolumn-left-outer {
width: $(main.column.left.width);

}

.main-inner .fauxcolumn-right-outer {
width: $(main.column.right.width);

}

.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}

.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}

#layout {
min-width: 0;
}

#layout .content-outer {
min-width: 0;
width: 800px;
}

#layout .region-inner {
min-width: 0;
width: auto;
}
]]>
</b:template-skin>

</head>
<script src='http://sites.google.com/site/copycatgroup/Home/jsfile/rainbowtext.js'/>
<body expr:class='"loading" + data:blog.mobileClass'>
<div class='body-fauxcolumns'>
<div class='fauxcolumn-outer body-fauxcolumn-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</div>

<div class='content'>
<div class='content-fauxcolumns'>
<div class='fauxcolumn-outer content-fauxcolumn-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</div>

<div class='content-outer'>
<div class='content-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left content-fauxborder-left'>
<div class='fauxborder-right content-fauxborder-right'/>
<div class='content-inner'>

<header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Template Percuma Untuk Korang - Mari Download! (Header)' type='Header'/>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>

<div class='tabs-outer'>
<div class='tabs-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left tabs-fauxborder-left'>
<div class='fauxborder-right tabs-fauxborder-right'/>
<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML9' locked='false' title='' type='HTML'/>
</b:section>
<b:section class='tabs' id='crosscol-overflow' showaddelement='yes'/>
</div>
</div>
<div class='tabs-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>

<div class='main-outer'>
<div class='main-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>

<div class='fauxborder-left main-fauxborder-left'>
<div class='fauxborder-right main-fauxborder-right'/>
<div class='region-inner main-inner'>

<div class='columns fauxcolumns'>

<div class='fauxcolumn-outer fauxcolumn-center-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>

<div class='fauxcolumn-outer fauxcolumn-left-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>

<div class='fauxcolumn-outer fauxcolumn-right-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'/>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>

<!-- corrects IE6 width calculation -->
<div class='columns-inner'>

<div class='column-center-outer'>
<div class='column-center-inner'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
</div>
</div>

<div class='column-left-outer'>
<div class='column-left-inner'>
<aside>
<macro:include id='main-column-left-sections' name='sections'>
<macro:param default='0' name='num' value='1'/>
<macro:param default='sidebar-left' name='idPrefix'/>
<macro:param default='sidebar' name='class'/>
<macro:param default='true' name='includeBottom'/>
</macro:include>
</aside>
</div>
</div>

<div class='column-right-outer'>
<div class='column-right-inner'>
<aside>
<macro:include id='main-column-right-sections' name='sections'>
<macro:param default='2' name='num' value='0'/>
<macro:param default='sidebar-right' name='idPrefix'/>
<macro:param default='sidebar' name='class'/>
<macro:param default='true' name='includeBottom'/>
</macro:include>
</aside>
</div>
</div>

</div>

<div style='clear: both'/>
<!-- columns -->
</div>

<!-- main -->
</div>
</div>
<div class='main-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>

<footer>
<div class='footer-outer'>
<div class='footer-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left footer-fauxborder-left'>
<div class='fauxborder-right footer-fauxborder-right'/>
<div class='region-inner footer-inner'>
<macro:include id='footer-sections' name='sections'>
<macro:param default='2' name='num' value='1'/>
<macro:param default='footer' name='idPrefix'/>
<macro:param default='foot' name='class'/>
<macro:param default='false' name='includeBottom'/>
</macro:include>
<!-- outside of the include in order to lock Attribution widget -->
<b:section class='foot' id='footer-3' showaddelement='no'/>
</div>
</div>
<div class='footer-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</footer>

<!-- content -->
</div>
</div>
<div class='content-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</div>

<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<a href='#' style='position: fixed; right: 5px; bottom: 5px;' title='Back to Top'><img height='48' src='http://i696.photobucket.com/albums/vv323/naz89_blog/1295538838_arrow-up.png' width='48'/></a>
</body>

<macro:includable id='sections' var='col'>
<macro:if cond='data:col.num == 0'>
<macro:else/>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-1"' preferred='yes' showaddelement='yes'/>

<macro:if cond='data:col.num >= 2'>
<table border='0' cellpadding='0' cellspacing='0' mexpr:class='"section-columns columns-" + data:col.num'>
<tbody>
<tr>
<td class='first columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-1"'/>
</td>

<td class='columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-2"'/>
</td>

<macro:if cond='data:col.num >= 3'>
<td class='columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-3"'/>
</td>
</macro:if>

<macro:if cond='data:col.num >= 4'>
<td class='columns-cell'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-4"'/>
</td>
</macro:if>
</tr>
</tbody>
</table>

<macro:if cond='data:col.includeBottom'>
<b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-3"' showaddelement='no'/>
</macro:if>
</macro:if>
</macro:if>
</macro:includable>

<b:section-contents id='sidebar-left-1'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='BlogList1' locked='false' title='Koleksi Blog' type='BlogList'/>
</b:section-contents><b:section-contents id='footer-1'/></html>





Saturday, December 10, 2011

Masih Diberi Peluang Untuk Bernafas {22Tahun}

11/12/1989

Saturday, October 29, 2011

Cara Nak Install & Edit Template Miss Carribean Blue

Assalamualaikum semua :) Okey,cara nak install template Miss Carribean Blue ini :
1. Mula-mula download template ini di S I N I .Tekan button Download Now kaler coklat itu.Tunggu dia habis loading & then tekan Download File Now.



2. Dah selesai download kan.Kemudian pergi blog korang,tekan dashboard --> design --> edit HTML.Browse template tadi & Uploadkan template XML yang dah korang download tadi.Then preview & save.Sebelum tu backup dulu template lama korang.Karang nangis pulak,bukan salah saya.Hihi.



Preview dulu okey.Then Save Template.Dah siap install template!Yeay.

Cara Nak Edit Template Ini

1.Untuk tukar background blog korang,pergi Design --> Template Designer --> Background --> Browse & Upload background korang nak.Tak faham?Boleh rujuk SINI.

2.Untuk tukar background/color/bentuk title post & entri.Pergi Design --> Edit HTML --> CTRL+F h3.post-title {
Korang boleh edit la kod-kod itu.
background: #99CCFF; (warna background kaler)
border: dashed #000000 2px; (border nak macam mana)
 /* the border will curve into a 'D' */
  padding: 5px 5px;
  margin: 0 $(post.margin.sides) 10px;
Nak tau bentuk border?Boleh rujuk SINI.

3.Untuk tukar background/color/bentuk sidebar title & date header.Pergi Design --> Edit HTML --> CTRL+F h2 {
Korang boleh edit kod macam korang edit kod untuk title post di atas.
/* Headings
----------------------------------------------- */
h2 {

  font: $(widget.title.font);
  text-transform: $(widget.title.text.transform);
  color: $(widget.title.text.color);
background:url("http://i696.photobucket.com/albums/vv323/naz89_blog/back07.gif");
border: solid 2px #33CCFF ; (jenis/tebal/kaler border)
 /* the border will curve into a 'D' */
  -moz-border-radius: 40px 10px;
        border-radius: 40px 10px;
margin:5px 5px;
padding:10px; 
}

4.Untuk border blog,better biar putih sebab kod aku dah diubah suai untuk letak tab kat atas.Kalau korang ubah arna border kepada kaler-kaler akan menghasilkan blog yang hodoh.Kecuali kalau korang buang kod untuk tab.Kod untuk tab ialah 
/* Tabs
----------------------------------------------- */
.tabs-outer {
border: 2px solid #FFFFFF;
  background: $(main.background);
padding-top: 20px;
padding-bottom: 10px;
}
Kod untuk main blog ialah 
.main-outer {
border: 2px solid #FFFFFF;
-moz-border-radius-bottomleft: 30px;
-moz-border-radius-bottomright: 30px;
  background: $(main.background);

}
Perasan tak aku just buat border curve untuk bawah sahaja bagi main-outer itu?Thats why la korang jangan buat kaler-kaler itu main-outer border.Iskk.Kalau nak buat gak border kaler-kaler korang buang je la kod tab itu.Dan tambah la border curve untuk border main-outer tu.

5.Untuk buat header bersambung macam mane? Lihat & teliti betul-betul tutorial INI .Tengok betul dan buat betul-betul sebab memang tutorial ini untuk template ini.Header transparent? Lihat SINI.

6.Nak rujuk warna pilihan hati? Lihat SINI.

7.Kalau korang dah biasa kod HTML untuk previous template blog korang,semua ini tiada masalah punya la.Percaya la.Maybe bile nak buat header bersambung tu cam pening la.Tapi senang je.Percaya la.Aku pakai photoshop.Kalau nak pakai photoscape,aku tak pakar sangat cam mana nak buat.Korang boleh search tutorial lain yang buat header bersambung : CeritaCaye,Gadis double.

8.Nak buat footer bersambung dengan body cam mana kak?Sorry adik,akak memang tak tau,sebab sampai sekarang akak tak jumpa cara.Akak punye footer pon just add picture je. Kalau korang nak rujuk sini pon boleyy,tapi tapi kan,tak tau jadi ke tak.Sebab akak buat tak menjadi.hihi.LieyaLolly

Wednesday, October 12, 2011

Percuma Template Header & Body Bersambung. DONWLOAD DI SINI!

Designer Template Picture Window yang telah diubahsuai dan boleh bersambung header & body. Kalau nak boleh download,saya bagi percuma template ini!

Link Baru

Assalamualaikum.Harap maaf.Aku tak sedar yang link download yang lama sudah broken tak boleh pakai.So,aku ganti dengan baru dan aku pon dah edit sedikit coding supaya coding tu takde anasir-anasir luar.So,korang pon senang la nak edit kan. Sila DOWNLOAD yang baru okey.


Sunday, May 15, 2011

Download Template

Untuk Download...Click DOWNLOAD


Sunday, March 13, 2011

Kod Warna Yang Digunakan

Bagi template ini, kod warna yang banyak saya gunakan adalah biru iaitu 33ccff dan 99ccff. So, kalau nak edit just pergi ke Edit HTML dan Ctrl+F kod warna tersebut dan ubah okey.