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 :
Silahkan login terlebih dahulu ke wordpress admin anda.
Klik Editor di menu Appearance.
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.
Kemudian anda cari yang ada tulisan body{background:#424452;}.
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 : https://www.colorschemer.com/online.html.
Jika ingin mengganti background dengan sebuah gambar, setelah penulisan kode warna tambahkan kode : url(URL gambar yang ingin dimasukkan).
Contoh :
body {background : #1d1f2f url(https://static.m-alwi.com/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 :
Jika gambar tidak ingin diulang tampilannya dan akan ditempatkan di kanan atas, cukup menambahkan kode no-repeat right top, penulisan kodenya seperti ini :
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.
Semoga Artikel ini bermanfaat buat sobat semua !
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 :
Silahkan login terlebih dahulu ke wordpress admin anda.
Klik Editor di menu Appearance.
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.
Kemudian anda cari yang ada tulisan body{background:#424452;}.
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 : https://www.colorschemer.com/online.html.
Jika ingin mengganti background dengan sebuah gambar, setelah penulisan kode warna tambahkan kode : url(URL gambar yang ingin dimasukkan).
Contoh :
body {background : #1d1f2f url(https://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(https://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(https://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(https://static.m-alwi.com/img/bintang.jpeg) no-repeat right top;}
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.
Semoga Artikel ini bermanfaat buat sobat semua !
Tidak ada komentar:
Terimakasih atas komentar anda .
Salam Blogger !