Gambar Negative Effect


Try me~
  • Dashboard > Template > Edit Html >  Click icon yang mcm ►  > Ctrl+F  (Pastikan anda click dlm box html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
a:visited {

  • Copy (Ctrl + C) code di bawah 
a img {

-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;


}
img:hover {

-webkit-filter:invert(1)


}

  • Paste kan (Ctlr+V) code atas tadi di ATAS code yang a:visited { tadi
  • Dan preview. Kalau tak jadi apa2 dan takde ERROR boleh lah SAVE !

Gambar Leaf Effect


Try me~
  • Dashboard > Template > Edit Html >  Click icon yang mcm ►  > Ctrl+F  (Pastikan anda click dlm box html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
a:visited {

  • Copy (Ctrl + C) code di bawah 
a img {

-webkit-border-top-left-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-bottomright: 100px;
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;


}
img:hover {

-webkit-border-top-right-radius: 100px;
-webkit-border-bottom-left-radius: 100px;
-moz-border-radius-topright: 100px;
-moz-border-radius-bottomleft: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomright: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 0px;

}

  • Paste kan (Ctlr+V) code atas tadi di ATAS code yang a:visited { tadi
  • Dan preview. Kalau tak jadi apa2 dan takde ERROR boleh lah SAVE !

Gambar Swing Effect


Try me~
  • Dashboard > Template > Edit Html >  Click icon yang mcm ►  > Ctrl+F  (Pastikan anda click dlm box html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
a:visited {

  • Copy (Ctrl + C) code di bawah 
a img {

-webkit-transform: perspective(400px) rotateX(0deg);
-moz-transform:perspective(400px) rotateX(0deg);
-o-transform:perspective(400px) rotateX(0deg) ;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;


}
img:hover {

-webkit-transform: perspective(400px) rotateX(360deg) ;
-moz-transform: perspective(400px) rotateX(360deg) ;
-o-transform: perspective(400px) rotateX(360deg);

}

  • Paste kan (Ctlr+V) code atas tadi di ATAS code yang a:visited { tadi
  • Dan preview. Kalau tak jadi apa2 dan takde ERROR boleh lah SAVE !

Gambar Menyenget Bila Disentuh


Try me~
  • Dashboard > Template > Edit Html >  Click icon yang mcm ►  > Ctrl+F  (Pastikan anda click dlm box html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
a:visited {

  • Copy (Ctrl + C) code di bawah 
a img {

-webkit-transform: rotate(0deg) ;
-moz-transform: rotate(0deg) ;
-o-transform: rotate(0deg) ;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;

}
img:hover {

-webkit-transform: rotate(36deg) ;
-moz-transform: rotate(36deg) ;
-o-transform: rotate(36deg) ;


}

  • Paste kan (Ctlr+V) code atas tadi di ATAS code yang a:visited { tadi
  • Dan preview. Kalau tak jadi apa2 dan takde ERROR boleh lah SAVE !

Gambar Berpusing Dan Mengecut


Try me~
  • Dashboard > Template > Edit Html >  Click icon yang mcm ►  > Ctrl+F  (Pastikan anda click dlm box html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
a:visited {

  • Copy (Ctrl + C) code di bawah 
a img {

-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;


}
img:hover {

-webkit-transform: rotate(360deg) scale(0);
-moz-transform: rotate(360deg) scale(0);
-o-transform: rotate(360deg) scale(0) 

}

  • Paste kan (Ctlr+V) code atas tadi di ATAS code yang a:visited { tadi
  • Dan preview. Kalau tak jadi apa2 dan takde ERROR boleh lah SAVE !

Gambar Blur Bila Disentuh


touche me~
  • Dashboard > Template > Edit Html >  Click icon yang mcm ►  > Ctrl+F  (Pastikan anda click dlm box html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
a:visited {

  • Copy (Ctrl + C) code di bawah 
a img {

opacity:1;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover {
opacity:0.4;
}

  • Paste kan (Ctlr+V) code atas tadi di ATAS code yang a:visited { tadi
  • Dan preview. Kalau tak jadi apa2 dan takde ERROR boleh lah SAVE !

Gambar Melengkung Bila Disentuh


touched me~
  • Dashboard > Template > Edit Html >  Click icon yang mcm ►  > Ctrl+F  (Pastikan anda click dlm box html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
a:visited {

  • Copy (Ctrl + C) code di bawah 
a img {

opacity:0.7;
border:none;
padding:0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
border-radius:10px;
}
img:hover {

border-radius:30px;
opacity: 1;
}

  • Paste kan (Ctlr+V) code atas tadi di ATAS code yang a:visited { tadi
  • Dan preview. Kalau tak jadi apa2 dan takde ERROR boleh lah SAVE !

Gambar Turn To Water Drop


Sentuhla daku ~
  • Dashboard > Template > Edit Html > Click icon yang mcm ►  > Ctrl+F  (Pastikan anda click dlm box html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
a:visited {

  • Copy (Ctrl + C) code di bawah 
a img {

opacity: 0.3;
-webkit-transition-duration: .99s;
-moz-transition-duration: .99s;
transition-duration: .99s;
width:300px;height:300px;
}
img:hover {

opacity: 0.99;
border-radius:9999px 9999px 0px 9999px;
-webkit-transition-duration: .99s;
 -moz-transition-duration: .99s;
 transition-duration: .99s;
-webkit-transform: scale( -1.5) rotate( 540deg);
-moz-transform: scale( -1.5) rotate( 540deg);
}

  • Paste kan (Ctlr+V) code atas tadi di ATAS code yang a:visited { tadi
  • Dan preview. Kalau tak jadi apa2 dan takde ERROR boleh lah SAVE !

Effect Gambar Berborder


touch me
  • Dashboard > Template > Edit Html >  Click icon yang mcm ►  > Ctrl+F  (Pastikan anda click dlm box html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
a:visited {

  • Copy (Ctrl + C) code di bawah 
a img {

opacity: 0.79;
padding:15px;
-webkit-transition-duration: .99s;
-moz-transition-duration: .99s;
transition-duration: .99s;
background:url(BACKGROUND IMAGE URL);
}
img:hover {

opacity: 0.99;
border-radius:10px;
-webkit-transition-duration: .99s;
-moz-transition-duration: .99s;
transition-duration: .99s;
background:url(BACKGROUND IMAGE URL);
}

  • Paste kan (Ctlr+V) code atas tadi di ATAS code yang a:visited { tadi
  • Dan preview. Kalau tak jadi apa2 dan takde ERROR boleh lah SAVE !

Gambar Blur to Original


  • Dashboard > Template > Edit Html >  Click icon yang mcm ►  > Ctrl+F  (Pastikan anda click dlm box html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
a:visited {

  • Copy (Ctrl + C) code di bawah 

a img {
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
}
img:hover {
filter: none;
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
}
  • Paste kan (Ctlr+V) code atas tadi di ATAS code yang a:visited { tadi
  • Dan preview. Kalau tak jadi apa2 dan takde ERROR boleh lah SAVE !

Gambar Sepia to Original


touch me~
  • Dashboard > Template > Edit Html >  Click icon yang mcm ►  > Ctrl+F  (Pastikan anda click dlm kotak html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
a:visited {

  • Copy (Ctrl + C) code di bawah 
a img {

filter: sepia(100%);
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);-webkit-filter(1);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}

filter: sepia(0%);
-webkit-filter: sepia(0%);
-moz-filter: sepia(0%);
-webkit-filter(0);
}

  • Paste kan (Ctlr+V) code atas tadi di ATAS code yang a:visited { tadi
  • Dan preview. Kalau tak jadi apa2 dan takde ERROR boleh lah SAVE !

Gambar Grey to Original


Try meh~
  • Dashboard > Template > Edit Html >  Click icon yang mcm ►  > Ctrl+F  (Pastikan anda click dlm kotak html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
a:visited {

  • Copy (Ctrl + C) code di bawah 

a img {
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
filter: gray; filter: grayscale(100%);
-webkit-transition: 1.0s;-moz-transition: 1.0s;
}
img:hover {
-webkit-filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
filter: none; filter: grayscale(0);

}

  • Paste kan (Ctlr+V) code atas tadi di ATAS code yang a:visited { tadi
  • Dan preview. Kalau tak jadi apa2 dan takde ERROR boleh lah SAVE !

Gambar Ke Kiri dan Ke Kanan


touch me~
  • Dashboard > Template > Edit Html >  Click icon yang mcm ►  > Ctrl+F  (Pastikan anda click dlm kotak html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
a:visited {

  • Copy (Ctrl + C) code di bawah 

a img {
-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;

}
img:hover {
-webkit-transform: rotatey(180deg);

}

  • Paste kan (Ctlr+V) code atas tadi di ATAS code yang a:visited { tadi

Gambar Membesar Bila Disentuh


Try me~
  • Dashboard > Template > Edit Html >  Click icon yang mcm ►  > Ctrl+F  (Pastikan anda click dlm kotak html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
a:visited {

  • Copy (Ctrl + C) code di bawah 
a img {
-webkit-transform: scale( 0.7) rotate( 0deg);
-moz-transform: scale( 0.7) rotate( 0deg);
-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;

}
img:hover {
-webkit-transform: scale( 1.0) rotate( 0deg);
-moz-transform: scale( 1.0) rotate( 0deg);

}

  • Paste kan (Ctlr+V) code atas tadi di ATAS code yang a:visited { tadi
  • Dan preview. Kalau tak jadi apa2 dan takde ERROR boleh lah SAVE !

Gambar Jadi Pudar Bila Disentuh



 
Sentuhla daku ~
  • Dashboard > Template > Edit Html > Click icon yang mcm ►  > Ctrl+F  (Pastikan anda click dlm kotak html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
a:visited {

  • Copy (Ctrl + C) code di bawah 
a img {
opacity: 1;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
border-radius:30px;
}
img:hover {
opacity: .70;
}

  • Paste kan (Ctlr+V) code atas tadi di ATAS code yang a:visited { tadi
  • Dan preview. Kalau tak jadi apa2 dan takde ERROR boleh lah SAVE !

Image Shake Shake Effect



Shake shake me~

  • Dashboard > Template > Edit Html > Click Nombor 12 atau 13 atau 15 > Ctrl+F  (Pastikan anda click dlm box html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
/* Content

  • Lepastu Copy (Ctrl+ C) code bawah ini. 
.shakeimage{
position:relative
}

  • Paste kan (Ctrl+ V) code yang di copy itu dibawah garisan putus putus . Macam ini.
/* Content
----------------------------------------------- */
.shakeimage{
position:relative

  • Lepas tu preview. Kalau tak jadi apa2 boleh la SAVE!

  • Ok lepas tu pergi ke Dashboard > Layout > Add Gadget > HTML/JavaScript

  • Copy semua code di bawah dan gantikan URL Image kepada gambar yang korang nak ;)
</style>
<script language="JavaScript1.2">
/*
Shake image script (onMouseover)-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/
//configure shake degree (where larger # equals greater shake)
var rector=3
///////DONE EDITTING///////////
var stopit=0
var a=1
function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}
function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector+"px"
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector+"px"
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector+"px"
}
else{
shake.style.left=parseInt(shake.style.left)-rector+"px"
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}
function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}
</script>
<img src="URL Image" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()">

  • Siap. Cer try  View Blog,jadi tak? 




Code Border Image Yang Pelbagai.



Just copy the border code if you like  to use :


<img src="IMAGE URL HERE" style="border-style:outset">



<img src="IMAGE URL HERE" style="border-style:inset">




<img src="IMAGE URL HERE" style="border:1px dashed #1c1c1c">



 <img src="IMAGE URL HERE" style="border:1px groove #1c1c1c">


<img src="IMAGE URL HERE" style="border-style:ridge">

Nak tanye boleh tanye Yura kat komen. ^^


Basic Image Code



Tak tahu macam mana nak letak code yang disertai dengan gambar. Mari sini Yura ajarin.


  • For normal image :
<img src="IMAGE URL HERE">


  • Image yang boleh adjust Kelebaran/Width :
<img src="IMAGE URL HERE" width="32">


  • Image yang boleh adjust ketinggian/height  : 
<img src="IMAGE URL HERE" height="55">
  

  • Image yang berLINK :
<a href="LINK HERE"><img src="IMAGE URL HERE"></a>

Arigatou. 

Buang Word Verification



Tunggu ape lagi. Jom buang mende alah yang menyebabkan orang MALAS dan FED UP nak komen blog korang.  Make sure korang buang mende ni!

  • Pergi ke Setting > Posts and Comments > Show word verification
  • Please choose NO and Save!

  • Siap. Sekarang orang lain dapat komen tanpa sebarang masalah.

Cara guna Blogskin.



Yura explain ni harap2 semua mengerti ye.

  • Pastikan anda semua telah memiliki code blogskin itu. Mudah sahaja ! Just click Blogger Main yang ada dekat skin yang korang minat itu. Cuba tengok contoh dibawah.

  • Bila korang tekan Blogger Main tu, nanti dia akan download and save kat Notepad. Kan kan?
  • Selepas tu bukak la blogger.com > sign in 
  • Pergi ke Template :
  • Ok lepas tu , bila dah click Template. Cuba SCROLL ke Bawah! Sampai nampak ni :
  • Then, tekan lah Revert to Classic Template yang berwarna oren itu. Nanti keluar macam ini.

  • Klik yang Yura gariskan warna biru itu! Jeng jeng jeng. . Keluar something like this. Pegi kat dalam kotak besar tu dan click sekali. Lepastu tekan Ctrl dan A secra SERENTAK ye. Nanti semua tulisan dlm kotak di hightlight  warna biru. Lepastu tekan Backspace untuk padam semua code tu.


  • Ok bukak Notepad yang download tadi. Copy semua code dlm notepad dan pastekan dalam kotak besar yang dah dipadam code nya  tadi.
  • Tekan Save Template. Cuba view , jadi tak?

Buang Navbar ( Benda panjang atas blog )




Buang benda cam kat atas ni :)
  • Template > Edit Html > Click Nombor 12 atau 13 > Ctrl+F  (Pastikan anda click dlm box dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
/* Variable definitions

  • Ade tak? Kalau  ade copy code ni dan pastekan ATAS code yang cari tadi tu.
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

  • Tak jadi? try code ni.
#navbar-iframe {
display: none !important;
}

  • Preview. Kalau navbar tu hilang , save! 

Buat Blog Denim Template.




Assalamualaikum, ok yang baru nak buat blog pastikan korang buat ni. Kenapa denim template? Sebab dengan denim templete korang dapat buat tutorial tanpa sebarang masalah.Lagipun denim template dah takde kad blogger. Btw Yura pun guna code ni sepenuhnya untuk buat blog  Apa nak buat ? Jom follow this step.

  • Bukak blogger anda
  • Tekan Template dekat sini.


  • Lepas tu keluar macam ini. Dan korang tekan edit html ye.

  • Ok pastu highlight semua code yang ada dalam tu dan DELETE. (tekan Ctrl+ A aje.)
  • Gantikan dengan kod diibawah. Copy keseluruhan code bawah ini dan pastekan dalam ruang yang delete tadi.
<?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'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Denim
Designer: Darren Delaye
URL:      www.DarrenDelaye.com
Date:     11 Jul 2006
-----------------------------------------------
*/

/* Variable definitions
   ====================
 <Variable name="bgColor" description="Page Background Color"
           type="color" default="#efefef" value="#efefef">
 <Variable name="textColor" description="Text Color"
           type="color" default="#333333" value="#333333">
 <Variable name="linkColor" description="Link Color"
           type="color" default="#336699" value="#336699">

 <Variable name="headerBgColor" description="Page Header Background Color"
           type="color" default="transparent" value="transparent">
 <Variable name="headerTextColor" description="Page Header Text Color"
           type="color" default="transparent" value="transparent">
 <Variable name="headerCornersColor" description="Page Header Corners Color"
           type="color" default="transparent" value="transparent">

 <Variable name="mainBgColor" description="Main Background Color"
           type="color" default="#ffffff" value="#ffffff">
 <Variable name="borderColor" description="Border Color"
           type="color" default="#cccccc" value="#cccccc">
 <Variable name="dateHeaderColor" description="Date Header Color"
           type="color" default="#999999" value="#999999">

 <Variable name="sidebarTitleBgColor" description="Sidebar Title Background Color"
           type="color" default="#ffd595" value="#ffd595">
 <Variable name="sidebarTitleTextColor" description="Sidebar Title Text Color"
           type="color" default="#333333" value="#333333">

 <Variable name="bodyFont" description="Text Font"
           type="font" default="normal normal 100% Verdana, Arial, Sans-serif;" value="normal normal 100% Verdana, Arial, Sans-serif;">
 <Variable name="headerFont" description="Page Header Font"
           type="font" default="normal normal 210% Verdana, Arial, Sans-serif;" value="normal normal 210% Verdana, Arial, Sans-serif;">

   <Variable name="startSide" description="Start side in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="End side in blog language"
             type="automatic" default="right" value="right">
*/

body {
  background: $bgColor;
  margin: 0;
  padding: 0px;
  font: x-small Verdana, Arial;
  text-align: center;
  color: $textColor;
  font-size/* */:/**/small;
  font-size: /**/small;
}
a:link {
  color: $linkColor;
}
a:visited {
  color: $linkColor;
}
a img {
  border-width: 0;
}

#outer-wrapper {
  font: $bodyFont;
}

/* Header
----------------------------------------------- */
#header-wrapper {
  margin:0;
  padding: 0;
  background-color: $headerCornersColor;
  text-align: $startSide;
}

#header {
  width: 760px;
  margin: 0 auto;
  background-color: $headerBgColor;
  border: 1px solid $headerBgColor;
  color: $headerTextColor;
  padding: 0;
  font: $headerFont;
}

h1.title {
  padding-top: 38px;
  margin: 0 14px .1em;
  line-height: 1.2em;
  font-size: 100%;
}

h1.title a, h1.title a:visited {
  color: $headerTextColor;
  text-decoration: none;
}

#header .description {
  display: block;
  margin: 0 14px;
  padding: 0 0 40px;
  line-height: 1.4em;
  font-size: 50%;
}
                                                            
/* Content
----------------------------------------------- */

.clear {
  clear: both;
}


#content-wrapper {
  width: 760px;
  margin: 0 auto;
  padding: 0 0 15px;
  text-align: $startSide;
  background-color: $mainBgColor;
  border: 1px solid $borderColor;
  border-top: 0;
}
#main-wrapper {
  margin-$startSide: 14px;
  width: 464px;
  float: $startSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  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 */
}
#sidebar-wrapper {
  margin-$endSide: 14px;
  width: 240px;
  float: $endSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  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 */
}

/* Headings
----------------------------------------------- */
h2, h3 {
  margin: 0;
}

/* Posts
----------------------------------------------- */
.date-header {
  margin: 1.5em 0 0;
  font-weight: normal;
  color: $dateHeaderColor;
  font-size: 100%;
}
.post {
  margin: 0 0 1.5em;
  padding-bottom: 1.5em;
}
.post-title {
  margin: 0;
  padding: 0;
  font-size: 125%;
  font-weight: bold;
  line-height: 1.1em;
}
.post-title a, .post-title a:visited, .post-title strong {
  text-decoration: none;
  color: $textColor;
  font-weight: bold;
}
.post div {
  margin: 0 0 .75em;
  line-height: 1.3em;
}

.post-footer {
  margin: -.25em 0 0;
  color: $textColor;
  font-size: 87%;
}

.post-footer .span {
  margin-$endSide: .3em;
}

.post img, table.tr-caption-container {
  padding: 4px;
  border: 1px solid $borderColor;
}
.tr-caption-container img {
  border: none;
  padding: 0;
}
.post blockquote {
  margin: 1em 20px;
}
.post blockquote p {
  margin: .75em 0;
}

/* Comments
----------------------------------------------- */
#comments h4 {
  margin: 1em 0;
  color: $dateHeaderColor;
}
#comments h4 strong {
  font-size: 110%;
}
#comments-block {
  margin: 1em 0 1.5em;
  line-height: 1.3em;
}
#comments-block dt {
  margin: .5em 0;
}
#comments-block dd {
  margin: .25em 0 0;
}
#comments-block dd.comment-footer {
  margin: -.25em 0 2em;
  line-height: 1.4em;
  font-size: 78%;
}
#comments-block dd p {
  margin: 0 0 .75em;
}

.deleted-comment {
  font-style:italic;
  color:gray;
}

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

#blog-pager-newer-link {
  float: $startSide;
 }

#blog-pager-older-link {
  float: $endSide;
 }

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

/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
 margin: 1.6em 0 .5em;
 padding: 4px 5px;
 background-color: $sidebarTitleBgColor;
 font-size: 100%;
 color: $sidebarTitleTextColor;
}
                                                            
.sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebar li {
  margin: 0;
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: .5em;
  padding-$startSide: 15px;
  text-indent: -15px;
  line-height: 1.5em;
}
.sidebar {
  color: $textColor;
  line-height:1.3em;
}
.sidebar .widget {
  margin-bottom: 1em;
}

.sidebar .widget-content {
  margin: 0 5px;
}

/* Profile
----------------------------------------------- */
.profile-img {
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  padding: 4px;
  border: 1px solid $borderColor;
}

.profile-data {
  margin:0;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight: bold;
  line-height: 1.6em;
  font-size: 78%;
}

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

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

                                                            
/* Footer
 ----------------------------------------------- */
#footer {
  clear: both;
  text-align: center;
  color: $textColor;
}

#footer .widget {
  margin:.5em;
  padding-top: 20px;
  font-size: 85%;
  line-height: 1.5em;
  text-align: $startSide;
}
]]></b:skin>
  </head>

  <body>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

  <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='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Hanis fanfic (Header)' type='Header'/>
</b:section>
    </div>

    <div id='content-wrapper'>

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

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

      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>
      </div>

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

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

    <div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
    </div>

  </div></div> <!-- end outer-wrapper -->
  <b:include data='blog' name='google-analytics'/>
</body>
</html>
  • Ok pastu save template. Preview tengok ade error ke tak. Kalau ade mungkin korang ade buat salah semasa melakukan setiap step.