Tuto : Kemas , cantik dan comelkan bahagian header

Views
Asssalamualaikum
Fuhh ~ rasanya demam miraa smakin hilang . asek berpeluh je dari tadi . Tapi bukan tu yg miraa nak gtw :p ni hah miraa naa aja cne na bagi header korang jadi comel ^_^ Perlu diingatkan yg entri ini penuh dengan photo . So jangan marah naa :D Okey lets start . *entri bergambar yg panjang* Start !

Kalau korang blogger baru , miraa sarankan korang guna simple template sebab senang nak edit . Ok mula dengan membuang Nav bar yg biru tu ok ? fes korang masuk kat Blogger Template Designer then click on Advance . Korang scroll sampai jumpa Add CSS

Lepas korang dah jumpa . Korang ada nampak kan ruang kosong tu ? Korang copy code tu kat sini , then korang paste ke dalam kotak tu . Tengok photo atas ni . Hilang kan nav warna biru tu lepas korang paste ? :)

Lepas save , korang tekan Edit HTML pulak . Now nak hilangkan benda putih kat belakang header korang yg transparent tu . Korang cari code /* Mobile then korang paste code tu dekat atas /* Mobile tu tadi . Code korang boleh ambil dalam entri miraa yg dekat sini ok ?

Korang tekan dulu preview . Macam dekat atas ni hah . Da nampak kan header korang yg comel tu ?? Macam ada yg tak kena je kan ? ok . sabar .. satu persatu ok ? HAHA
Now kita bagi center header tu pula ye gais ? Now , tekan F3 then cari code  /* Content pulak . Korang ambil code kat dalam sini dan paste dekat atas /* Content tu ok ? macam yg dalam photo atas ni korang buat .

Lepas tu korang try pula tekan Preview . if menjadi macam kat photo atas ni tepuk tangan :D haha okay .. terasa still ada yg tak kena kan ? :/ oke mai kitaa tengok next step pula . But korang save dulu ok yg tadi !!

Now beralih ke Blogger Template Designer semula . korang nampak kan yg miraa bagi bulat tu ? macam pelik kan bila header korang da comel tapi body blog pula tak mengizinkan . haha jangan risau . semua itu bisa di atur XD

K , korang tekan Adjust widths and then korang adjust laa width body tu sampai muat dengan header korang tu . Macam photo kat atas ni ye . width header miraa 776px so miraa just taip kedalam Entire blog tu size blog miraa

 
walah ! comel tak ? comel tak ? XD mesti laa comel kan ? haaha nak kene penampa agakny miraa ni . Okey . Korang jangan lupa tekan Apply to blog lak . Kang tak ter-save marah2 lagi XD now tinggal satu je lagi yg memburukkan header korang en ? tengok yg miraa anak panah kan tu . hahhh tu diaa hah border tu . meh hilangkan !

kembali lagi sekali ke Edit HTML ye gais . now kita nak buang border tu . korang tekan F3 then cari code .content-outer { and as you see kat atas ni , miraa ada highlightkan code tu en ?? yg mana ? yg biru tu hah . Korang highlightkan sebijik mcm kat atas tu ye !!

lepas korang highlight kan , korang nampak kan kat keyboard korang perkataan Backspace ? tekan tu skali XD now korang try preview . Apa jadi ?? hilang bukan ?? kalau tak hilang miraa tatau laa knape . sebab miraa buat slame ni hilang je ^_^

Tada !! Ini lah hasil tutorial ini ye gais . Header tu korang boleh buat sendiri . miraa nak ajar tapi miraa busy sejak kebelakangan ni . so kalau korang nak sangat header yg sesuai untuk yg rapat , korang boleh pergi ke fan page miraa . Miraa ada buat tempahan header dan lain lain lagi so meh tekan sini lelaju kalau nak tempah ! ;) 

Sebenarnya , korang boleh buat mmcam lagi dengan blog korang asalkan korang sabar dengan semua coding2 yg ada . Sebab makin korang sabar , makin banyak benda baik boleh blaku . Begitu juga dengan tuto ini . Korang kene ada kesabaran baru boleh buat ^_^ happy blogging gais ! anyway meh donate sikit :D btw kalau tak paham korang boleh tengok vid tutor kat sini

Domain dan Hosting oleh Hosting Rajawali - Social blogging in Malaysia Oneblogsocial

22 comments:

  1. Ty ! ;)

    hasilnya ~,~
    http://faralalalala.blogspot.com/

    ReplyDelete
  2. salam kak miraa , nak tumpang tnye ape ye size header yg akk buat nie . harap soalan sye dpt akk jawab :D

    ReplyDelete
  3. kak mira , tuto nie gune template ape ?

    ReplyDelete
  4. Simple template Nicha Chaa (,")

    ReplyDelete
  5. klu gune blogskins pulak mcm mana eh ?

    ReplyDelete
  6. terime kasih kak............hehehe :)

    ReplyDelete
  7. hai . mira pakai template jenis apa ?

    ReplyDelete
  8. Thanks kak miraa for this tutorial :D

    ReplyDelete
  9. Akak Mira .. Sekarangkan EDIT HTML dah diperbaharui kan.... macam mana nak edit macam tu ? Ta pahamm :o

    ReplyDelete
  10. tk phm .. skrng blog bru .. tlng la bals

    ReplyDelete
  11. thank tau...saya ikut semua arahan dan menjadi...saya share kan link ke entry ni dlm blog saya ye (>_<)

    SHARING IS CARING kannnn

    ReplyDelete
  12. Hi all,jom kite follow follow. Nanti i follow u all balik.

    ReplyDelete

Terima kasih kerana sudi membaca , jangan lupa tinggalkan komen :)
Fikir semula sekiranya korang ingin meninggalkan komen lucah, ugutan, mengancam, identiti palsu, dan menyakitkan hati. Baca AKTA 588, AKTA KOMUNIKASI DAN MULTIMEDIA 1998. Oh, sebelum tu, tengok lah site awesome
ini