Cara-cara membuat Image Borders
September 26th, 2007 by eddyra on SketsaThis posting will be presented in Malay language, those who cant understand Malay, you can search elsewhere using the same keyword you use just now.
Di dalam posting kita, mungkin ada image yang ingin kita attach untuk menjelaskan lagi content kita, paling tidak pun untuk cantikkan blog kita. Tak kiralah content kita tu ada point ka takda ka, asal cantik OK la tu huhuhu..
Ada sesetengah blogger yang tak kisah dengan image arrangment mereka, kadang-kadang sakit mata tengok text sudah hit image. Content cantik, tambah image yang di arrange cantik akan mencantikkan lagi sesuatu blog.
OK kali ini, aku dengan rasa rendah diri menulis cara-cara membuat border pada image kita, so blog kita akan nampak lebih kemas dan tak selekeh. Kepada web designer, pro dan otai-otai rasanya tak perlu lah baca posting ni, tidak sesuai untuk tuan-tuan.
Ok lets go.
Seperti image kucing di bawah ni, text terlalu rapat dengan image menjadikannya kurang kemas, so mari kita kemaskan image kucing ini…
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
OK 2 cara untuk add border to an image.
1- edit style.css
Untuk ini kita perlu open style.css
Presentation > Theme Editor and go to Stylesheet.
So katakan kita nak letak white border untuk jadikan spacing antara text dengan image. So modify style.css seperti ini.
img { padding: 10px; border: solid 10px #FFFFFF; }
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
OK now we can see a gap between text and image. Tak nampak berserabut dah. Perlu diingati sekiranya kita edit style.css ni, maka semua image kita automatic akan dapat border ni.
2- Using image editor
OK untuk tujuan yang sama seperti di atas, tapi cara ini hanya untuk single image sahaja. Open image editor, aku biasa pakai Paint Shop Pro (PSP)
Go to Image > Add Borders
Set color style white seperti di bawah.
Masukkan value seperti di atas. Save. So kucing kita ada white border around it. Then upload to wordpress.
Kalau background page kita warna biru, set kan border warna biru dan sebagainya.



February 1st, 2008 at 4:59 pm
Saya dah siap blog, tapi biasa aje le. Macam mana nak bagi cantik macam kau orang punya blog. Wa jelos la.
Reply