Trick Ganti Background Blogger dg Background Buatan Sendiri Melalui Variable Definitions

Posting tentang mengganti background "Perancang Template Blogger (Blogger Template Designer) ini benar-benar menjadi posting tersulit yang pernah aku buat. Bukan saja keraguan-raguan yang terasa membelenggu akibat melihat beragamnya kode template yang disertai penggunaan Variable Definitions "si biang kerumitan", namun bahkan untuk membuat judul postingnyapun benar-benar membuat kepala pusing seribu keliling. Banyak kata coba dipakai namun tak satupun yang dirasa tepat dan tak mengaburkan makna. Rasanya untuk posting ini tak satupun kalimat yang dirasa pas untuk dijadikan judul. Dua kalimat di bawah ini misalnya, "Cara Membuat dan Mengganti Background Image Perancang Template Blogger (Blogger Template Designer) dengan Background Buatan Sendiri Lewat Variable Definitions" atau "Membuat Sendiri Background Perancang Template Blogger (Blogger Template Designer) Via Variable Definitions". Sepanjang inipun rasa-rasanya nggak pas juga. Yah... biar sjalah. Daripada posting nggak kelar-kelar sebaiknya segera mulai saja.

Sebelum memulai mencoba untuk mengganti background image blogger ada beberapa hal yang perlu diperjelas dan dipertegas agar apa yang dimaksud dalam judul posting lebih jelas.

1. Penggantian background image default blogger dengan background image buatan sendiri ini dapat dilakukan setelah sebelumnya anda membuat atau menyiapkan sebuah background image berukuran lebar (width) minimal 1024px dan tinggi (height) berkisar 700px.
2. Penggantian background image akan coba kita lakukan di template Mudah/Simple (by Josh Peterson) milik Blogger (Blogger Template Designer - Perancang Template Blogger) yang sebelumnya memang sudah menggunakan background image (background Besar). Anda bisa melihat blog yang menggunakan "template mudah/simple" di bawah ini.
3. Agar lebih mudah dan lebih mempercepat memahami tutorial ini sebaiknya anda melakukan percobaan terlebih dahulu menggunakan template yang dimaksud di atas (Template Mudah - Simple Template). Agar lebih aman, buatlah terlebih dahulu sebuah blog yang dikhususkan untuk melakukan berbagai percobaan memodifikasi blog (template).
4. Bagi yang membutuhkan panduan untuk membuat blog dengan template mudah/simple dari blogger template designer, anda bisa membukanya melalui link berikut:
   Cara Ganti Template Blogger dan Ganti Background Image

Template Mudah (Simple)
by: Josh Peterson
Klik untuk perbesar image.

Contoh blog yang menggunakan template Mudah (Simple) dilengkapi background image berukuran besar. Untuk melakukan pergantian background image seperti yang dimaksud dalam tutorial ini anda harus membuat terlebih dahulu sebuah blog yang sama dengan yang terlihat pada gabar dengan tujuan untuk mempermudah memahami tutorial. Diharapkan jika ini berhasil anda dapat melakukannya di template yang berbeda.

Langkah Mengganti background image

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Design (Rancangan).
4. Pilih dan klik Edit HTML.
5. Backup Template dengan cara :
   • Klik Download Template Lengkap (Download Full Template).
   • Simpan file template di folder PC. Berikan nama yang berisikan waktu modifikasi untuk lebih memudahkan mengingat dan menggunakan disaat diperlukan kembali.
6. cari kode
   <Variable name="body.background" description="Body Background" type="background".
   Kode ini berada di "Variable Definitions". Gunakan Ctrl+F untuk mempermudah pencarian kode.
7. Di bawah kode di atas masih ada lanjutannya. Bentuk kode selengkapnya akan terlihat seperti ini:
   

   Kode Lengkap

   <Variable name="body.background" description="Body Background" type="background"
          color="$(body.background.color)" default="$(color) none repeat scroll top left" value="#93c9e3 url(http://themes.googleusercontent.com/image?id=13EdF7Yo08fRho8Il6uHSFP_n8OiRKc7P-Ejoe1WqTLtl3zNJvlMncTGNO8o2SHUns4-8) no-repeat fixed top center /* Credit: konradlew (http://www.istockphoto.com/googleimages.php?id=5404187&platform=blogger) */"/>

   Kode yang berwarna merah adalah URL image yang dipergunakan sebagai background. Image inilah yang akan kita ganti dengan background image yang sudah kita buat dan persiapkan. Upload background image anda di blogger melalui halaman posting. Jangan lupa ukurannya minimal 1024x700 (pixel atau px).
8. Ganti URL yang berwarna merah dengan URL background image yang telah anda upload sebelumnya. Lihat kode berikut yang telah menggunakan background image baru:
   

   Kode dg background baru-1:

   <Variable name="body.background" description="Body Background" type="background"
          color="$(body.background.color)" default="$(color) none repeat scroll top left" value="#93c9e3 url(http://gubhugreyot-image-post.googlecode.com/files/gubhugreyot_sky-and-bird.jpg) no-repeat fixed top center /* Credit: konradlew (http://www.istockphoto.com/googleimages.php?id=5404187&platform=blogger) */"/>

   Anda bisa membuang kode berwarna hijau hingga menjadi seperti ini:
   

   Kode dg background baru-2

   <Variable name="body.background" description="Body Background" type="background"
          color="$(body.background.color)" default="$(color) none repeat scroll top left" value="#93c9e3 url(http://gubhugreyot-image-post.googlecode.com/files/gubhugreyot_sky-and-bird.jpg) no-repeat fixed top center"/>

9. Klik Simpan Template (Save Template)
10. Buka blog dan lihat hasilnya!