Cara Mudah Membuat Gambar Header Blog

Salah satu cara untuk memperindah tampilan blog yang kita miliki adalah dengan menambahkannya gambar header. Format gambar yang bisa dipakai sebagai header antara lain gambar yang berformat GIF, JPG, atau PNG yang bisa anda buat sendiri, baik menggunakan Adobe Photoshop, CorelDraw, Adobe Ilustrator, atau dengan sofrware pengolah gambar lainnya.

Agar ukuran header yang kita pakai sama seperti ukuran halaman blog, temukan ukuran halaman blog anda dengan mencari kode “ #outer-wrapper{width:900px …. “ pada HTML blog anda Jika. Jika ukuran halaman blog anda 900px maka buatlah gambar yang lebarnya 900px sedangkan high (tinnginya) bisa anda atur sendiri sesuai seler anda.

Setelah gambar anda sudah jadi dan menurut anda itu adalah gambar yang sesuai banget dengan blog anda lalu upload gambar tersebut kemana aja anda mau, atau bisa juga anda upload ke blogger.com atau ke Picasa. Kemudian yang anda perlukan adalah link gambar tersebut. Misalnya saya punya link gambar header seperti ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgpECcGlmJkIQ18PuYhZvNBZUZEFxNW9JOmwXHirlfVx03feoPf90J1JITnT1Kq_DrkBgEd8lGFDci57YtNAb6Zw1STiDK8xxdtugWY6hEHJj2gv8vjmmSr2cTgei_KGWZAYR9yRTvB0o/s1600/mywap.png    

Link gambar tersebuat yang kita masukkan ke HTML Blog kita.

Caranya adalah sebagai berikut :

Pertama. Pastinya anda sudah login ke blog anda kemudian pilih Design( Rancangan) dan memilih Edit HTML. Jangan lupa mencentang “Expand Widget Template” agar bisa diperbaiki seandainya terjadi kode error.

Kedua, Temukan kode berikut dengan mudah dengan menekan Ctrl+F (fine) dan ketikkan kode :

#outer-wrapper{width:850px;margin:10px auto 0px;padding:0;text-align:$startSide;font:$bodyfont;background:# 0000;}

Ketiga Letakkan link gambar anda dengan cara mengganti #000 dengan link diatas. Maka jadinya seperti berikut.  

#outer-wrapper{width:850px;margin:10px auto 0px;padding:0;text-align:$startSide;font:$bodyfont;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgpECcGlmJkIQ18PuYhZvNBZUZEFxNW9JOmwXHirlfVx03feoPf90J1JITnT1Kq_DrkBgEd8lGFDci57YtNAb6Zw1STiDK8xxdtugWY6hEHJj2gv8vjmmSr2cTgei_KGWZAYR9yRTvB0o/s1600/mywap.png) center top repeat-x;}

Keempat, Setelah selesai, simpanlah template blog anda dan lihat hasilnya….

Selamat mencoba tips dari Khocet Blog.