SyahrilHafiz.com

Malaysian Blogger


You are here: Home / Themes / Edit themes blog anda lebih kemas dan menarik!

Edit themes blog anda lebih kemas dan menarik!

oleh 73 Comments

Assalamualaikum dan Salam 1 Malaysia.

Sebenarnya aku tak pasti samaada korang dah tahu atau belum tutor mengedit themes untuk kali ini. Edit themes blog korang lebih kemas dan menarik dibahagian bucu blog dari bentuk asalnya bucu petak(bucu tajam) kepada bucu bulat yang terdapat di bahagian bucu di blog ini. Dan juga menambah border dibahagian tepi blog.

Untuk kali ini aku menggunakan software Bluefish untuk HTML Editor dan Photoshop Legend ini untuk memberi sedikit gambaran. Pastikan korang backup themes blog untuk mengelak sebarang error yang terdapat di themes.

Membuat border di tepi blog

1. Buka buka Appearance > kemudian pergi ke Editor > klik pada style.css

2. Copy kesemua kandungan code yang terdapat dalam sytle.css itu dan paste pada HTML editor korang.

3. Letak code ini di bahagian 167 #wrapper seperti gambar diatas

 border:1px solid #000;

Boleh tukar warna border  #000 kepada warna yang korang nak

4. Kemudian copy kesemua code yang terdapat dalam HTML Editor tadi ke style.css

5. Update File korang. Lihat hasilnya.

Tukar bucu petak kepada bucu bulat

1. Buka HTML Editor korang tadi dan pastekan kesemua code yang terdapat di dalam style.css

2. Seperti gambar diatas, paste kan code dibawah dibahagian 167 #wrapper

 -moz-border-radius:20px;

-webkit-border-radius:20px;

3. Copy kesemua code yang terdapat dalam HTML Editor > Update File

4. Lihat hasil di bahagian blog korang seperti blog ini.

Senang kan? Main .css memang best, kalau lagi arif tentang coding HTML, PHP dan lain-lain lagi cantik hasil yang korang dapat. Selamat beramal~

Artikel Berkaitan:


Comments

  2. ader x tempat untuk aku belajar coding atau ader code code untuk aku copy paste masuk kat web aku, senang sikit, apply jer terus, hehe

    Reply

  7. tapi ada blur2 sket kat bucu tu.. cam guna blur tool.. 😀
    ni pun okey dah ni.. aku nak tambah kaler background cam ko letak kaler ungu kat blakang ni pun tak jumpa2..ingat nak kasi kontra sket ngan putih tu..

    Reply

  19. border-radius:20px; /* border radius ini untuk Internet Explorer biasanya IE6 ke atas */
    -moz-border-radius:20px; /* tambah prefix -moz- sebelum border-radius untuk firefox */
    -webkit-border-radius:20px; /* prefix webkit untuk Safari, Opera, Opera Mini, Opera Mobile, Iphone 3/3GS/4 */

    css border bagus untuk benda biasa-biasa macam border gambar, border header, border avatar, border sidebar tapi tak berapa bagus untuk comment list sebab comment list akan loading lebih slow (dalam mili second).

    Reply

    • oh..thank 4 info..
      ada lagi border yang boleh melambatkan loading komen ni..
      ingat nak plain je.tapi tak menarik la pulak..hehe

      p/s dah tengok web bro post tadi, boleh tahan semua..kena buat cara offline la nampak gaya

      Reply

  25. wow dah belajar css3 :mrgreen:

    tambah sikit;
    -moz- untuk gecko (mozilla)
    -webkit- untuk webkit (chrome, safari)
    -o- untuk opera

    kalau ie kene tambah meta tag sikit. tapi hanya untuk IE9 yang dikatakan support.

    dan dia akan guna border-radius. tak perlu tambah tag lain.

    Reply

  26. hehehe.. dh start pki css3 eh.. hebat tue.. aku nnt nk modify blog lg pastu try integrate semua function guna css3, xnk guna javascript lg kalo boleh.. 🙂

    Reply

  28. jeles je bila tengok orang lain pandai main coding..tak yah cakap org lain,dengan bini aku pun aku jeles..terer giler main coding..hehe..kalau rajin aku nak belajar juga la coding2 ni

    Reply

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

Pilih Arkib

Pilih Kategori

PRODUK UNTUK DIJUAL

Minyak Enjin Kereta Terbaik

Anak Pokok Limau Nipis

Anak Pokok Betik Sekaki

Susu Kambing Segar Dari Ladang

Susu Lembu Segar Dari Ladang

Chia Seed Murah & Organik

ANDA PERASAN BLOG INI LAJU?

Hosting yang disarankan adalah [1]. Rakan kerjasama Laman Rujukan Kerjaya & Minyak Enjin XRA Power