Google Font API Di Kemaskini

Google Font Directory API kini bertambah baik

Dengan beberapa perubahan dan penambahan fungsi oleh pihak Google, walaupun aku rasa tiada fon yang baru tetapi fungsi yang terbaru ini membantu pengguna melihat terlebih dahulu adakah fungsi tersebut sesuai dengan kehendak mereka.

(more…)

Perbezaan Margin, Padding dan Kedudukan

CSS & HTML

Didalam HTML terdapat tiga cara untuk memberikan kedudukan kepada sesebuah lapisan (layer) terutamanya didalam CSS (Cascading StyleSheet). Tiga cara tersebut adalah;

• Margin
• Padding
• Kedudukan

Walaupun sedia maklum penggunaan sistem grid akan membantu untuk mempercepatkan proses memberikan kedudukan tetapi kadang-kala penggunaan secara manual juga perlu untuk sesetengah perkara.

Kes Contoh

Kedudukan kotak carian dan juga kotak navigasi dibawahnya tidak selari dan juga beberapa pengubahan yang dirasakan perlu adalah;

• Kecilkan ruang menaip dan butang carian. Sekadar saiz nama blog.
• Rendahkan kedudukan achive | about | sitemap tersebut sama dengan penerangan blog.
• Tarik kotak carian ke kanan agar selari dengan kotak navigasi.

(more…)

Bina Tema Gunakan Sistem Grid #2

Kali ni aku hanya nak tunjuk sikit kaedah nak guna sistem grid ini untuk pembinaan sesebuah laman web. Cuba kita buat ‘banner’ Itu mungkin lebih mudah. Kaedah ini aku panggil pecah-perintah. Macam belajar sejarah. Haha.

Rekabentuk Guna Sistem Grid

Mula-mula muatturun templat daripada 960.gs. Buka direktori/folder template dan pilih mana satu yang anda mahu gunakan. Aku pilih GIMP sebab aku guna GIMP. Pilih pula apa jenis jalur yang anda mahu. Aku sudah terangkan dalam entri lepas: apa itu jenis grid.

Aku pilih 12 jalur. (more…)

Dari Firebug Kepada Element Inspector

Apa Itu Element Inspector?

Aku sebenarnya tahu tentang element inspector didalam Chrome tetapi tidak pernah mencubanya kerana aku jangkakan itu hanya satu benda yang biasa, maksud aku hanya untuk lihat kod sumber html untuk sesebuah laman tetapi aku silap kerana element inspector dan kod sumber html laman adalah dua perkara berlainan didalam Chrome.

Dan apabila aku cuba element inspector di dalam Chrome aku rasa. Setaraf, malah lebih baik daripada Firebug (versi Chrome). Sedia maklum bahawa Firebug didalam Chrome amat teruk. Berlainan dengan versi di dalam Firefox yang amat bagus. Kadang-kala mahu lihat skrip CSS pun tak bagi, URI access denied katanya.

Cara nak guna element inspector tak banyak berbeza dengan Firebug. Malah aku rasa lebih mudah, hanya perlu klik kanan butang tetikus pada bahagian yang mahu disemak, pilih inspect element. Dan akan terbit satu tetingkap.

Contoh Penggunaan Inspect Element

Aku tunjukkan contoh dengan laman Tumblr aku. Ini gambar onomnomnom (aku tak tahu nama sebenar dia) mahu makan bola Piala Dunia Afrika Selatan, Jabulani. Dan disebelahnya pula adalah tetingkap inspect element.

Dan daripada gambar itu inspect element akan menunjukkan dimana gambar itu berada. Secara automatik dengan menonjolkan bahagian tersebut. Dan dikekotak sebelah kanan adalah kotak Cascading Style Sheets – CSS. Dan apa yang anda dapat lihat adalah tag untuk anchor telah dimasukkan dengan CSS3 box shadow yang aku buat semalam.

Kelemahan Element Inspector

Seperti juga Firebug, anda boleh bermain dengan CSS tersebut tetapi ada beberapa kelemahan element inspector yang aku lihat berbanding dengan Firebug versi Firefox.

1. Sukar untuk bermain dengan nombor. Kerana perubahannya bukan secara masa sebenar.
2. Memasukkan sifat-sifat tambahan kedalam element yang sedia ada. (Mungkin aku yang tidak tahu)
3. Tiada bantuan sintak lengkap secara automatik.

Tetapi secara tidak langsung kalau aku mahu guna dalam Chrome, ini adalah yang terbaik. Nak guna Firebug. Lagi sakit hati.

Kemaskini 21 Julai 2010: Untuk versi 6.0.472.0 (52985) Chormium telah membaiki masalah 1 dan 3. Tetapi masalah kedua masih tiada penyelesaian.

Ada cadangan lain?

Notakaki 1: Suki yang ingatkan aku pasal element inspector.
Notakaki 2: Itu baru untuk CSS, Javascript belum lagi tu. Heh. Tapi aku tak mahir sangat guna Javascript.

Tukar Jenis Huruf Untuk Heading Dan Bahasa Inggeris

Aku kurang gunakan bahasa inggeris dan kini aku rasa aku mahu masukkan jenis tulisan yang berlainan apabila perkataan inggeris digunakan. Tetapi entri yang lepas tak la aku ubah. Letih kalau mahu ubah.

Aku cuba!

this is my blog

ya! menjadi!

Mari cuba lagi. Saya tak la hansome macam Topo, tapi saya baik hati macam Topo.

Heh ok la tu. Heading juga aku tukar. Tetapi tulisannya lain.

Ini Heading Dalam Blog Ini

Ini hanya untuk percubaan sahaja. Mungkin digunakan untuk jangka panjang mungkin tidak. Bergantung kepada keadaan. Pendapat anda?

Oh ya! aku gunakan Google Font API. Untuk heading aku gunakan tulisan Yanone Kaffeesatz. Cantikkan? Dan tulisan bahasa inggeris itu namanya Reenie Beanie.

Tip Mudah

Semasa aku gunakan bahasa inggeris didalam blog ini aku akan gunakan italic atau tag em, maka aku ubah sahaja tag em didalam css untuk memudahkan aku.

Kemaskini: Tutorial

Aku ubah la sikit sebab macam kejam tunjuk kepada orang lepas tu tak ajar. Cisdel betul! Aku rasa perkara ni boleh je guna antara Blogspot atau mana-mana pun laman yang korang mahu guna. Aku tak rasa bermasalah pun. Yang pertama pilih mana jenis huruf yang nak diguna di Google Font Directory. Sekarang ni sikit la tak lama lagi banyak la. Google kan~.

Kemudian import huruf tersebut untuk masuk ke skrip css anda;

/*--googlefontapi--*/
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400|Reenie+Beanie);

Dan selepas tu tukarkan jenis huruf yang perlu digunakan semasa sesebuah tag digunakan, sebagai contoh tag em ini;

em { margin: 0px 0px 10px 0px; font-weight: normal; font-size: 21px; font-family: 'Reenie+Beanie', 'Arial', serif; }

Simpan dan selesai!