Post

Tuto

Free

BG
Afiqah Junizan

Tutorial : Basic CSS dalam Blogskins
16/12/2013 | 2 comments

Actually kan tutorial nih fiqa tak pandai lah nak explain macam mana. Tapi fiqa cuba sedaya upaya untuk korang faham. So, kalau tak faham, boleh lah comment, insyaallah fiqa akan membantu.

Basic :-

1. Tag <title>Letak lah apa-apa nama</title>

Explanation :
Title nih untuk tajuk blog korang. Contoh, korang nak letak nama blog korang "Blogshop in The Heaven".

How to use it: <title>Blogshop in The Heaven</title>
Where to put it : Selepas <html> or <head> . Kalau takde, letak atas code <style>


2. Tag <style>Letak code css</style>

Explanation : 
Actually style nih fiqa tak tahu dia code ke apa. Tapi fiqa gelarkan jelah sebagai "tag" \memandainya fiqa nih/. Code ini wajib diletakkan kalau tidak skin yang awak bina tak akan jadi. Tag style nih boleh diletakkan berulang kali. Code css tuh apa ? Scroll kebawah. Fiqa ada explain kan. 

How to use : <style>#box{width:200px;height:300px;background:#aaa;}</style>
Where to put it : Anywhere. Tag style nih tidak terikat. Boleh diletakkan dimana sahaja.

3. Css body{}

Explanation : 
Css body nih untuk background blog korang. Code nih mesti letak kalau korang nak blog korang ada background. Code ini juga boleh tentukan font dekat post korang.

How to use it: body{background:url(http://i.imgur.com/iQAnV4T.gif); font: 12px verdana; color: #333;}
Where to put it: Selepas code <style> sahaja atau sebelum code </style>

4. Css #navbar-iframe {}

Explanation :
Navbar nih ala benda yang kat atas tuh. Kalau blogskins, nak nampak blog anda lebih cantik, code ini perlu diletakkan.

How to use it : #navbar-iframe {display:none}
Where to put it: Selepas code <style> sahaja atau sebelum code </style>


Additional Information :-

1. Tag <html> or <head> 

Explanation : 
Boleh diletakkan tapi kalau taknak letak pun takpe. Takde effect apa-apa dekat skin. Tapi better tak payah letak. Kalau nak letak juga, boleh.

How to use it: <html> diletakkan code mula-mula sekali dan </html> diletakkan code terakhir sekalibegitu juga sebaliknya bagi code <head>

2. Css tu apa ?

Explanation : 
Css ialah yang ada tanda curly bracket "{" dan "}"

Example : #menu {background: url(http://i.imgur.com/5ZhjXZ1.png)color: #aaa;font: normal 20px Arial;width: 100px;height: 70px;}

Beautifier Css :-

Kalau korang nak cantikkan lagi or kemaskan lagi blog korang, boleh lah letak code-code nih :-

Untuk link/url : 
a:link,a:active,a:visited {text-decoration: none;color: #aaa;}

Untuk image :
img{padding:5px; boder:1px dashed :#aaa;background:pink;}

Untuk caption image:
.tr-caption {background:#aaa;padding:5px;}

Untuk scrollbar :
::-webkit-scrollbar {width: 15px;background: url(http://i.imgur.com/ymWWlO8.png;}
::-webkit-scrollbar-thumb {background: pink;}

Untuk highlight text:
::-moz-selection {color:#fff;background:#F0D8A8;}
::selection {color:#fff;background:#F0D8A8;}

p/s : code nih hanyalah contoh. Korang boleh tambah code kalau korang nak.

Seriously fiqa dah tak tahu nak explain kan macam mana lagi. Hanya nih sahaja fiqa boleh bantu. Kalau tak faham bolehlah comment, inyaAllah fiqa boleh bantu. Mohon maaf kalau ada salah, sila lah perbetulkan jika ada kesilapan ~

OLDERNEWER