Tutorial:Design Layout Blog Sendiri (FOOTER)

Assalamualaikum.

Alhamdulillah, akhirnya sampai la ke part yang terakhir untuk design blog korang..hehe..Ok footer ni bahagian bawah sekali blog korang. So kita mulakan erk..

1.

Tickkan kotak expand widget templates dan tekan ctrl+f untuk memudahkan pencarian. Sekarang, cari code nie:

#footer {

Dekat bawah  code tue, korang akan jumpa code yang macam nie..

#footer {
width:660px
;clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

2. Pastue korang highlightkan code dekat atas dan just gantikan dengan code yang dekat bawah nie.

#footer {
clear:both;
margin:0 0 0 0;
padding-bottom:70px;
padding-top: 20px;
line-height: 1.6em;
text-transform:normal;
letter-spacing:.1em;
text-align: center;
background: url(Masukkan URL Footer Anda Disini)no-repeat bottom center;
height: auto;
}

3.Ok, korang nampak kan perkataan 'masukkan URL Footer Anda Disini' yang  warna merah tue, korang letakkan url image yang korang nak jadikkan footer.


4.Create new files dekat photoshop dengan width 1000px. height tak kisah berapa pun. nie contoh footer yang CZ buat.

Upload footer yang korang buat di SINI atau SINI dan dapatkan image url.

5.Kalau dah siap, blog korang akan nampak macam nie. Dah siap!

CZ buat nie ada silap cikit kat bahagian footer tue..hehe..tapi korang mesti lagi teror kan dari CZ bab design2 nie. so wish u luck!

p/s: CZ gunakan tutorial ini untuk design blog CZ =)

Tutorial:Design Layout Blog Sendiri (HEADER)

 Assalamualaikum.

Semalam CZ ada buat tutorial design layout sendiri untuk part BODY kan? bagi sesiapa yang belum terjah, tekan SINI.

Sekarang ni kita akan ke fasa yang kedua iaitu design part header pulak. So, jom kita mulakan pengembaraan bersama CZ!

1)

2) kalau korang perasan, dekat blog tue ada border kan kat bahagian header. Kita nak hilangkan border tue. So, tekan ctrl+f serentak dan cari code kat bawah nie di kotak search.

#header-wrapper { 

dibawah code tue, korang akan jumpa macam ni:

#header-wrapper {
 width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}  

Delete code tersebut.

3) Di bawah code yang korang delete tue, korang mesti akan jumpa code yang kat bawah nie. Confirm jumpa punya laa

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center; 
color:$pagetitlecolor; 
}


#header h1 {
margin:5px 5px 0; padding:15px 20px .25em;line-height:1.2em;
text-transform:uppercase;letter-spacing:.2em;
font: $pagetitlefont;
} 

Kemudian gantikan code yang diatas dengan code yang di bawah nie.

#header {
width: 1000px;
height: 300px; 
border:0px solid $bordercolor;
color: $pagetitlecolor;
 text-align: center; } 

#header h1 {
margin:0px 0px 0;
padding:15px 20px .25em; line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
 }

sekarang nie kita dah tetapkan lebar layout kita 1000px sama dengan tutorial BODY kan. yang height tue terserah dekat korang nak letak berapa pun. So korang boleh la search kat internet header-header yang chomel.

4) Step nie untuk sesiapa yang ingin buat header sendiri. Yup, macam biasa kita akan gunakan photoshop untuk buat header. Photoshop>File>New.

Ini adalah contoh header yang saya buat. Korang mesti lagi kreatif kan? so gunakan ke-kreatif-an korang tu untuk menghasilkan header yang cantik.

Oh oh, pastikan background header tue sama colour dengan warna background belog, ok?

7) Untuk upload header,

Dashboard>Design>Page Element>Tekan 'edit' dekat header

Dan keluar la pop out macam nie. Tekan upload dan browse la kat mana korang letak header korang tue dan jangan lupa tick kat bahagian 'instead of title and description' taw..Dah sudah, tekan la butang 'SAVE'.

6)

Blog anda akan jadi macam nie. Nampak tak yang kaler background tue tak sama dengan header. So, kita kena tukar la kaler background blog. Macam mana? Macam ni yaa

Dashboard>Design>Template Designer>Advance>Page Background Colour

DAh siap!

Selamat mencuba! Jangan segan nak tanya k.

CREDIT: BELOGCAPAYAM

