Cara Merubah dan Mengganti Background Image Template BloGGer Baru

Mulai detik ini, jam ini, hari ini, ketika hari mulai menapak temaram yang mulai menggelayut menjemput senja hari, gubhug reyot akan memulai membuka Panduan dan Tutorial Serta Cara Memodifikasi Template (Desain Blog) BloGGeR Baru (How to change Background Image New Blogger Templates), yang tidak boleh tidak memang harus segera dimulai.

Meskipun kalau kita lihat secara utuh, sebenarnya template ini masih perlu banyak perbaikan di sana-sini, tetapi apa boleh buat karena ternyata memang sudah di mulai menjadi sebuah pilihan wajib bagi para blogger. Beberapa bagian yang menjadi sedikit permasalahan adalah loading Posting Mode Edit HTML yang terasa begitu lama, beberapa kode html atau CSS yang sudah disertakan tetapi belum difungsikan, pemakaian background Image dengan ukuran Super Besar dan bahkan ada yang mempunyai beban hingga 247,06 KB (252.988 bytes) pada salah satu background image di Template Awesome Inc (akan memperberat loading blog!) serta beberapa hal lain.

Sebagai langkah awal Panduan dan Tutorial Modifikasi blog BloGGer Baru, kita akan sentuh permasalahan yang terjadi pada penggunaan background image. Panduan ini hanya akan mengupas tentang bagaimana cara merubah dan mengganti background image tersebut sebagai upaya untuk mendapatkan sebuah tampilan maksimal pada background dengan cara memperkecil atau mengganti secara penuh dengan background image baru dengan cara membuat sebuah background image sendiri. Dengan cara ini tentunya akan banyak sekali pilihan bagi sobat-sobat blogger untuk menampilkan background yang paling tepat bagi blog.

Oya ..., perlu aku sampaikan ke sobat blogger semua, saat ini aku juga tengah mencoba membuat sebuah koleksi pribadi yang nantinya bisa sobat blogger manfaatkan. Koleksi ini berupa background image dari blogger baru yang sudah dimodifikasi (resize, pemotongan dan kompres) hingga nantinya bisa di tampilkan sebagai sebuah background image yang paling enteng bebannya (ada yang mampu di kompres hingga hanya berbeban 30kb). Juga melalui proses ini, background image akan tertampilkan secara sempurna pada seluruh bagiannya. Tentu saja apa yang aku lakukan ini tidak mungkin selesai dalam waktu singkat karena memang background image yang harus di modifikasi amat banyak sekali.

Langkah untuk Merubah dan Mengganti Background Image Template BloGGeR Baru

1. Login to BloGGer (Login ke BloGGeR) : Tuliskan User Name atau Email Address dan Password (Sandi).
2. Dasboard (Dasbor) : Ini adalah halaman pertama yang kita jumpai setelah login. KLIK link Design (Rancangan).
3. Design (Rancangan) : Setelah memasuki halaman ini, jangan berhenti di Page Element (Elemen Laman), tetapi lanjutkan KLIK link Edit HTML.
4. Back Up (Amankan Template) : Sekali lagi ini adalah sebuah prosedur standart yang memang harus dilakukan ketika tengah dilakukan modifikasi atau perubahan desain blog.
   - Download Full Template (Download Template Lengkap) : KLIK link Download Full Template (Download Template Lengkap).
   - SAVE (Simpan) : Save (Simpan) file template sampeyan di folder PC. Silahkan beri nama file ini untuk memudahkan mengingat. File tersimpan akan berekstensi .xml.
5. Stay in the Edit HTML (Tetap di Edit HTML) : Find html code (cari kode html) di bawah ini :

   <Variable name="body.background" description="Body Background" type="background"
          color="$(body.background.color)"

   
   Kode html ini masih ada lanjutannya, sedang posisi kode terletak di bagian atas pada "Variable definitions".
6. Background Image : Find background image of html code above (cari background image dari kode html di atas. Bentuknya seperti ini :

   value="#xxxxxx url(http://themes.googleusercontent.com/image?id=.......)

   Kode ini terdiri dari :
   - background color (#xxxxxx) dan
   - background image (http://themes.googleusercontent.com/image?id=.......) ini adalah kode kelanjutan dari kode html di atas.
7. Replace with a new background image (ganti dengan yang baru) : Ganti background image (http://themes.googleusercontent.com/image?id=.......)tersebut dengan yang baru. Sampeyan bisa memodifikasi gambar yang beralamat di atas menggunakan Adobe Photoshop kemudian meng uploadnya terlebih dahulu ke file/image hosting. Apabila tidak bisa menggunakan adobe, silahkan gunakan situs yang melayani potong gambar online (online image cropper).
   Salah satunya ini : http://www.drpic.com/.
8. SAVE Template (Simpan Template) : KLIK "SAVE Template".
9. Perbandingan background Image : Di bawah ini adalah background image bawaan blogger dan background image baru hasil modifikasi. Silahkan untuk coba perbandingan ke duanya.
   - background balogger baru (asli) : http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYjRlMDdlZDAtNzNiMC00Y2NiLWIyNDctMzI2ZGQ4ZTliMjM0 » 1800px × 1600px - 247.06 KB (252988 bytes)
   - background image hasil modifikasi : http://i964.photobucket.com/albums/ae124/gubhugreyot/bgNewBloggerTemplate/image-8-Keramic-China.jpg » 1098px × 630px (scaled to 930px × 534px) 69.66kb.
10. Adobe Photohop : Tentu saja untuk merubah atau memodifikasi gambar /background image ini sangat lebih menguntungkan apabila kita menggunakan Adobe Photoshop. Pengaturan potongan dan beban bisa kita atur sesuai selera.
11. 1024px x 600px : Ukuran ini adalah ukuran background image standar. Sampeyan bisa memberi toleransi width x height dalam nilai width=1100px dan height=650px (Template Awesome Inc) oleh Tina Chen.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «