Kustomasi Halaman Login Wordpress

Tutorial ini valid untuk Wordpress versi sebelum 2.5, untuk Wordpress 2.5 ke atas, anda harus mengedit file logo-login.gif di folder wp-admin/images instalasi wp anda.

Anda memiliki blog wordpress sendiri?
Ingin memiliki halaman login seperti ini?

Baik, saya akan mengajarkan anda cara membuatnya. Anda hanya perlu duduk di depan PC anda dan menghidupkan Linux Box anda. Kita langsung mulai dengan ...

Membuat Canvas Baru

Buka The Gimp anda, menu Applications >> Graphics >> Gimp Image Editor.
Buatlah sebuah file baru,

1. Menu File >> New... (Ctrl+N)
   Isikan lebar (width) 390 pixel dan tinggi (height) 450 pixel.
   Di bagian Advanced Options, pilih transparency sebagai latar (Fill With).


2. Untuk memudahkan, simpan file baru ini dengan nama wp-login.xcf

Catatan: .xcf adalah ekstensi default the gimp untuk sebuah file proyek. Sepadan dengan .psd milik photoshop.

Membuat Seleksi dan Rounded Rectangle

Setelah anda dihadapkan pada kanvas anda,

1. Pilih selections tool
   Di bagian selections dialog, masukkan nilai 5 di X dan Y sebagai awal menarik seleksi dan ukuran lebar, masukkan 370 dan tinggi, 430, sehingga, ukuran selections sekarang menjadi 370x430 pixel.


2. Kemudian untuk membuat round selections, pada jendela kanvas klik menu Select >> Rounded Rectangle.


3. Pada jendela yang terbuka, masukkan nilai 10 pixel sebagai radius, dan klik OK.

Mengisi Rounded Rectangle

Sekarang kita akan mengisi rounded selections dengan warna putih.

1. Pilih tool Bucket Fill, dan pastikan di palet warna, putih terpilih sebagai foreground. Jika belum, pilih dengan mengklik palet foreground.


2. Setelah itu, klik di bidang kanvas, sehingga Rounded Rectangle terisi dengan warna putih.

Mengisi Rounded Rectangle dengan Shading

Setelah terisi warna putih, kita akan membuat rounded rectangle kedua di dalam rounded rectangle pertama.

1. Klik menu Select >> Shrink, dan isi dengan nilai 10 untuk radiusnya. Kemudian klik OK.


2. Sekarang, kita memiliki rounded rectangle kedua yang akan diisi dengan shading.
   Untuk latar shading, anda bisa menggunakan warna pilihan anda sendiri. Pilih warna foreground dan background yang berbeda (sebaiknya tidak terlalu kontras), kemudian klik tool Blend.Pada dialog, anda akan melihat hasil pencampuran warna tersebut. Untuk memberi warna, klik-tahan-tarik-lepas (drag) dari bawah keatas atau sebaliknya, sesuai keinginan anda.

Menambahkan Logo Pribadi

Sekarang saatnya kita menambahkan logo pribadi.

1. Buka file logo anda, saya sendiri menggunakan file logo di situs web ini (lihat di pojok kanan atas!).


2. Kemudian, pada jendela logo anda, klik menu Edit >> Copy (Ctrl+C).


3. Pada jendela blend file wp-login.xcf, klik menu Edit >> Paste (Ctrl+V).
   Kemudian atur letaknya dengan mengklik move tool, klik di logo yang baru di paste, dan atur sesuai keinginan anda dengan menggunakan tombol panah keyboard anda.

Menambahkan Teks

Untuk menambah teks,

1. Klik tool text, kemudian klik di bidang kanvas file wp-login.xcf. Pada jendela yang muncul, ketikkan teks yang anda inginkan dan klik tombol Close.Untuk mengatur ukuran, warna, dan jenis teks, anda bisa mengaturnya di jendela dialog teks.


2. Sekarang, jika anda sudah selesai menambahkan teks, sekarang simpan pekerjaan anda, menu File >> Save (Ctrl+S).

Memotong gambar

Halaman login wordpress, terdiri dari dua gambar latar (background), karena itu, kita akan memotong pekerjaan kita menjadi dua.

1. Sekali lagi, pada jendela yang terbuka, simpan pekerjaan kita dengan nama baru, wp-login.gif. Ini penting, untuk melindungi file xcf kita, jika sekiranya kita masih ingin merubah pekerjaan dasar kita nantinya.


2. Pada file gif, klik layer teratas pada dock layer, kemudian pada jendela file wp-login.gif, pilih menu Layer >> Merge Down, sampai semua layer menjadi satu.

Untuk memotong, ikuti langkah berikut:

1. Pilih tool select


2. Pilih area terbawah, sampai ke atas tulisan (pada contoh), kira-kira 40 pixel (aslinya 20 px) kemudian


3. Klik menu Edit >> Copy (Ctrl+C) untuk meng-kopi, dan Edit >> Paste as >> New Image, untuk membuat gambar baru dari clipboard.


4. Simpan gambar potongan terbawah tsb dengan nama login-bkg-bottom.gif

Kemudian, untuk memotong bagian atasnya, aktifkan jendela wp-login.gif (jangan mengklik di bidang gambar, klik di border jendela!)

1. Klik menu Selections >> Invert (Ctrl+I)


2. Klik menu Edit >> Copy (Ctrl+C) dan paste sebagai image baru.


3. Simpan potongan gambar kedua dengan nama login-bkg-tile.gif

Mengupload Gambar

Nah, untuk melihat hasilnya, upload kedua gambar tadi ke direktory public_html/wp-admin/images/
Dan akses melalui browser anda di alamat-blog/wp-login.php.

Tadaaa!, tutorial kita sudah selesai.
Alhamdulillah!