TIPS CSS: Menetapkan skala imej bersesuaian dengan template. (WordPress)
Salam ceria dan salam mesra semua. Kali ni saya nak kongsi bersama tips yang agak ringkas mengenai skala imej di dalam sesebuah blog. Pasti ada diantara kita yang kerap kali menggunakan imej yang agak besar skalanya dalam penulisan masing-masing. Perkara ini kadangkala membawa kecatatan kepada template yang digunakan. Sedar tak sedar, imej yang pada asalnya disusun atur dengan kemas semasa menaip, tetapi telah terkeluar dari sempadan template apabila catatan tersebut dipaparkan (published).
Tutorial kali ini, kita kongsi bersama pengalaman untuk mengkonfigurasi imej yang kita muat-naik kedalam blog supaya imej ini tidak terkeluar dari landasan. Terlebih dahulu, sila login ke dashboad anda, seterusnya ke bahagian Appreance –> Editor.
Daripada sini, sila klik Stylesheet (style.css). Kebiasannya, paparan asal memang menunjukkan pilihan Stylesheet (default view).
Seterusnya, cari code:- .post img { … } sekiranya code ini tidak terdapat dalam fail style.css anda, sila buat penambahan yang pada barisan yang baru. Saya syorkan kamu menambah dibawah .post, .post ul, ataupon dibawah kategori /* – Post style – */
Dah jumpe mana nak letak? Jadi masukkan code dibawah ini:-
.post img {
max-width: 90%;
border: 1px dotted;
}
Sedikit penerangan ringkas
-
.post img { .. } – adalah code yang berada di dalam HTML iaitu <img src=””> Kod .pos img ini hanya akan mengconfigurasi imej yang berada di dalam post sahaja. Ia tidak akan menggagu mana-mana imej lain di dalam blog anda.
-
max-width: 90%; – adalah jumlah saiz lebar maksimum yang dibenarkan untuk setiap imej yang kita masukkan. Sekiranya imej tersebut lebih besar lebarnya, HTML akan secara automatiknya mengecilkan imej ini mengikut tetapan yang telah diberikan oleh CSS.
-
Border: 1px dotted; – pula adalah untuk menambah bingkai pada gambar tersebut. 1px beerti ketebalan bingkai. Manakala dotted adalah jenis bingkai titik-titk. Sekiranya anda ingin mengubah kepada garisan terus (lines) anda boleh tukar kepada solid.
-
Tambahan: Sila pastikan anda tidak tertinggal simbol simbol seperti:- titik dua bertindih ( : ) dan titik koma ( ; ).
![update[1]](http://azmanishak.com/wp-content/uploads/2010/03/update1.jpg "update[1]")
Dah siap, jangan lupa simpan (save) hasil kerja anda dengan menekan butang [UPDATE FILE]. Seterusnya cuba lihat semula perbezaannya pada laman anda. Selamat mencuba~
Nota: Banyak perkara yang kita tahu, makin banyak pula yang kita kekurangan. Tips ini untuk mereka yang baru nak bermula dengan WordPress dalam sesi mencantikkan blog. Kepada sesiapa yang dah advance, sila beri tunjuk ajar pulak ye. Terima kasih Malaysia.
0 Maklumbalas kepada: TIPS CSS: Menetapkan skala imej bersesuaian dengan template. (WordPress)
Leave a Reply
Kerap berkomen
wazy (6)
Long (4)
yanmie (4)
Azman (3)
Kujie (2)
Sham Hardy (2)
titan (2)
abu85 (1)
Aeropama (1)
akusape (1)
Tukar Banner
mmg superb tutorial kali ni bg org baru mcm lazaac…. best guna self-hosted sbb suma benda leh custom setting… lebih kebebasan dalam berkreati… thanks bro…
.-= lazaac entri terkini blog ..EGYDOWN nak dijual!? =-.
owh owh owh.. saya pon baru belajar jugak.
same same orang baru la kita kan.
P/S: welkam to the self hosted clob. best kan? bebas betoi. :sengeh:
Elok buat width=100% baru gambar akan resize sama padan ngan content wrapper…baru nampak lagi smart
.-= EiNS entri terkini blog ..Magatheme – free minimal wordpress theme =-.
ye ke bro? kalau 100% dia terkeluar tak dari border template?
so kalau kita buat image width=”100%” & height=”100%”
macam ni gambar boleh jadi penyek tak? Please plase.. info sket :sengeh:
set width 100% je man.. height x yah.. nnt die auto ikut saiz gambar.. 100% tu means die penuhkn lebar ruang content..
.-= Anarm entri terkini blog ..Edit theme WordPress di localhost =-.
ic ic. erk.. tak nampak macam kepenuhan ruang dalam
template tak? space tadek. so aku prefer 90% jer dari
jumlah keseluruhan lebar template entri. itu just
pada pandangan dan minat aku la. lain orang lain cara.
tapi apa pon thanks for sharing beb :bangge:
salam bro,
owh guna css ni ok gak eh,kalau kita edit kat media setting tu ,boleh jugak kan
.-= wazy entri terkini blog ..Streamyx Oh Streamyx Part 2 =-.
betoi betoi.. tapi kalau ade template lagi kecik dari
yang ditetapkan kat media? same jugak, kita still
nak godek lagi sekali seting tuh.
lagipun tips ni untuk yang suke main css. just
nak sharing jer.. sebagai rujukan diri sendiri.
maklomla aku ni cepat lupe.. haha :lawak-gile:
Wow nice tips bro.So lepas fix css tu,kalau aku nak tukar theme,tak akan ada lagi masalah size image la kan?
.-= Luke entri terkini blog ..Ghathering Blogger di Dataran Pahlawan Melaka pada 28 Mac =-.
tak luke. ini untuk kaki godek template je.
kepada yang tak suke godek template,
dia set kat media macam si Fazreen cakap
kat atas, tapi kalau template tuh kecik lagi bordernye..
maka sekali lagi jugak kene adjust width dalam media tuh :sengeh:
ermm.. simple je tutor hang..
mudah difahami..
good2.. tapi bila aku update je selalu ada error..
.-= luth textile entri terkini blog ..Kenapa anda perlu miliki domain .com? =-.
dah cube buat local webserver ke? boleh test local dulu
sebelum upload template tu ke internet :hehe:
yay yay yay… azmanishak sudah menjadi css jedi!
best best!!
.-= Sham Hardy entri terkini blog ..Menanti Berita Baik Inisiatif Jalur Lebar Kebangsaan =-.
aku baru padawan la bro. hang lain la.. :sengeh:
hebat laa abg css.. keh3 :hehe:
.-= Anarm entri terkini blog ..Edit theme WordPress di localhost =-.
hebat wak lu.. aku dah tak tau ape nak taip kemarin neh.. :lawak-gile:
bro. nak dapat efek bayang kat imej tu macamana lak? :sengeh:
.-= zaryl entri terkini blog ..Perubahan Diri Meniti Usia Kehidupan =-.
shadow for image tu dia pakai image jugak la bro.
aku rasa macam tak prektikel jer buat shadow macam tuh.
sebab dah dua imej blog akan load. so jadi berat jugak la.
aku dah carik code lain.. tapi kebanyakkan contoh kat
pakcik google semua cakap mesti ade shadow image.gif <– contoh. :wek:
owh… kiranya gambar jadi lebih bagus dia punya pixel??
.-= zikr entri terkini blog ..Mari berzikir! =-.
tak jugak. ini just tak nak bagi dia terkeluar ni.
ini untuk seting template. kalau media, cube tengok
komen dari Fazreen kat atas. boleh terus je direct. :sengeh:
ok thank u bro
:bye:
.-= zikr entri terkini blog ..Cara menjadi presenter yang berkesan! =-.
lagi satu boleh setting kt media…letak saiz width image based on width template..then height biakan kosong..so gambar xkn nampak penyek ke ape..
owh ye ke? even kalau kita host image kat tempat lain?
macam tuh ke? thanks for sharing ye :bangge:
huhuhu…. kak jie jerit je kat twitter…help……..help………
ramai je yg sudi tolong..hahaha
.-= kujie entri terkini blog ..Sindrom Lulus SPM Cukup Makan =-.
hehe.. skang ni dah tukar template lain eh kak jie?
tak pe.. kalau ade ape nak mintak tolong… bagi le tahu.
nak kene perbanyakkan latihan CSS. saya masih lemah. :sengeh: