Home » CSS » Cara Mengganti Background Theme WordPress

Cara Mengganti Background Theme WordPress

27 Mar. 2011137 comments
Cara Mengganti Background Theme WordPress

Kalau selama ini saya sering membuat tutorial blogging yang mungkin bisa dibilang untuk hal-hal yang rada rumit dan njlimet, kali ini giliran saya sajikan yang enteng-enteng dan ringan, yakni tentang cara mengganti background theme wordpress (self hosting). Walaupun tutorial enteng dan ringan tapi ternyata masih banyak banget yang mencarinya, buktinya postingan tentang cara mengganti background blogspot hampir tiap hari selalu ada yang mengaksesnya.

Untuk kalangan menengah apalagi master mungkin ini postingan basi dan sangat tidak menarik, jadi abaikan saja karena ini sekedar untuk pelengkap blog  ini sekaligus memenuhi beberapa permintaan dari pengunjung. Ok langsung ke TKP :

  1. Silahkan login terlebih dahulu ke wordpress admin anda.
  2. Klik Editor di menu Appearance.
  3. Setelah di halaman Edit Themes biasanya file yang terbuka pertama kali adalah file css default dari theme yang digunakan, jika tidak anda bisa buka file style.css yang ada di bawah tulisan Stylesheet.
  4. Kemudian anda cari yang ada tulisan body{background:#424452;}.
  5. Jika sudah ketemu anda bisa mengganti kode warna misalnya : #424452 dengan kode warna favorite anda, misalnya : #2887b3. Untuk kode warna lainnya anda bisa menggunakan Adobe Photoshop atau bisa memanfaatkan Online Color Scheme Generator misalkan di sini : http://www.colorschemer.com/online.html.
  6. Jika ingin mengganti background dengan sebuah gambar, setelah penulisan kode warna tambahkan kode : url(URL gambar yang ingin dimasukkan). Contoh :
  7. body {background : #1d1f2f url(http://static.m-alwi.com/img/bintang.jpeg)}

    Atau seperti ini :

    body {background : #1d1f2f url(img/bintang.jpeg)}

    Keterangan : “img” adalah nama folder pada theme yang digunakan untuk menempatkan atau upload gambar background, nama folder bisa disesuaikan.

    Di samping untuk bagian body anda juga bisa mengganti warna/gambar background pada area postingan, bagian komentar, sidebar dll, tinggal dicari nama ID atau Class Selector dari area yang akan diganti warna/gambar background-nya, teknik selanjutnya hampir sama caranya.

    Dengan teknik penulisan kode seperti itu gambar yang ukurannya kecil akan direpeat tampilannya ke kanan dan ke bawah (horizontally or vertically).

    Jika hanya ingin memberi gambar background di bagian atas saja anda bisa menggunakan teknik repeat-x (image is repeated only horizontally) penulisan kodenya seperti ini : body {background : #1d1f2f url(http://static.m-alwi.com/img/bintang.jpeg) repeat-x;}, atau jika hanya ingin memberi gambar background di bagian kiri saja anda bisa menggunakan teknik repeat-y (image is repeated only vertically) penulisan kodenya seperti ini : body {background : #1d1f2f url(http://static.m-alwi.com/img/bintang.jpeg) repeat-y;}.

    Jika gambar tidak ingin diulang tampilannya dan akan ditempatkan di kanan atas, cukup menambahkan kode no-repeat right top, penulisan kodenya seperti ini : body {background : #1d1f2f url(http://static.m-alwi.com/img/bintang.jpeg) no-repeat right top;}

  8. Kemudian simpan dengan klik button Update File, jika button tersebut  tidak ada/belum aktif anda harus mengaktifkannya lewat cpanel hosting dan mengganti file permissionsnya dari 0644 ke 0777 atau menjadi writable.

Anda juga bisa memberi warna atau gambar background yang berbeda-beda untuk tiap postingan, caranya anda bisa menambahkan fungsi Custom CSS Perpost pada file functions.php seperti yang pernah saya sampaikan sebelumnya. Cara menggunakannya, di posting editor pada box Custom CSS tambahkan kode css untuk menambahkan/menampilkan gambar background seperti yang sudah saya bahas di atas. Jika anda cukup mahir dengan CSS3, anda juga bisa memberi sentuhan-sentuhan CSS yang menarik pada background walaupun tanpa menggunakan gambar.

Mudah-mudahan artikel tentang Cara Mengganti Background Theme WordPress ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Mempercantik Tampilan Code Snippets Dengan CSS
  2. Membuat Text Gradient Dengan CSS
  3. Menggulingkan Top Komentator
  4. Cara Mengganti Font Dalam Postingan
  5. Tips dan Tricks CSS (Cascading Style Sheets)
  6. Yesterday, The Beatles
  7. Source Code Main Remi Bersama Top Komentator
  8. 80 Inspirasi, Design Footer Nan Cantik Dan Unik
  9. Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll
  10. CSS3, Sonic Mengejar Bola
  1. 27-3-2011 at 14:16 | #1

    Halo Mas Alwi…
    Met Hari Minggu, semoga sehat2 saja.
    Warna latar memang kadang ada yang kepingin dibikin variatif agar nggak mboseni.
    Semoga tuturial ini dan tutor2 berikutnya bermanfaat bagi yg memerlukan.
    Salam!

    Reply

    alamendah Reply:

    met hari minggu pula buat pak mars

    Reply

    Alwi Reply:

    Met hari Minggu juga dan moga Pak Mars and Kang Alam juga sehat semua … amin

    Reply

  2. 27-3-2011 at 14:28 | #2

    (Maaf) izin mengamankan KEDUAX dulu. Boleh, kan?!
    tutorialnya gampang. tapi dulu sewaktu punya self hosting saya juga termasuk yang mencari tutorial kek ini

    Reply

  3. 27-3-2011 at 17:00 | #3

    Rumit kayaknya buat gue pak,?takut gue kodenya salah edit.

    Reply

  4. 27-3-2011 at 17:01 | #4

    blogger banget deh,blog saya masih gratis tapi enak juga toh ganti2 latarbelakang na.!

    Reply

  5. 27-3-2011 at 18:49 | #5

    duh, bookmark dulu mas… mau saya coba, mumpung warna backgroud saya putih… hehehe.

    Reply

  6. 28-3-2011 at 08:48 | #6

    Tanya mas,cara mendapatkan URL gambarnya gimana???

    Reply

    Alwi Reply:

    Gambarnya diupload dulu ke hosting blog kita biar mudah upload lewat cpanel dan tempatkan gambar di folder img pada theme yg digunakan, jika pakai teknik ini gak usah nulis url lagi tapi cukup ditulis misalkan begini : body {background : #1d1f2f url(img/bintang.jpeg)} ket. img adalah nama folder tempat naroh gambar di hosting (nama bisa disesuaikan) bintang.jpg adalah nama file gambar untuk background

    Reply

    aming Reply:

    begitu ya mas, kalau dicoba melalu server local dulu apakah bisa?
    sebab masuk ke CPanel forbiden nih sama server…

    Bisa Kang ….

    Reply

  7. 28-3-2011 at 11:24 | #7

    Wah komplit banget nih mas.. tertarik juga nih yang Custom CSS Perpost. Background post bisa dikasih image pattern gitu mas?

    Reply

    Alwi Reply:

    Area postingan juga bisa dikasih gambar background berupa pattern dll tinggal cari ID atau Class dari area postingan tsb tekniknya penulisannya sama spt di atas hanya beda untuk ID atau Classnya

    Reply

    dHaNy Reply:

    Berarti setelah background masih ada class utk post ID gitu mas?

    Reply

  8. 28-3-2011 at 17:14 | #8

    Hehehehe…di wordpress.com apakah bisa mengganti background!!!

    Reply

    Alwi Reply:

    bisa juga tapi sebatas ganti warna dan gambar untuk background, caranya bisa dilakukan dari menu Custom Background, kalau mau bisa edit full css harus bayar beberapa dollar heee …

    Reply

  9. 28-3-2011 at 18:25 | #9

    pokoknya kalau masalah wordpress disini deh biangnya

    Reply

    Bang Iwan Reply:

    Saya banyak belajar dari sini..

    Reply

    Bang Iwan Reply:

    Bukan biangnya… tapi pakarnya menurut saya.

    Reply

  10. 28-3-2011 at 20:11 | #10

    Mas, loding blognya kenceng banget ya.
    Punya saya kalah, apa karena thema saya yang memberatkan ya?
    ngiri deh.. :D

    Reply

    Alwi Reply:

    Bisa juga karena theme, tapi masih banyak faktor lainnya kalau saya coba cek beberapa bagian yg perlu dioptimalkan/diperbaiki di bagian ini :
    Enable compression, di beberapa file spt css, javascript dll blm pakai kompressi
    Leverage browser caching
    Minify CSS
    Parallelize downloads across hostnames
    Specify image dimensions
    Combine external CSS
    Combine images into CSS sprites
    Optimize images
    Optimize the order of styles and scripts
    Combine external JavaScript
    Minify JavaScript
    Minimize DNS lookups
    Specify a Vary: Accept-Encoding header
    Specify a cache validator
    dll

    jumlah http request juga masih besar ada 78 kemudian ukuran halaman keseluruhan (home) file size 601.2 kb transfer size 553.6 kb, kalau blog ini jmlh http request untuk home hanya 3 buah, ukuran keseluruhan file size 30.8 kb transfer size 8.1 kb, walhasil loadingnya jadi cepat rata2 untuk halaman home bisa diload 0.5 s/d 3 detik

    Reply

    dHaNy Reply:

    Ajib banget deh mas… masih perlu banyak belajar saya kalo urusan loading ini… theme saya grafis banget dan gak mudeng masalah request2.. hehe

    Reply

Comment pages
1 2 3 12 2284
5+5=? (Wajib diisi)