• Natlie Imbruglia

    Doesn`t she look very cool?

  • Thousands of Years

    Earth has lived thousands of years...

  • Fruits

    Fruits are vital for health and their nutrients...

  • The Lonely Road

    The Lonely Road reminds Me with You...

  • Twister

    Here are some twisting graphics for you...

Tuesday, September 1, 2009

Membina sendiri template ringkas dan mudah

Untuk membina template yang ringkas yang di edit dari template classic, tidak begitu sukar untuk anda mencuba sebenarnya. Apa yang diperlukan ialah hanya dengan memasukkan beberapa kod pada script template asal.

Untuk permulaan, saya akan memberikan tips bagaimana mengubah background template classic (Minima) kepada background satu paparan penuh. Anda boleh lihat background template classic (Minima) sebelum dan selepas dibuat editting pada gambar dibawah ini.


Sebelum

              Selepas                 

Walaubagaimanapun, penggunaaan background  paparan penuh tidak digalakkan untuk digunakannya kerana akan menyebabkan page akan menjadi lambat untuk proses loading.

Jika anda ingin mencubanya, saya nasihatkan supaya anda bina satu blog yang baru (akaun yang sama) khas untuk anda membuat editting.

Langkah 1

Login blog => Dashboard => Create a blog.

Lengkapkan maklumat yang diperlukan pada bahagian tersebut. Seterusnya klik continue dan pilih template Minima (lihat gambar dibawah) dan klik Continue. Seterusnya klik pula button Start Blogging.

Langkah 2



Masukkan dahulu artikel pada bahagian Posting. Anda boleh menyalin mana-mana artikel dari blog anda sendiri. Ini bertujuan memudahkan anda membuat rujukan bagi teks pada posting. Save posting tersebut.

Langkah 3

Seterusnya klik Layout => Edit HTML. Tick pada Expand Widget Templates. Tekan pula Ctrl + F dan taipkan body {  dan klik enter. Anda akan melihat kod sama seperti di bawah ini.

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;

Salin kod berwarna merah di bawah dan gantikan pada kod background:$bgcolor; (lihat kod di atas).

 Kod ini akan memaparkan background satu paparan penuh.

background-image: url("masukkan url background"); background-position: center; background-repeat: no-repeat; background-attachment: fixed;

Gantikan perkataan  masukkan url background dengan url background anda. Anda boleh mencuba beberapa background dengan menyalin url dibawah ini. Klik Preview untuk melihat hasil editting yang telah dibuat. 

http://i195.photobucket.com/albums/z279/crazyleaf/phoenix-1024x768.jpg

http://i42.tinypic.com/2ugf6dj.jpg

http://i527.photobucket.com/albums/cc357/decentforums/my_wallpaper.jpg

Akhir sekali, klik save.

Langkah 4

Untuk mengubah warna dan jenis font, klik pada Layout dan klik pada Font and colour. Anda boleh membuat edditting di situ. (lihat gambar dibawah)



Akhir sekali, klik save.

Pada entri yang akan datang, saya akan menunjukkan pula tips bagaimana menguah background menggunakan imej paparan yang berulang.

5 comments:

  1. akhirnya.............
    haha...
    o..macm 2 ek??

    neskapi...ito yg basic r..kasi r tutorial yg gmpak2 skit..ini da tau.
    tp xpa la..xramai org tau kan?he

    ReplyDelete
  2. haha..
    xnak r ramai2 makwe..
    nnt aku kna dera r...haha..
    da cube dlu..
    tp xpe..nnt aku cube terai(try) k..
    xsemak ke nnt klu wat mcm 2?

    ReplyDelete
  3. ok2...
    da 1 blog pon xterhapdet..
    ha9...
    k2..aku cube wat..

    ReplyDelete
  4. senangnya rupanya nak letak background yer, power-power

    ReplyDelete
  5. aku da cube n semstinye..
    xbest r..
    ko de lmn web yg template2 yg cun alamak habis..
    kong-c2 r beb..he

    ReplyDelete