Lihat semua pos oleh Saiz Font (CSS/JS)
24 November 2008 | 
Hai semua, sebelum saya bercuti lebih panjang hujung tahun ini, saya ingin berkongsi cara-cara bagaimana untuk menghasilkan “font size†pada website anda. Dimana “saiz font†di website boleh ditukar-tukar dari kecil hingga bersaiz lebih besar.
Lihat contoh terlebih dahulu disini
HTML KOD
Ok, tanpa berlengah lagi mari kita ikuti cara-cara serta teknik penghasilan ini, apa yang perlu anda lakukan adalah hasilkan satu page baru dalam Dreamweaver atau mana-mana editor yang anda biasa gunakan. Pastikan anda telah hasilkan antaramuka HTML terlebih dahulu. Lihat contoh kod saya dibawah ini.
TIPS: Kod CSS dan Javascript anda, boleh diasingkan dari HTML kod ini, dalam kes ini saya meletakkan kod css/js sekali didalam page HTML ini bagi memudahkan kerja-kerja saya.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pertukaran Saiz Font</title>
<script type="text/javascript" language="javascript">Kod JS anda disini</script>
<style type="text/css" media="screen">Kod CSS anda disini</style>
</head>
<body>
<div id="content_area">
<div id="textsize">
<h1>Pertukaran Saiz Font Laman Web</h1>
<ul id="textsize">
<li><a href="#" title="Saiz Membesar" onclick="pertukaranFont(1);return false;">A+ (Saiz Membesar)</a></li>
<li><a href="#" title="Saiz Mengecil" onclick="pertukaranFont(-1);return false;">A- (Saiz Mengecil)</a></li>
<li><a href="#" title="Saiz Asal" onclick="FontAsal(); return false;">A (Saiz Asal)</a></li>
</ul>
</div>
<div id="info">
<p>Informasi disini</p><p>Informasi disini</p>
</div>
</div>
</body>
</html>
Dan “copy” serta “paste” kod CSS dibawah ini.
Css Code
body {
background-color:#333333;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:19px;
margin:0px;
}
a {
color:#FF9900;
}
a:hover {
color:#993300;
}
/*
Text Size
*/
#textsize {
margin:10px;
padding:20px;
background:#000000;
overflow:hidden;
font-size:16px;
font-weight:bold;
display:block;
}
#textsize h1{
margin:0px;
padding:0px;
color:#FF9900;
}
ul#textsize {
margin:20px 0px;
padding:0px;
position:relative;
right:0px;
}
ul#textsize li {
display:inline;
margin-left:12px;
}
ul#textsize li a {
text-decoration:none;
color:#716d6a;
font-size:11px;
font-weight:bold;
text-transform:uppercase;
}
ul#textsize li a:hover {
color:#FF9900;
}
#info {
margin:10px;
padding:10px;
border:1px #444444 solid;
}
JavaScript Code (simple je ni)
Langkah seterusnya, pastikan anda letakkan kod Javascript dibawah ini sebelum/selepas kod <head ></head > lihat kod saya pada ruangan HTML code terdahulu.
var LoadFont = false;
var fontAsal = 75;
var fontSemasa = fontAsal;
function FontAsal(){
fontSemasa = fontAsal;
pertukaranFont(0);
}
Menentukan saiz font anda pada yang asal. Disini saya meletakkan 75 adalah bersamaan dengan 11pixel didalam CSS saya.
function pertukaranFont(saizBerbeza){
fontSemasa = parseInt(fontSemasa) + parseInt(saizBerbeza * 5);
if(fontSemasa > 100){
fontSemasa = 100;
}else if(fontSemasa < 60){
fontSemasa = 60;
}
tentuFont(fontSemasa);
};
Anda boleh meletakkan value dan setkan kebesaran font anda, seperti contoh disini saya meletakkan paling besar font saya adalah 100 dan ada boleh menukar kepada 200 mengikut kekentalan anda.
function tentuFont(fontSize){
var stObj = (document.getElementById) ? document.getElementById('content_area') : document.all('content_area');
document.body.style.fontSize = fontSize + '%';
};
“Content_area” adalah menetapkan pada keseluruhan pada page laman web anda.
Sila lihat contoh CSS code dan Javascript code dimana ia menentukan saiz font anda dari mengecil hingga membuatkan saiz font anda membesar sihat. Diharapkan tuts serba ringkas ini dapat memberikan anda kefahaman yang mudah dan membuatkan hidup laman web anda lebih menarik.
Sila donate untuk melancarkan kerja-kerja rekaan tutorial sifoo di masa akan datang. Terima Kasih.
–
FontSize
*Klik kanan > Save Link As / Save Target As
(Telah dimuat-turun sebanyak 203 kali)
Selamat Mencuba
Happy Browsing,
Hairudy.net
Popularity: 57% [?]
Jika anda baru di Sifoo.com, mungkin ada baiknya anda melanggani RSS Sifoo.com melalui email atau feed. Terima kasih kerana berkunjung!
Nota: Artikel atau tutorial ini hakmilik Sifoo.com. Aktiviti seperti meniru, menyalin, menciplak dan menerbitkan semula tanpa izin adalah ditegah sama sekali. Keizinan boleh diberikan sekiranya anda berminat dan berbincang dengan pihak Sifoo.com. Sila berikan kredit dan linkback kepada penulis asal dan laman web Sifoo.com.
Saya sanagat berminat dengan bengkel ni. Tetapi saya tidak dapat menghadiri bengkel pada tarihk tersebut.Adakah bengkel seperti ini akan diadakan ...
hehehe sifoo dah jadik pun. thanks!
Sopie, boleh daftar dulu. 
Komen oleh yeopmi pada 27 November 2008:
tima kasih,sangat berguna
Jumlah komen oleh yeopmi: 5
Komen oleh ariena pada 1 January 2009:
thank’s a lot….dh lama sy cr akhir tutorial ini plg membantu….
Jumlah komen oleh ariena: 2
Komen oleh peacepeijal pada 20 February 2009:
byk dah jumpe kt tenet tpi time aku nk wat je kompem xjadik.. yg nih buleh pham le.. bahasa melayu.. mekasih bro!!
Jumlah komen oleh peacepeijal: 22