Alive ~

Tutorial : Post Tittle Background
Monday, December 05, 2011 | 01:42 | 0 comments
لسلام عليكم و رحمة الله و بركاتهI


       Heyho , harini Atikah nak buat satu je lagi Tutorial . Sebenarnya ada orang request dekat shoutbox , tapi dye lupe nak tinggalkan link . Tutorial ni pening sikit, so korang kena fahami dan apply dulu sebelum save ;) And, korang kena Backup Template dulu , nanti karang melalak sebab template korang hilang ! 


1. Dashboard > Design > Edit HTML > Tick Expand Widget
2. Tekan CTRL+F / F3. Dan cari code ini :
SIMPLE TEMPLATE


h3.post-tittle atau .comments h4 {

Jumpa tak ? Tak jumpa ? Haihh, cari code ni pulak :

h3.post-tittle { 
Tak jumpa lagi ? Ish, ish, ish . Cari code ni pulak : 

h3.post-tittle atau h4 {

 Denim Template
.post-tittle {

Minima Template
.post h3 {
3. Kalau bawah code tu ada code yang sama atau lebih kurang , TOLONG DELETE .
FOR SIMPLE TEMPLATE.

FOR DENIM TEMPLATE.

4. Now korang pilih bentuk border yang korang nak , then pastekan di bawah code yang korang cari tadi .
5. Eh ! Belum habis lagi , korang kena PREVIEW dulu , dah puas hati , baru SAVE .

JENIS SIMPLE
*Gmbr credit to Kak Lina

font-family:arial;
color: #000000;
font-size:14px;
text-align:center;
-moz-border-radius: 35px;

border-radius: 35px;




text-shadow: 3px 3px 3px #FFFFFF;

border: 2px solid  #000000;

background : #FFFFFF;

padding: 5px; margin: 20px;
border-radius: 35px;

text-shadow: 3px 3px 3px #FFFFFF;


border: 2px solid  #000000;


background : #FFFFFF;


padding: 5px; margin: 20px;


text-shadow: 3px 3px 3px #FFFFFF;


border: 2px solid  #000000;


background : #FFFFFF;


padding: 5px; margin: 20px;
text-shadow: 3px 3px 3px #FFFFFF;
border: 2px solid  #000000;


background : #FFFFFF;


padding: 5px; margin: 20px;
border: 2px solid  #000000;
background : #FFFFFF;


padding: 5px; margin: 20px;
background : #FFFFFF;
padding: 5px; margin: 20px;
padding: 5px; margin: 20px;
Teka-teki :

ABC : Korang boleh tukar ikut suka hati korang :)
ABC : Type border yang korang nak. Boleh click SINICopy je code border tu dan gantikan dengan code border yang Atikah  bagi tu. (credit border to Kak Lina )
ABC : Yang ni code warna untuk mengshadowkan post tittle tu. Kalau taknak, boleh buang je code tu:)
ABC : Size ketebalan border. 
ABC : Boleh pilih antara satu, solid / dashed / dotted
ABC : Warna border korang. Yang Atikah letak tu semua warna putih, so korang kena tukar sendiri, hehe.
ABC : Warna background.
ABC : Kalau nak kecil atau besarkan border, adjust kat number tu. Makin besar number, makin besarlah border korang.
*Kalau taknak border, buang code ni : 'border: 2px solid  #FFFFFF;'.
SEMUA CODE WARNA BOLEH CARI KAT SINI.

JENIS DOUBLE-COLOURED (Ada 2 colour)
*Gmbr credit to Kak Lina

font-family:arial;
color: #000000;
font-size:14px;
text-align:center;
-moz-border-radius-topleft: 20px;-moz-border-radius-topright: 20px;-webkit-border-top-left-radius: 20px;-webkit-border-top-right-radius: 20px;-top-right-radius: 20px;border-top-left-radius: 20px;border-top-right-radius: 20px;text-shadow: 3px 3px 3px #FFFFFF;border-bottom: 8px solid #000000;
background : #D8D8D8;
padding: 3px; margin: 20px ;
Teka-teki :
The instruction sama mcm dekat atas , cuma yang 'border-bottom: 8px solid #000000;' je :
ABC : Ketebalan border bawah tu. Boleh tukar :)
ABC : Just choose one. Can change into solid / dashed dotted.
ABC : Warna border bawah tu. Boleh ditukar juga. Cari kat SINI.


JENIS ADA BACKGROUND
*Gmbr credit to Kak Lina

font-family:arial;
color: #000000;

font-size:14px;

text-align:center;

-moz-border-radius: 1em 4em 1em 4em;                 
border-radius: 1em 4em 1em 4em;  


text-shadow: 3px 3px 3px #FFFFFF;


border: 2px solid  #000000;


background : url(URL BACKGROUND);


padding: 5px; margin: 20px ;
font-size:14px;

text-align:center;

-moz-border-radius: 1em 4em 1em 4em;                 
border-radius: 1em 4em 1em 4em;  


text-shadow: 3px 3px 3px #FFFFFF;


border: 2px solid  #000000;


background : url(URL BACKGROUND);


padding: 5px; margin: 20px ;
text-align:center;

-moz-border-radius: 1em 4em 1em 4em;                 
border-radius: 1em 4em 1em 4em;  


text-shadow: 3px 3px 3px #FFFFFF;


border: 2px solid  #000000;


background : url(URL BACKGROUND);


padding: 5px; margin: 20px ;
-moz-border-radius: 1em 4em 1em 4em;                 border-radius: 1em 4em 1em 4em;  

text-shadow: 3px 3px 3px #FFFFFF;


border: 2px solid  #000000;


background : url(URL BACKGROUND);


padding: 5px; margin: 20px ;


text-shadow: 3px 3px 3px #FFFFFF;


border: 2px solid  #000000;


background : url(URL BACKGROUND);


padding: 5px; margin: 20px ;
text-shadow: 3px 3px 3px #FFFFFF;

border: 2px solid  #000000;


background : url(URL BACKGROUND);


padding: 5px; margin: 20px ;


border: 2px solid  #000000;


background : url(URL BACKGROUND);


padding: 5px; margin: 20px ;
border: 2px solid  #000000;

background : url(URL BACKGROUND);


padding: 5px; margin: 20px ;


background : url(URL BACKGROUND);


padding: 5px; margin: 20px ;
background : url(URL BACKGROUND);

padding: 5px; margin: 20px ;


padding: 5px; margin: 20px ;
padding: 5px; margin: 20px ;
Teka-teki :
Arahan bagi border ni sama macam di atas , cuma korang just masukkan URL BACKGROUND yang korang suka .

*Buang code 2px solid  #FFFFFF;  kalau korang tak nak border .


Alhamdulillah ! Akhirnya berjaya juga Atikah buat Tutorial ni ! . btw , kalau tak jadi , korang boleh comment lah yer ? Thanks ;)