2 June 2011

Edit Template Denim



Assalamuaalaikum semuaa! Banyak orang tanya Kihah guna template apa. Ok. Acc, Kihah guna Dennim. Mesti korang tak tahu nak guna macam mana kan? Meh Kihah ajarkan. Sebelum itu, Terima Kasih bebanyak kepada Kak Nazihah  for the info and tutorial. 

Korang jangan risau. Buat 1 persatu. Ikut dengan berhati-hati dan teliti. InsyaAllah. Kalau tak de apa-apa Jadi macam blog Kihah la. Best kan? Jom mulakan.

Tukar ke Denim

Memandangkan blogger dah tak sediakan template ni, so korang boleh amik codes dia

 mesti ada macam ni.

Nampak tak? Ada biru kat header tu. Tunggu pe lagi? Jom la buang!

Buang Biru Dekat Header

Dashbor-> Design -> Edit HTML

CTRL+F serentak. Search kod ini. 
/* Variable definitions
Bawah /* Variable definitions tu ada kod ini.

<Variable name="headerBgColor" description="Page Header Background Color"
           type="color" default="#336699" value="#336699">
 <Variable name="headerTextColor" description="Page Header Text Color"
           type="color" default="#ffffff" value="#ffffff">
 <Variable name="headerCornersColor" description="Page Header Corners Color"
           type="color" default="#528bc5" value="#528bc5">

Delete kod tu, Gantikan dengan ni


<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="#ffffff" value="#ffffff">
 <Variable name="headerCornersColor" description="Page Header Corners Color"
           type="color" default="transparent" value="transparent">
Preview. Save Template.

Letak Background


Dashbord -> Design -> Edit HTML

CTRL + F Serentak, search kod ni
body {
Pastekan kod dibawah. Dibawah kod Body tu ok?

background:$bgcolor;
Background-image:url(URL IMAGE);
background-repeat: repeat;
background-position:Center center;
background-attachment:Fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
 Gantikan URL image tu dengan gambar yang suka. Boleh ambik yang ni


http://i630.photobucket.com/albums/uu21/ReginaLovaSweet/31.gif


http://dl3.glitter-graphics.net/pub/2725/2725413buoul6giov.gif


http://dl4.glitter-graphics.net/pub/658/658634cdu9wz29u9.gif

 http://dl3.glitter-graphics.net/pub/264/264393ps0ft3rzze.gif

 http://dl2.glitter-graphics.net/pub/915/915132gu2cewfq0i.gif
Lepas dah isi, SAVE TEMPLATE,, blog Korang akn jadi macam ni


Buat Header Bersambung Dengan Blog
Kalau nak buat, mesti ada Gimp dengan Photoscape. Hee. First, Buka Gimp

Tekan CTRL+N serentak. Keluarla kotak automatik.

Width untuk Denim template ialah 761 ( Melainkan korang dah ubah ) So tukarkan Width jadi 761. Height boleh tukar ikut suka hati. Jangan tekan OK lagi! Korang tekan simbol + sebelah  Advanced Options dulu. Nanti keluar macam ni : 




Kan ada bahagian Fill with: tu kan? Sebelah dia pulak Background color kan? Tekan arrow kat situ pastu keluar drop down menu. Pilih Transparency. Then tekan OK. Nanti keluar camni :



Jeng jeng jeng. Sekarang kat bahagian toolbox tu, pilih button kotak then bawah tu pilih rounded corners. 

Yang kat radius kat bawah rounded edges tu ubah jadi 20 - 60 camtu. jangan banyak sangat.



Sekarang korang bawak mouse korang kat bakal header korang punya hujung. Tarik dia sampai memenuhi bahagian bawah header korang. kalau terkeluar pun takpe. nanti dia jadi dashed ( - - - - - ) macam ni : 

dashed tu bergerak. sbb tu tk nmpk sgt kay.

Sekarang, tekan Brush tool pulak. tukar kan color jadi warna putih. pastu just color kan dekat bakal header korang tuu.

Tengok gambar .

Kalau time nak warna kan tu, warna kan je cacai barai. dia takkan ganggu bahagian luar sbb td korg dah highlight hujung header korg tu :D
Ni baru siap dia punya bahagian untuk sambungkan pada blog T_T hehe
headeruntuktesterblog.PNG
Skrg untuk edit di photoscape pula. Savekan bakal header korang tadi. Savekan jadi .PNG file tau. contohnya :  headersaya.PNG
Bila tekan Save , nanti keluar kotak mcm ni :


bila keluar kotak ni, tick ikut gmbr di atas ok :D Tick  Save Resolution dan Save Creation Time SAHAJA.
Sekarang bukak bakal header korang dekat Photoscape.
Nanti bila bukak nampak semua putih kan? Jgn risau! sbnrnya header korang still transparent. Cuma dia tak tunjuk transparency je.

DIINGATKAN BAHAWA VIEWER DIA MMG CMTU. nmpk semua putih tp ekcuali dia transparent. Korang edit-2 lah & letak gmbr semua tu *Doodle tu saya yang buat okay!*. Pastu Save jadi .PNG file. takpun korang tekan butang Save terus. takyah tekan Save As. Kalau korang tak caye dia transparent, cuba bukak dekat folder. Anyway, upload la ke blog korang. 
WAIIIITTTTT. belum habis lagi. Skrg edit kat code pulak.
 Dashbord > Design > Edit HTML > cari kod Ini 
#header {
 Bawah header tu ada kod ini.

border: 1px solid $headerBgColor;
Delete kod itu.Cari kod ini juga. CTRL+F juga yaa.

#content-wrapper { 
 Bawah #content-wrapper {  bawah kod tu ada kod ini.

background-color: $mainBgColor; 
Delete kod tu, Preview. Pastu, SAVE TEMPLATE 
Tengoklah blog anda. =) Cantik tak? Jadilah macam ni



Hahax =D Cantik blog kedua Kihah? TEKAN SINI. Huh. Penat juga la. Nantikan Part 2 pulak yee =D. Wassalam ;)

31 comments:

  1. Dik Kihah, akk minta satu background ye ? comel lah background tuh !

    ReplyDelete
  2. Tengs sayang. Dah jadi. Kaka amek background tau ;D

    ReplyDelete
  3. ambik satu .. byk tutorial .. byk belajar sye ..

    ReplyDelete
  4. amek background satu ye :) thanks

    ReplyDelete
  5. Thanx 4 da tutor kihah.. luv u..

    ReplyDelete
  6. thx kihah sbb buat bende neyh..terime kasih bnyk2..

    ReplyDelete
  7. thnx jadi.. tapi yang tak jadi ialah header..

    ReplyDelete
  8. Terima Kasih Qihah ! ♥

    ReplyDelete
  9. saya amik satu background ea . thanks Qihah . :) <3

    ReplyDelete
  10. Qihah, akak guna awak punya yg polka dot tu tau. Thanks. Comel ;)

    ReplyDelete
  11. Qihah, akak guna yg polka tu tau. Thanks. Comel ;)

    ReplyDelete
  12. Nak tnye..mesti guna denim template ker?

    ReplyDelete
  13. tenkiuu kihah..!!
    kte gne tutorial..!!^^

    ReplyDelete
  14. . . .ambk stu bckgrd k. .thnx . .nice ttrial. . .bnyk btol bljr dr blog nie. .thnx. .

    ReplyDelete
  15. thankss sngt2 dear.. akhirnya mnjdi.. slma nie duk cari2...

    ReplyDelete
  16. Hum, macam mana nak guna guna denim kalau blog yang berwajah baru ? Hum , peningnya kepala :(

    ReplyDelete
  17. Adik ambik satu background ea kak . Thanks tau :)

    ReplyDelete
  18. Salam adeq , akk nak tanya mcm mana nak tukar template denim guna dashboard baru nie ek ? kekok guna yg baru. kena banyak belajar.. :/

    ReplyDelete
  19. @Nurrul wa'alaikumussalam. Sorry akk.. Template denim dah tak ada dah :(

    ReplyDelete
  20. @Faqihah Husni Abes sekarang kamu guna template apa ? ermm sedihnya :"/ kenapa dah tak ada..
    anyway , cantik blog kamu yg sekarang ! bestnya ada bnyk idea dpt edit blog selalu.. :")

    ReplyDelete
  21. thanks . saya ambil satu background tq :)

    ReplyDelete

Your words defines you