07 August 2011

Tutorial : Template Mine Version

Jom buat template macam aku. Memandangkan aku pakai Minima Template, korang pun kenalah bertukar ke Minima Template. Nak bertukar ke Minima Template? [ KLIK SINI ]. Tutorial ni pun, menjadi pada template lain, tapi kod dia lain sikit lah.

How To Use
1. Dasboard - Template - Edit HTML
2. Tekan Ctrl + f  dan search kod  #outer-wrapper {

Kod dia akan jadi macam kat bawah ni.

#outer-wrapper {
width: 780px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 500px;
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 */
}

#sidebar-wrapper {
width: 240px;
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 */}




3. Copy code dibawah dan gantikan code di atas dengan code dibawah.


.clear {  
clear: both;}
#content-wrapper {
width: 1000px;
margin:0 auto; padding:10px;  
text-align:$startSide; 
background-color: #FFFFFF
border:2px solid #FA58AC
-moz-box-shadow: 0 0 10px #FA58AC
-webkit-box-shadow: 0 0 30px #FA58AC
-moz-border-radius: 15px;-webkit-border-radius: 15px;font: $bodyfont;} 
#main-wrapper { width: 520px;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 */} 
#sidebar-wrapper {width: 240px; 
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 */}


  • PURPLE- semakin besar nombor, semakin besar/ semakin lebar
  • GREEN -start-sidebar belah kanan, end-sidebar belah kiri
  • RED - tukar colour 
Teruskan dengan tutorial yang seterusnya okay! Good luck.

You may leave your comment :)

tutorial- hilangkan border kat header

untuk yang pakai minima template . kat header mesti ade border kan?
so .. buruk . nk bagi hilang .  macam ni . .

edit html- ctrl+f  #header-wrapper {  
tengak-tengak kat bawah ade code lebih kurang macam ni . .
 border:1px solid $bordercolor;

tukarkan 1 tu kepade 0 .


edit html- ctrl+f  #header { 
 border: 1px solid $bordercolor;
ade code lebih kurang macam ni . .

tukarkan 1 tu kepade 0 .


You may leave your comment :)

Tutorial / Freebies : Minima Template 2 Colomn

Assalamualaikum 
Hari ni aku, nak bagi tutorial merangkap freebies sekali. Actually, ramai yang tanya aku pakai template apa, dan ada jugak yang menuduh aku memakai blogskins. Jawapannya, aku pakai Minima Template dan tidak menggunakan template di blogskins. So, untuk permulaan dari segala-gala tutorial dalam blog ni, anda perlulah menggunakan Minima Template seperti saya juga.  

WHITE MINIMA TEMPLATE ( 2 COLOMN )



CARA GUNA
1. Pergi ke : Dasboard - Template - Edit HTML
2. Buang segala kod dalam tu dan gantikan dengan kod MINIMA WHITE TEMPLATE di atas.
Dinasihatkan, sebelum buang segala kod tu, makesure copy&paste kod tersebut dalam text document atau apa-apa yang mudah, Microsoft Words pun boleh.

AMARAN : Ini template kosong, jadi anda perlu mengedit semua balik. Sebab tu la kena save, sebagai bakeup, kot-kot jadi apa-apa.  
  • After korang dah tukar template, mesti ada kotak kan kat header korang. So, untuk buang, sila ke tutorial ini. [ KLIK ME ] . 
  • Template korang yang buruk tu boleh la dicomelkan dengan tutorial ini. [ KLIK ME ]
Selamat mencuba!

You may leave your comment :)

02 August 2011

Tutorial- Flash blockquote


Before

after


So, macam ni care dia.

background-image: url(URL IMAGE BACKGROUND);
border:1px solid #f3e2a9;
border-left:10pt double #f3e2a9;
padding: 4px;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
}
.post blockquote:hover {
background-color: #ecfcec;
-webkit-transition-duration: 2.5s;
background-image:url(CUTE ICON);
background-position:bottom right;
background-repeat:no-repeat;
border:1px dashed #f3e2a9;
border-right:10pt double #f3e2a9;
}
.post blockquote p {
margin: .75em 0;
}



red : image background for your blockquote. you can find it here or here
blue : your blockquote hover background colour
green : your blockquote hover border colour
orange : blockquote border colour before hover
purple : you can find it here
color code : here

paste all the code below .post blockquote { okay?
save and done :)
you can change the code if you want.


credit: amylia 



You may leave your comment :)

25 July 2011

Freebies- simple header


header for you . . drop comment kalau ambek k :)


















doodle yang pakai baju sekolah tu hak milik  Syafeika Edora .. terima kasih kat die okey!
yang lain-lain aku punya . . sila klik header tu 2kali . untuk dapat size header yang sebenar .sorry . simple .. nak yang lawo-lawo . . boleh la tempah . .


You may leave your comment :)