Tutorial:Design Layout Blog Sendiri (BODY)

Assalamualaikum.

Korang nampak tak blog CZ? Tue CZ design sendiri taw...*bangga sat* Kalau korang-korang semua nak tau macam mana CZ buat..teruskan baca entry nie, OK?

Sebelum tu CZ nak ingatkan yang tutorial nie sangat memeningkan dan memerlukan kesabaran yang tinggi, bagi sesiapa yang tak mempunyai kesabaran yang tinggi, boleh la angkat kaki..hehe..

So, lets begin!!!

1)

2) Kemudian download full template yang sedia ada, nie sebagai langkah berjaga-jaga, takut-takut tak jadi kan?

3) Kat bawah tu, ada Layout Template(launched 2006) kan? So kamu pilih template MINIMA ok.

4) Ok kita start part yang sangat memeningkan, tekan CTRL+F untuk memudahkan pencarian korang cari kod kat bawah nie:

#outer-wrapper {

     Ok, dekat bawah kod tue korang akan nampak benda yang macam nie

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
}

Dah jumpa kan? Dekat situ lebar blog kita 660px kan. tapi boleh ja kalau nak lebar ikut suka kita. kalau CZ,  CZ guna 1000px.


5) Kita beralih arah pulak ke Photoshop untuk design body blog kita tue. ala yang tempat post kita bertempek   tuee..Dah buka photoshop masing-masing? Ok, kalau dah tekan FILE>NEW. Korang tentukan la berapa lebar blog korang.

   

Yang height tue pulak letak berapa pun tak kisah sebab nanti kita akan repeatkan sampai la ke bahagian bawah blog. Kat bawah ni contoh body yang CZ buat. Body ni akan jadi background untuk post and sidebar blog kita.

       

Kalau dah siap boleh la upload kan kat imgur atau photobucket, untuk dapatkan URL IMAGE.

6)  Ok kita balik kepada code yang korang cari tadi. Highlightkan semua dan pastekan code yang kat bawah nie 

pulak:

#outer-wrapper {
width: 1000px;
margin:0 auto;
background: url(Masukkan DIRECT LINK gambar korang di sini) repeat-y;
padding:0px;text-align:left;
font: $bodyfont;
}

*masukkan IMAGE URL di tulisan kaler merah tue.


Kemudian, korang scroll ke bawah dan akan jumpa code yang macam nie:

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

Dah jumpa kan? Ok gantikan code tadi dengan code yang di bawah nie:

#main-wrapper {
width: 600px;
margin-top: 0px;
margin-left:50px;
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 */
}

Kalau dah, korang scroll lagi ke bawah..*nie last sudah kita main scroll2 ke bawah..hehe

Korang akan jumpa code nie pulak.

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

Wahh..macam tau2 ja kan korang..kita akan gantikan code yang di atas nie dengan yang kat bawah nie:

#sidebar-wrapper {
width: 290px;
float: right;
margin-top: 0px;
margin-right: 25px;
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 */
}

7) Dah selesai copy paste semua benda tu, korang boleh la preview dan blog korang akan jadi macam nie.

And one more thing, mesti segala tulisan akan jadi kabur-kabur atau tak jelas..so korang adjust la kat Dashboard>Design>Template Designer.


Fuhhhhh....lega habis jugak untuk part body..penat la CZ menaip. Nanti CZ update lagi macam mana pulak nak buat bahagian header and footer. Selamat mencuba!




p/s: untuk copy just highlight and tekan ctrl+c serentak.

credit: BELOGCAPAYAM

Tutorial : Cara nak remove timeline FB

Assalamualaikum.

Mesti ramai yang agak tak suka dengan Timeline FB kan? OK. bagi yang tak suka tu, CZ ada cara untuk remove timeline FB. Macam mana? Rajinkan diri untuk baca entry nie. okay?

1. Korang pegi ke laman web www.timelineremove.com atau klik ja gambar kat bawah nie.

2. Kemudian pilih browser yang korang gunakan dan klik untuk download.

3. Dah download kan? Then kat bawah tue tekan butang 'save'.

4. After tekan butang 'save' tue, akan muncu la kotak macam kat bawah nie. Korang tekan la install. 

5. Last sekali, just refreash page FB korang and TADAAAA!! no more timeline. 

Selamat Mencuba!

p/s: kalau tak jadi, boleh tanya CZ k. Jangan segan pula.