Cara Mudah Membuat Template Blog - Image Positioning

Bertemu lagi dengan saya di rubrik #template. Kali ini kita akan bermain-main dengan Image Positioning. Apa itu Image Positioning? Image Positioning itu meletakkan image pada template blog kita menggunakan CSS. Mengapa sih Image Positioning ini perlu? Pasti semua sudah tahu, bayangkan saja kalo image yang sudah kita rencanakan itu letaknya tidak pada tempat yang diinginkan, pasti bikin stres. Setiap template mempunyai pembagian DIV ID yang berbeda-beda. Maka kali ini, saya akan memberikan contoh melakukan Image Positioning pada template yang saya buat di shop.intikali.org. Unduh dulu template dari sana dan mari bermain-main dengan Image Positioning.

Disarankan untuk membuat blog baru untuk diuprek-uprek, jangan gunakan blog utama kamu, karena takutnya akan terjadi kegagalan mengedit dan hancur lebur tampilannya LOL. Pastikan kamu sudah menyiapkan image yang sudah kamu slicing untuk bahan percobaan. Resolusi image yang disarankan adalah mempunyai lebar 1000 pixel seperti halnya yang saya tulis di Image Slicing. Berikut adalah langkah-langkah image positioning pada template yang terdapat di shop.intikali.org.

1. Buka Dashboard kamu (kalo aku pake Dashboard yang lama)
2. Pilih Design > Edit HTML
3. Choose file (pilih template yang tadi kamu download dari shop.intikali.org) pada Upload a template from a file on your hard drive: lalu Upload
4. Lalu Save Template
5. Lihatlah tampilan blogmu sekarang
6. Kembali lagi ke Dashboard > Design > Edit HTML
7. Siapkan file image hasil slicing yang akan kamu pasang, dan ambil URL dari semua image tersebut
8. Carilah (dengan Ctrl F) #header lalu perhatikan isi #header tersebut, pasti ada background: url('xxx') no-repeat top center, ganti xxx dengan URL image kamu.
9. Perhatikan juga height: pada #header, isi dengan dengan tinggi image yang kamu buat.
   
   

   

   #header

   
   
10. Lakukan hal yang sama pada #content-wrapper, #center, dan #footer
11. Lakukan uji coba berkala jika masih ada error, periksa dengan teliti, mungkin kamu meng-copy URL image tidak benar (ini biasa terjadi, hanya karena spasi atau enter, image bisa tidak muncul)

Selamat mencoba, semoga sukses. Tunggu tutorial lanjutannya, yaitu Partial Positioning.

Bagian Sebelumnya: Cara Mudah Membuat Template Blog - Photoshop Image Slicing
Bagian Selanjutnya: Cara Mudah Membuat Template Blog - Partial Positioning