Cara Buat dan Pasang Background Image di Header BloGGer Baru: Cara Menampilkan background Image di Header

Ah .... BloGGeR ...., BloGGeR .... Kenapa harus diganti total ya, templatenya. Jadi bikin banyak orang bingung saja. Bukan hanya pembuat tutorial BloGGeR BlogSPOT saja yang jadi tambah kerjaan, blogger lama dan blogger baru pun pastinya harus lebih banyak lagi belajar tentang desain terbaru template BlogSPOT (New BloGGeR Template). Bukan pekerjaan yang ringan karena lebih banyak tutorial yang telah terposting umumnya terfokuskan di panduan pengenalan dan modifikasi template BloGGer Lama.

Tapi apapun juga, dibalik beberapa keluhan di atas, kalau dihitung-hitung, ada untungnya juga bagi blog yang mengambil segmen posting Tutorial dan Panduan BloGGeR BlogSPOT. Apa sebabnya, coba? He ... he ... Jadi punya bahan posting baru, khan?! Repotnya ..., yang kemarin dulupun belum kelar, sekarang harus mulai mengarahkan ke sasaran baru yang tentunya harus kembali menguras kemampuan otak yang sudah mendekati pikun. Ya ada senangnya ... ya ada posingnya juga. Ha ya ...., susah, khan?! yah ..., seperti inilah manusia. Selalu pandai mengeluh dan jarang bersyukur. Lebih parah lagi, begitu udah enak .., lupalah dia sama asal muasal apalagi tetangga dan saudara.

Blog tanpa sebuah background yang kita ambilkan dari sebuah gambar atau image (background-image) sebenarnya nggak masalah juga, tapi sialnya ..., penggunaan background image ini tidak membuat blog semakin jelek tapi justru semakin membuat penampilan blog tambah manis saja. Jadinya ..., apapun juga, untuk membuat wajah blog sampeyan supaya terlihat lebih menarik, bersahabat dan penuh senyuman ramah, tidak boleh tidak sebuah background gambar harus dipergunakan. Nggak ada ruginya, kok. Secuil gambar dengan beban entengpun mampu merubah tampilan kepala blog (header blog). Mungkin sampeyan bisa membayangkan wajah (header) orang yang bangun tidur dengan mata yang masih belum tersiram air (ngeri, ya?! Biasanya di matanya itu, lho. Ada sisa ampas tahu yang mengkilap klo terkena sinar lampu! He ... he ...), sementara terlihat juga di samping kanan atau kiri bibir ngowohnya juga masih ada seleret lukisan berwarna putih kecoklat-coklatan yang terlihat mulai mengering. Ha .... ha .... Seperti itulah wajah blog kalau sama sekali belum tersentuh modifikasi. Wagu tur ora mboys kata orang! He .... he ...

Bagaimana menciptakan header blog BloGGeR Baru sampeyan supaya tampil lebih menarik dan bikin percaya diri? Ho .. ho ... hanya ada satu jalan untuk melakukannya. Rombak tampilan dengan beri sebuah background image. Ayo bareng bareng kita simak langkah-langkah untuk merubahnya!

Cara Membuat Menampilkan Background Gambar (background Image) di Header Blog BloGGeR Baru

1. Login to BloGGeR (Login Ke BloGGeR) : Tulis User Name/Nama Pengguna atau Email Address serta tuliskan juga Password/Sandi.
2. Dasboard (Dasbor) : Sesaat setelah login, sampeyan akan memasuki halaman Dasbor. KLIKDesign/Rancangan.
3. Deign (Rancangan) : Pada bagian Design ini terdiri dari dua buah halaman. Page Element atau Elemen Laman dan halaman Edit HTML. Karena modifikasi akan kita lakukan melalui halaman Edit HTML, oleh karena itu silahkan KLIK link Edit HTML.
4. Edit HTML : Untuk antisipasi kegagalan yang mungkin terjadi karena kekeliruan penulisan kode atau sebab yang lain, silahkan lakukan Back-Up Templates/Pengamanan Template terlebih dahulu dengan cara KLIK Download Full Templates/Download Template Lengkap. Untuk mengetahui lebih dalam tentang Back Up Template, silahkan sampeyan KLIK link di bawah ini :
   
   Cara Bac-up Template
5. Find the CSS code bellow/Cari Kode CSS di bawah ini : Kode CSS di bawah ini harus kita ubah supaya sebuah background image bisa ditampilkan di header blog. Cari menggunakan Ctrl+F (keyboard). Apabila ingin mengetahui cara mencari kode html menggunakan Ctrl+F, silahkan KLIK link di bawah ini:
   
   Cara Cepat Cari Kode HTML di Template
   
   

   .header-outer {
       margin: 0 0 0 0;
       background: #000 none repeat scroll 0 0;
    }

   
   Kode CSS di atas tidak harus sama persis, namun yang penting adalah pada bagian .header-outer
6. Replace CSS Code/Ganti Kode CSS : Ganti kode CSS di atas dengan kode css baru (new css code) berikut ini :

.header-outer {
    margin: 0 0 0 0;
    background:transparent url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/FColH1300V400.jpg) center no-repeat;
 }


, atau bisa juga dengan yang ini :


.header-outer {
    margin: 0 0 0 0;
    background:transparent url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgBlueH1V221.gif) top left repeat-x;
 }

7. Margin : Apabila margin yang digunakan berbeda, atau mungkin ada kode CSS selain background dan margin, silahkan ganti kode background-nya saja.
8. Image : Gambar atau Image yang digunakan sebagai background bisa juga di ganti dengan sebuah gambar baru yang mungkin sampeyan buat dan ingin gunakan. Ganti saja URL gambarnya dengan URL hasil upload yang dilakukan.

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

• 
• 

» Happy Blogging - gubhugreyot «