Cara Mengganti atau Merubah Gambar Header Blog: Tutorial Desain BloGGeR

Serius menekuni profesi blogger atau dengan istilah lain serius ngeblog memang memunculkan banyak tantangan baru. Bukan hanya waktu yang harus banyak diluangkan untuk membuat posting saja, tetapi upaya untuk membuat sebuah blog yang lebih mempunyai citra diri atau identitas diri akhirnya jadi tantangan yang lebih besar lagi. Rasa tak puas akan desain asli bawaan blogger sebenarnya wujud dari semangat luar biasa yang menunjukkan keseriusan seorang blogger untuk menekuni aktifitas ngeblog. Sebuah vitalitas yang harus terus dipompa supaya nggak mudah kempes ditelan kerikil keputusasaan atau kejenuhan.

Memanfaatkan desain blog gratis yang banyak ditawarkan memang menjadi sebuah solusi untuk memperlihatkan keberbedaan dari desain asli blogger. Tetapi cara inipun akhirnya tak juga memberi kepuasan dan kebaggaan yang hakiki. Kalian tak perlu menyesali kejadian seperti ini. Semua orang waras pastilah ingin mempunyai jati diri. Sesuatu yang tumbuh dari dasar hati. Coba... Apa bangganya kalau sampeyan bisa ngetop hanya karena misalnya wajah sampeyan di operasi plastik hingga mirip Thukul? atau mungkin sampeyan yang wanita jadi terkenal karena melakukan operasi plastik supaya lebih mirip Mpok Atik?

Tantangan bukan harus dijauhi atau dihindari. Hadapilah tantangan itu supaya muncul sebuah solusi yang membuat sampeyan tambah ilmu dan keyakinan diri. Tak ada satupun di dunia ini yang nggak bisa diatasi atau dipelajari. Hanya butuh satu kunci untuk melakukannya : Hadapi segala hal dalam hidup dengan penuh semangat, keberanian, kecerdikan, ketekunan dan jangan pernah menyerah.

Untuk melakukan perubahan desain blog hanya dibutuhkan keberanian untuk mengothak athik template, sedikit mempelajari kode html (terutama css) dan teknik-teknik sederhana mengolah gambar. Di blog ini sudah ada beberapa materi posting yang berkaitan dengan semua hal di atas, silahkan sampeyan buka dan seandainya ada yang perlu untuk diulas lebih dalam bisa disampaikan lewat kolom komentar. Moga-moga saja apa yang masih jadi ganjalan bisa kita pelajari bersama.

Cara Merubah gambar Header Blog :

Untuk mempelajari ini, kita akan menggunakan template TicTac Blue bawaan blogger :

1. Login ke Blogger (login to Blogger)
2. Dasbor (Dasboard)
3. Rancangan (Design)
4. KLIK Edit HTML
5. Amankan Template (Bacup Template) :
   Mengamankan template dimaksudkan untuk memudahkan mengembalikan template ke keadaan semula apabila perubahan yang dilakukan tidak sesuai dengan rencana atau harapan yang diinginkan. Cara mengamankan template bisa sampeyan buka di sini.
6. Header : Cari KODE syntax #header
   Gunakan Ctrl + F supaya lebih mudah saat mencari KODE. Kalau belum tahu bisa lihat caranya dengan KLIK di sini.
   Bentuk KODE lengkap syntax #header adalah seperti di bawah ini:

   #header-wrapper {
   margin: 0;
   padding: 0;
   font: $pagetitlefont;
   background: #e0e0e0 url(http://www.blogblog.com/tictac_blue/top_div_blue_$startSide.gif) no-repeat $startSide top;
   }

   • URL gambar background header :
     http://www.blogblog.com/tictac_blue/top_div_blue_$startSide.gif
   • Karena KODE css tersebut masih memanfaatkan fungsi Variable Definitions, ubahlah $startSide menjadi left, sehingga menjadi URL yang sebenarnya :
     http://www.blogblog.com/tictac_blue/top_div_blue_left.gif
7. Properties : buka URL tersebut di address bar untuk melihat bentuk gambar background.
   Lihat ukuran gambar background header dengan Letakkan cursor pada gambar yang telah dibuka, KLIK kanan mouse kemudian buka propertiesnya. Ukuran gambar akan kita ketahui : 847px (width) x 240px (height)
   Gambar background header :
   
   KLIK untuk memperbesar gambar!
8. Buat Gambar : Karena ukuran gambar sudah diketahui dengan jelas, maka untuk merubahnya sampeyan harus membuat gambar baru dengan ukuran seperti gambar background header di atas.
   Cara buat gambar :
   • Buat gambar sendiri menggunakan software.
   • Buat gambar menggunakan layanan online gratis (Online Photo/Image Editor). Bila sampeyan ingin menggunakan cara ke-2 ini, silahkan kalian bisa berkunjung ke :
     - http://www.pixlr.com/editor/,
     - http://www.online-image-editor.com/ , atau
     - http://www.imageeditor.net/.
9. Upload : Upload di file hosting apabila gambar sudah selesai dibuat. Copy paste URL-nya dan gunakan untuk mengganti URL yang ada di syntag #header.
10. Save : KLIK Simpan Template (Save Template).
11. Lihat Blog : Buka Blog dan lihat hasil perubahan yang sudah dilakukan.

Catatan/Keterangan :

- Panduan dan tutoroal ini diperuntukkan bagi yang menggunakan Template Tata Letak (Layout Template).
- Usahakan membuat gambar dengan beban minimal sehingga tidak terlalu membebani loading blog.

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

Update » Rebo LEGI, Maret, 28, 2012

» Happy Blogging - gubhugreyot «