gubhugreyot: Demo & Tutorial: Upload Image Anda & Jadikan Background Blogger Template Designer

Tuesday, 7 February 2012

Upload Image Anda & Jadikan Background Blogger Template Designer

Setelah diposting sebelumnya kita coba ganti background image Blogger Template Designer melalui "Variable Definitions", untuk kali ini kita akan merubah atau mengganti background image tersebut menggunakan cara yang lebih praktis dan mudah. Salah satu fitur yang ada di Blogger Template Designer (Perancang Template Blogger) akan menolong kita untuk tidak hanya mengganti backgroundnya saja, bahkan upload background image bisa langsung dilakukan di tempat. Yah..., inilah salah satu layanan hebat blogger terhadap penggunanya.

Untuk menggunakan background hasil karya sendiri, beberapa hal di bawah ini perlu diperhatikan:

Buatlah image dengan ukuran yang tak jauh berbeda/sesuai dengan lebar blog. Pada umumnya blog menggunakan lebar sebesar 1024 pixel (px). Tinggi image tak lebih dari 700px s/d 800px. Ukuran yang tepat (tak terlalu besar) membuat beban image menjadi lebih ringan dan ini menguntungkan saat proses loading. Semakin kecil beban image tentu loading semakin cepat.
Pilih file image yang tepat dan sesuai dengan background yang akan dipergunakan. Jika anda menggunakan image dengan banyak warna sebaiknya menggunakan file .jpg, sedang bila hanya 1 atau dua warna (terutama hitam dan putih) file berekstensi .gif atau .png akan lebih tepat.
Jika yang akan digunakan background image berukuran besar dan direncanakan sebagai background tak berulang (no-repeat), image dengan kwalitas sedang sudah cukup baik untuk digunakan (setting dilakukan saat proses penyimpanan image).

Langkah upload dan mengganti background Blogger Template Designer

Login ke Blogger. Gunakan Alamat Email atau User Name dan Password Anda.
Beberapa saat setelah login anda akan masuk di Halaman Dasboard. Klik Rancangan (Design).
Cari dan klik Edit HTML.
Klik "Download Template lengkap (Download Full Template)" untuk melakukan proses backup template. File yang tersimpan ini bisa digunakan untuk berjaga-jaga jika perubahan memperoleh hasil yang tak sesuai harapan. Untuk mengembalikan template seperti keadaan sebelum perubahan, klik Browse kemudian dilanjutkan Upload.
Klik "Perancang Template (Template Designer)". Tunggu beberapa saat hingga halaman Perancang Template Blogger (Blogger Template Designer) terbuka.
- Klik Latar Belakan (Background).
- Klik icon (tanda panah) yang terletak dalam box preview Gambar Latar (Background Image).
- Klik "Unggah Gambar (Upload Image)" dan lanjutkan memilih dan menentukan image yang akan digunakan sebagai background dengan klik Browse. Tunggu hingga proses upload selesai.
- Klik Selesai (Done).
Lanjutkan untuk menentukan posisi background melalui fitur "Perataan (Alignment)". Anda bebas memilih posisi background. Jika background image berukuran lebar (width) 1024px dan lebar (width) template (blog) juga disetting tak terlalu beda dengan lebar background maka posisi yang manapun tak menjadi masalah. Pengaturan perataan ini hanya penting digunakan jika background image ukuranya jauh berbeda dengan lebar template (blog). Cobalah terlebih dahulu dengan perataan atas-tengah (top-center).
Deretkan (Tile) hanya digunakan jika image berukuran lebih kecil dari halaman blog hingga perlu pengulangan background (background » repeat). Klik Jangan deretkan (Dont tile).<
Gulir dengan laman (Scroll width page). Jika memilih "ya" nantinya background akan bergulir (gulung) saat halaman blog ditarik ke bawah. Lebih baik silahkan pilih "no". Posisi seperti ini akan membuat background fixed position hingga background akan tetap ditempat dan sekalipun halaman blog digulung akan tetap pada posisinya (selalu terlihat).
Lanjutkan dengan kli Sesuaikan Lebar (Adjust Widths). Sesuaikan lebar halaman blog dengan image yang digunakan dengan mengatur lebar blog melalui pengatur lebar Seluruh blog (Entire blog). Jika image berukuran 1024px pengaturan lebar ideal dengan memperhatikan horizontal scroller di ujung bawah halaman. Geser hingga scroller tak kelihatan. Dengan pengaturan seperi ini nantinya blog terlihat lebih enak dilihat karena lebarnya tepat dengan lebar layar.
Klik Terapkan ke blog (Apply to blog) di ujung kanan-atas.
Klik Kembali ke Blogger (Back to Blogger) kemudian buka halaman blog untuk melihat hasilnya.