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.

G+

0 comments:

Post a Comment